Disappearing Layer

jwalker80 · #1 Dec 22nd, 2005, 03:32

Hi I am having a problem with absolute positioning in IE. The layer is appearing in Firefox and

disappearing completely in IE.

The screenshots show the difference in the browsers.

I have set different style sheets for Firefox and IE, and have tried to change the position for the IE

stylesheet but cant seem to get it appearing at all.

My CSS is

#left_div5
{
float: right;
width: 250px;
height:182px;
margin: 0;
padding: 0;
position:absolute; top: 389px; right: 560px;
z-index:5;
}

My HTML is

<div id="left_div5"><img hspace="4px" align="left" src="img/middle_bracket.jpg" />
Average Receivable Age - 93 days
Alberta's Construction GDP - 7.5%
Alberta's Energy GDP - 29.3%
Labour Rates (Alberta) - $23/hr
Labour Rates (Ft McMurray) - $25/hr
</div>

Rob · #2 Dec 22nd, 2005, 09:42

This is a tad off topic..... but I was almost sure this thread's subject read 'Disappearing Lover' ....

I had to do a double take..... it's times like this I realise I need to go back to Specsavers... heh...

Sorry... to get back on topic...

Do you have a URL we can see this on?

Pheonix · #3 Dec 22nd, 2005, 10:06

I'm almost competly sure that the code you are showing us is not what is causeing the problem, I need to see more.

jpmitchell · #4 Dec 22nd, 2005, 15:23

I agree - I don't think it is in the code you listed. Do you have a sample site up it would be helpful to have something we can look at all of it, edit the CSS on the fly and things like that.

jwalker80 · #5 Dec 23rd, 2005, 04:04

Cool, I have changed the code around a bit. I have a couple of screen shots to show you whats is happening. Driving me crazy!!

Here is the HTML:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSI home version 2</title>
<link href="styles.css"rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="IEstyles.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>

<body>

<div id="container">
<div id="hometop">
<img class="floatLeft" align="left" src="img/logo_home.jpg"/><p class="hometop_text"><span class="hometop_text_h1">Constructive Strategies Inc.</span> is an Alberta-based consulting company aimed at enhancing the effectiveness of construction cost managment processes and systems through customer focused, common sense strategies and solutions.</p></div><!-- End hometop -->
 
<div id="nav" class="clear">
<img src="img/topNav.gif" />
<div id="navigate">
    <a href="#">SERVICES</a> | <a href="#">OUR APPROACH</a> | <a href="#">INDUSTRY RESOURCES</a> | <a href="#">CAREERS</a> | <a href="#">CONTACT US</a>
</div>
</div>

<div id="leftcontent_home">
<div id="left_div1"><p class="ver_10_lgrey leftpadding toppadding"><span class="bold_big_white">SWAT</span> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris eget purus. Integer sapien velit, hendrerit in, accumsan ac, porttitor ac, nibh.</p>
  <span class="link_black leftpadding"><a href="#">Read More...</a></span>
</div>
<div id="left_div2"><p class="ver_10_black_bold leftpadding CSIpadding">CSI NEWS:</p></div>
<div id="left_div3"><p class="ver_10_black_bold textlayer">INDUSTRY DASHBOARD:</p>
</div>
<div id="left_div4"><img align="left" src="img/side_bracket.jpg" />
    <p class="newspadding"><span class="ver_10_bold_red">11/15/05</span><br><span class="ver_10_black">Lorem ipsum dolor sit amet, consectetuer adipiscing.</span><br><span class="link_black"><a href="#">Read More...</a></span></p>
    <p class="newspadding"><span class="ver_10_bold_red">11/15/05</span><br><span class="ver_10_black">Lorem ipsum dolor sit amet, consectetuer adipiscing.</span><br><span class="link_black"><a href="#">Read More...</a></span></p>
</div>
<div id="left_div5"><img align="left" src="img/middle_bracket.jpg" />
    <p class="floattext"><span class="ver_10_grey">Average Receivable Age -</span><span class="ver_10_bold_red"> 93 days</span></p>
    <p class="floattext"><span class="ver_10_grey">Alberta's Construction GDP -</span><span class="ver_10_bold_red"> 7.5%</span></p>
    <p class="floattext"><span class="ver_10_grey">Alberta's Energy GDP -</span><span class="ver_10_bold_red"> 29.3%</span></p>
    <p class="floattext"><span class="ver_10_grey">Labour Rates (Alberta) -</span><span class="ver_10_bold_red"> $23/hr</span></p>
    <p class="floattext"><span class="ver_10_grey">Labour Rates (Ft McMurray) -</span><span class="ver_10_bold_red"> $25/hr</span></p>
</div>
</div><!-- End leftcontent -->

<div id="image_home"><img src="img/home_turner.jpg" /></div>

<div id="rightcontent_home"><p class="ver_10_black right_text_padding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris eget purus. Integer sapien velit, hendrerit in, accumsan ac, porttitor ac, nibh. Mauris mauris. Mauris a sem quis ipsum dignissim facilisis. Nulla lacus arcu, malesuada eget, ultrices sit amet, ornare nec, ipsum. Proin et elit.</p><p class="blackbold">John Smith<br>Turner Construction Inc.</p></div>

<div id="footer"><a href="#"><img class="floatLeft" src="img/index_12.jpg" border="0" align="middle" /></a><p class="footerText_home"><a href="#">LEGAL</a> &nbsp; | &nbsp; <a href="#">SITEMAP</a></p>
<img class="floatRight" src="img/footer_end2.jpg" /></div>
</div>
</body>
</html>

And the CSS:

Code: Select all

/* CSS Document */

#container
{
width: 900px;
background-color: #fff;
padding: 0;
margin: 0;
}

img {display:block;}

#top
{
padding: 0;
background-color: #ddd;
}

#hometop
{
margin: 0;
padding: 0;
background-image:url(img/logo_repeat.gif);
background-repeat: repeat-x;
}

#top h1
{
padding: 0;
margin: 0;
}

#nav
{
padding: 0;
margin: 0;
}

#navigate
{
    background-image:url(img/background_repeat.jpg);
    background-repeat: repeat-x;
    padding-left:26px;
    padding-bottom:4px;
    padding-top:3px;
}
 
#navigate a
{
    font-weight:bolder;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    text-decoration:none;
    color: #000000;
}
 
#navigate a:hover
{    
    color:#ffffff;
}


#title
{
padding: 0;
margin: 0;
}

#leftcontent
{
float: left;
width: 266px;
margin: 0;
padding: 0;
}

#leftcontent_home
{
float: left;
width: 361px;
margin: 0;
padding: 0;
}

#left_div1
{
background-image:url(img/top_right_short_bg.gif);
float: left;
width: 361px;
height:128px;
margin-left: 0;
}

#left_div2
{
background-image:url(img/news_bg1.gif);
clear:left;
float: left;
width: 206px;
height:31px;
margin: 0;
}

#left_div3
{
background-image:url(img/news_bg2.gif);
float: right;
width: 155px;
height:31px;
margin: 0;
padding: 0;
}

#left_div4
{
clear:left;
float: left;
width: 206px;
height:182px;
margin: 0;
padding: 0;
}

#left_div5
{
float: right;
width: 155px;
height:182px;
margin: 0;
padding: 0;
}

#middlecontent_home
{
background-image:url(img/home_strip1.gif);
background-repeat: repeat-x;
float: left;
width: 170px;
margin: 0;
padding: 0;
}

#rightcontent_home
{
background-image:url(img/right_side_bg.gif);
float:right;
width: 352px;
height: 341px;
margin: 0;
padding: 0;
}

#image_home
{
float: left;
margin: 0;
padding: 0;
width: 187px;
}

#rightcontent
{
float:right;
width: 158px;
margin: 0;
padding: 0;
}



#middlecontent
{
float: left;
width: 476px;
margin: 0;
padding: 0;
background:url(img/backcolour_1.jpg) no-repeat;
}



#footer
{
background-image:url(img/background_repeat3.gif);
background-repeat: repeat-x;
width:900px;
height:35px;
clear: both;
margin: 0;
padding: 0;
}

.menutext
{
font-family:Arial, Helvetica, sans-serif;
color:#990000;
}

.sectionText
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#999999;
padding-left:21px;
padding-top:22px;
}

.descriptText
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#000000;
}

.graybold
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#666666;
font-weight:bold;
}

.biggerText {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color:#000000;
}

.imgText
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#666666;
max-width: 16em;
}

.blackbold
{
padding-top:8px;
padding-bottom:8px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color:#000000;
}

.ver_10_lgrey
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color:#CCCCCC;
}

.ver_10_grey
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color:#666666;
}

.ver_10_black
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color:#000000;
}

.ver_10_black_bold
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight:bold;
color:#000000;
}

.ver_10_bold_red
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight:bold;
color:#990033;
}

.bold_big_white
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size: 14px;
color:#FFFFFF;
}

.link_black a
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color:#000000;
}

.link_black a:hover
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color:#990033;
}

.footerText
{
float:right;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#000000;
padding-top:11px;
padding-right:170px;
}

.footerText a
{
color:#000000;
text-decoration:none;
}

.footerText a:hover
{
color:#000000;
text-decoration:underline;
}

.footerText_home
{
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#000000;
padding-left:150px;
padding-top:11px;
}

.footerText_home a
{
color:#000000;
text-decoration:none;
}

.footerText_home a:hover
{
color:#000000;
text-decoration:underline;
}

.spanwidth
{
width: 100px;
}

.floatRight
{
float: right;
}

.floatLeft
{
float: left;
}

.maxWidth
{
max-width: 30em;
}

.currentPageLink
{
color:#999999;
}

.clear
{
clear:both;
}

.secondaryNav
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#990033;
padding-left:23px;
text-decoration:none;
}

.secondaryNav a:link
{
text-decoration:none;
}

.secondaryNav a:hover
{
text-decoration:underline;
}


.maxwidth
{
max-width: 30em;
}

.leftpadding
{
padding-left: 25px;
}

.nav2_padding
{
padding-top:14px;
padding-left:4px;
line-height:10px;
}

.body_padding
{
padding-left: 20px;
}

.body_top_padding
{
padding-top: 20px;
}

.toppadding
{
padding-top: 22px;
}

.CSIpadding
{
padding-top: 8px;
}

.right_text_padding
{
padding-top: 31px;
width:expression( 
    document.body.clientWidth > (500/12) * 
    parseInt(document.body.currentStyle.fontSize)?
        "20em":
        "auto" );
line-height: 12pt;
}

.textlayer
{
    position:relative;
    z-index:7;
    width: 280px;
    padding-left: 36px;
}

.imgnopadding
{
margin:0;
padding:0;
}

.newspadding
{
padding-left: 34px;
padding-top: 16px;
}

.floattext
{
    position:relative;
    z-index:6;
    width: 100px;
}

jpmitchell · #6 Dec 24th, 2005, 13:56

Thank you for the code. I think your problem is the width of left5. Which is probably due to the ones around them. Your slices may have been off , but this is all speculation. Do you need someone to host this for you so you can have a 'live' version of it. With images and everything it is much easier to troubleshoot.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Disappearing Buttons	cewgirl	Starting Out	6	Apr 13th, 2007 20:21
The disappearing submenu...	BGarner	Web Page Design	13	Feb 18th, 2007 14:36
Disappearing ICO Favicon	cyberseed	Web Page Design	2	Nov 6th, 2006 12:16
Disappearing elements	boscomilo	Web Page Design	9	Jun 9th, 2006 15:07
Disappearing borders	Dotty	Web Page Design	2	May 18th, 2006 14:06

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Disappearing Layer