...

View Full Version : Div Background overlaps in IE, not FF



thephatp
12-18-2008, 07:13 PM
Hi Everyone,

I'm having a problem with IE rendering correctly. I'm experimenting with using all div's in my pages now, and I'm not very familiar with the quirks of IE.

I have created a sample page, and I'm really confused as to what is going on in IE. FF renders the page exactly as I expect. IE renders the page with everything in the correct location, but it seems to double the background image for a sub-div section that is moved up using a negative margin (#menu { ... margin-top: -200px; ... }). Also, this "duplicate background" seems to "flicker" on and off in certain areas, but part of it is always there. (I think there may be more than one duplicate?)

To view what's happening, check it out in FF, and then in IE:
HTML Page (http://www.chadmorris.net/Samples/test/)
CSS Page (http://www.chadmorris.net/Samples/test/styles/style.css)

The server above was down earlier, so I posted them on another site, as well. If the links above don't work, try these:

HTML Page (http://www.eplaypen.net/)
CSS Page (http://www.eplaypen.net/styles/style.css)


CSS:


.logo_banner { background-image:url(../images/new/logo_web1.png); background-repeat:no-repeat; background-position:left top; height:188px; }
.spacer { height:10px; }
.spacer_10px { height:10px; }
.spacer_40px { height:40px; }
.spacer_50px { height:50px; }
.spacer_separator { height:1px; background-image:url(../images/bg_separator.png); background-repeat:repeat-x; background-position:center top; }

#menu { height:50px; margin-left:200px; margin-top:-80px; }

#home_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; }
#home1_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:120px; margin-top:-50px; }
#home2_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:240px; margin-top:-50px; }
#home3_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:360px; margin-top:-50px; }
#home4_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:480px; margin-top:-50px; }

.spacer_dotted_line { background-image:url(../images/new/dotted_line.png); background-repeat:repeat-x; width:860px; height:2px; margin-left:auto; margin-right:auto; }

.div_body_top { background-image:url(../images/backgrounds/bg_dark_body_top1.png); width:900px; height:20px; background-repeat:no-repeat; }
.div_body_middle { background-image:url(../images/backgrounds/bg_dark_body_middle1.png); height:auto; background-repeat:repeat-y; padding-left:20px; padding-right:20px; }
.div_body_bottom { background-image:url(../images/backgrounds/bg_dark_body_bottom1.png); width:900px; height:20px; background-repeat:no-repeat; }

.footer_bar { background-color:#2B2D20; height:60px; text-align:center; }
.footer_text { font-family:Geneva, Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF; line-height:60px;}

.text_style_body { text-align:left; font-family:Geneva, Arial, Helvetica, sans-serif; color:#CECECE; font-size:10px; }
.content_body { height:auto; width:900px; margin-left:auto; margin-right:auto; }

.text_area { padding-top:10px; padding-left:20px; padding-right:20px; padding-bottom:20px; width:860px; margin-left:auto; margin-right:auto; }


And here is the 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=utf-8" />
<title>Test Page 1</title>
<link href="styles/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">

<div class="content_body">
<div class="div_body_top"></div>
<div class="div_body_middle">
<div class="logo_banner"></div>
<div id="menu">
<div id="home_btn"></div>
<div id="home1_btn"></div>
<div id="home2_btn"></div>
<div id="home3_btn"></div>
<div id="home4_btn"></div>
</div>

<div class="spacer_10px"></div>
<div class="spacer_dotted_line"></div>
<div class="spacer_40px"></div>

<div class="text_style_body">
Here is some content. Love that content. One day this text will actually say something.
...
<br/>
<br/>
Here is some content. Love that content. One day this text will actually say something.
Here is some content. Love that content. One day this text will actually say something.
Here is some content. Love that content. One day this text will actually say something.
...
</div>

<div class="spacer_50px"></div>
<div class="spacer_40px"></div>
</div>
<div class="div_body_bottom"></div>
</div>
<div class="spacer">&nbsp;</div>
<div class="footer_bar footer_text">Copyright 2008</div>
</div>
</body>
</html>



Any help is GREATLY appreciated. Thanks!

Excavator
12-18-2008, 07:50 PM
Hello thephatp,
I think you would have better luck positioning elements using floats and margins, instead of the negative margins your using now.
There is also no need for spacer divs, you can put a space in by adjusting the top or bottom margin.

I didn't look at it in IE6 so I can't really be sure about your bg image but I suspect the negative margin is causing that...

Excavator
12-18-2008, 10:38 PM
Have a look at this and see if IE likes it better -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body, html {
font: 10px Geneva, Arial, Helvetica, sans-serif;
color: #cecece;
background: #141414 url(http://www.chadmorris.net/Samples/test/images/backgrounds/bg_page_green.png);
}
.content_body {
width:900px;
margin: 0 auto 10px auto;
}
.div_body_top {
background:url(http://www.chadmorris.net/Samples/test/images/backgrounds/bg_dark_body_top1.png) no-repeat;
width:900px;
height:20px;
}
.div_body_middle {
background:url(http://www.chadmorris.net/Samples/test/images/backgrounds/bg_dark_body_middle1.png) repeat-y;
overflow: auto;
}
.logo_banner {
background:url(http://www.chadmorris.net/Samples/test/images/new/logo_web1.png) no-repeat 20px top;
height:158px;
width: 900px;
padding-top: 1px; /*hack to eliminate uncolapsing margin*/
}
#menu {
height:50px;
margin: 110px 0 0 230px;
overflow: auto;
}
#home_btn { background:url(http://www.chadmorris.net/Samples/test/images/new/home_btn_web.png); height:50px; width: 120px; float: left; }
#home1_btn { background:url(http://www.chadmorris.net/Samples/test/images/new/home_btn_web.png); height:50px; width: 120px; float: left; }
#home2_btn { background:url(http://www.chadmorris.net/Samples/test/images/new/home_btn_web.png); height:50px; width: 120px; float: left; }
#home3_btn { background:url(http://www.chadmorris.net/Samples/test/images/new/home_btn_web.png); height:50px; width: 120px; float: left; }
#home4_btn { background:url(http://www.chadmorris.net/Samples/test/images/new/home_btn_web.png); height:50px; width: 120px; float: left; }
.spacer_dotted_line {
width:860px;
height:2px;
margin: 10px auto 40px auto;
background: url(http://www.chadmorris.net/Samples/test/images/new/dotted_line.png) repeat-x;
}
.text_style_body {
text-align:left;
padding: 10px 20px;
}
.spacer_40px { height:40px; }
.spacer_50px { height:50px; }
.div_body_bottom {
background:url(http://www.chadmorris.net/Samples/test/images/backgrounds/bg_dark_body_bottom1.png) no-repeat;
width:900px;
height:20px;
}
.footer_bar {
background: #2B2D20;
height: 60px;
line-height: 60px;
text-align: center;
}
.footer_text {
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<div class="content_body">
<div class="div_body_top"></div>
<div class="div_body_middle">
<div class="logo_banner">
<div id="menu">
<div id="home_btn"></div>
<div id="home1_btn"></div>
<div id="home2_btn"></div>
<div id="home3_btn"></div>
<div id="home4_btn"></div>
</div>
<!--end logo_banner--></div>
<div class="spacer_dotted_line"></div>
<div class="text_style_body">
Here is some content. Love that content. One day this text will actually say something.
...
<br/>
<br/>
Here is some content. Love that content. One day this text will actually say something.
Here is some content. Love that content. One day this text will actually say something.
Here is some content. Love that content. One day this text will actually say something.
...
</div>
<div class="spacer_50px"></div>
<div class="spacer_40px"></div>
<!--end div_body_middle--></div>
<div class="div_body_bottom"></div>
<!--end content_body--></div>
<!--end container--></div>
<div class="footer_bar footer_text">Copyright 2008</div>
</body>
</html>

thephatp
12-19-2008, 04:10 AM
Excavator,

Thank you SO MUCH! That works like a charm!

I've never really used overflow before. What does that provide in the menu?

Again, thank you so very much for the help! Getting used to using all divs takes a little work and a lot of learning experiences!

Excavator
12-19-2008, 05:08 AM
overflow:auto; is one method of clearing floats. Read about it here. (http://www.quirksmode.org/css/clearing.html)


Getting used to using all divs takes a little work and a lot of learning experiences!
I was lucky and started out with CSS. I never learned tables so I didn't have to unlearn bad habits.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum