|
|
Post a Project »
Find a Professional HTML Freelancer!
Find a Freelancer to help you with your HTML projects
| |
|
 |
|
|
12-21-2005, 10:34 PM
|
Disappearing Layer
|
Posts: 31
|
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" />
<p><span class="ver_10_grey">Average Receivable Age -</span><span
class="ver_10_bold_red"> 93 days</span></p>
<p><span class="ver_10_grey">Alberta's Construction GDP -</span><span
class="ver_10_bold_red"> 7.5%</span></p>
<p><span class="ver_10_grey">Alberta's Energy GDP -</span><span
class="ver_10_bold_red"> 29.3%</span></p>
<p><span class="ver_10_grey">Labour Rates (Alberta) -</span><span
class="ver_10_bold_red"> $23/hr</span></p>
<p><span class="ver_10_grey">Labour Rates (Ft McMurray) -</span><span
class="ver_10_bold_red"> $25/hr</span></p>
</div> |
|
|
|
|
12-21-2005, 11:15 PM
|
|
Posts: 635
|
Is your z-index of that DIV higher than the one that's supposed to be below it?
|
|
|
|
|
12-21-2005, 11:59 PM
|
|
Posts: 31
|
I have changed the way I have ordered it now, which has presented a new problem...
when using relative positing in IE it seem to ignore the z-index value, is there away of getting it to recognise this?
|
|
|
|
|
12-22-2005, 12:30 AM
|
|
Posts: 635
|
Hmmm what is your doctype? Strict or transitional?
|
|
|
|
|
12-22-2005, 06:40 PM
|
|
Posts: 10,815
Name: Steven Bradley
Location: Boulder, Colorado
|
It might be because of the float right. It could be pushing the div under the image. There's no reason to use both float and position on the same element though. It's either one or the other. The position since it comes last in the style should be what's being used by the browser which should be ignoring the float, but it's possible that having both there is throwing things off or that the browser is placing the div based on the float and it's under the image to the right.
Does the image have a greater z-index than div 5? If it does lower the image's z-index temporarily and see if div 5 is sitting under it.
IE can be finicky when it comes to nested divs and z-index. Sometimes the z-index of the containing div takes over. I don't think that's the case with the way you're doing things though.
Could you post more of the html and css? If you have this online somwhere a link to it would be the easiest way to try to debug the code.
|
|
|
|
|
12-22-2005, 11:00 PM
|
|
Posts: 31
|
Thanks, this is driving me crazy! I have changed my code a bit...... There is another screenshot attached.
Code:
HTML:
<!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> | <a href="#">SITEMAP</a></p>
<img class="floatRight" src="img/footer_end2.jpg" /></div>
</div>
</body>
</html>
CSS:
Code:
/* 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;
height:190px;
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:15px;
}
.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
{
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:1px;
}
.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-left:4px;
}
.body_padding
{
padding-left: 20px;
}
.body_top_padding
{
padding-top: 40px;
}
.toppadding
{
padding-top: 10px;
}
.toppadding2
{
padding-top:4px;
}
.right_text_padding
{
padding-top: 31px;
max-width: 20em;
line-height: 12pt;
}
.textlayer
{
position:relative;
z-index:7;
width: 280px;
padding-left: 36px;
}
.floattext
{
position:relative;
z-index:6;
width: 280px;
}
.hometop_text
{
padding-top: 64px;
padding-left: 40px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-weight:bold;
font-size:10px;
max-width: 70em;
line-height: 14px;
}
.hometop_text_h1
{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#CCCCCC;
font-weight:bold;
font-size:14px;
}
|
|
|
|
|
12-23-2005, 12:26 AM
|
|
Posts: 10,815
Name: Steven Bradley
Location: Boulder, Colorado
|
I think the problem might be the float:right on div 5. You shouldn't need to float div 4 to the left and div 5 to the right. You can try simply taking the float off of div 5 and if that doesn't work try using position:absolute; top;#px; left:#px on it and see if that works.
With float:right the div will float to the right of everything below it in the html, but not what's above it in the html structure. This might be why it's falling below where you expected. I think using absolute positioning instead of the float will work. You can also try moving the html for div 5 above the html for div 4 and see if that helps too.
Floats are cool, but I think absolute positioning is easier to work with especially when first starting out with css. Maybe that was just for me, but it seemed easier when I was first getting started. Once you get div 5 positioned where it should be the footer should move up. You're getting very close.
Yeah css can get frustrating sometimes especially when you're first learning how to layout a site with it. I used to be up half the night trying to figure out why something wasn't working like it should. It did feel really good when I finally figured out what was wrong. The more css I've coded though the less I've had those nghts.
The site is looking pretty good in Firefox. Compare it to a few days ago when you were just getting started coding the design. I know it's frustrating, but step back for a minute and look at how much you've already accomplished.
The more you use css the more you'll find better ways to structure your html and also what works and doesn't work in each browser (It's a lot better now than a few years ago when a lot more older browsers were in use if you can believe it). You'll also get a feel for how to design things in a way so they work with css better and are easier to code.
One minor thing I noticed is that you put the Turner image in a div. You could have just put the id on the img tag instead of the div. Changing it won't affect anything, but it's a little less code. You may also want to try using absolute positioning on the Turner image as well if things still aren't working right.
Last edited by vangogh; 12-23-2005 at 12:29 AM..
|
|
|
|
|
|
« Reply to Disappearing Layer
|
|
|
| Thread Tools |
Search this Thread |
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
