3
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:
example.com/HTML
example.com/CSS
I have very little code, and I'm not sure what is the relevant part:
CSS:
Expand|Select|Wrap|Line Numbers
- .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; }
Expand|Select|Wrap|Line Numbers
- <!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"> </div>
- <div class="footer_bar footer_text">Copyright 2008</div>
- </div>
- </body>
- </html>
Any help is GREATLY appreciated. Thanks!
