By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,812 Members | 856 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,812 IT Pros & Developers. It's quick & easy.

Div background image overlapping in IE7; works in FF

P: 3
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:
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
  1. .logo_banner { background-image:url(../images/new/logo_web1.png); background-repeat:no-repeat; background-position:left top; height:188px; }
  2. .spacer { height:10px; }
  3. .spacer_10px { height:10px; }
  4. .spacer_40px { height:40px; }
  5. .spacer_50px { height:50px; }
  6. .spacer_separator { height:1px; background-image:url(../images/bg_separator.png); background-repeat:repeat-x; background-position:center top; }
  7.  
  8. #menu { height:50px; margin-left:200px; margin-top:-80px; }
  9.  
  10. #home_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; }
  11. #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; }
  12. #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; }
  13. #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; }
  14. #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; }
  15.  
  16. .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; }
  17.  
  18. .div_body_top { background-image:url(../images/backgrounds/bg_dark_body_top1.png); width:900px; height:20px; background-repeat:no-repeat; }
  19. .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; }
  20. .div_body_bottom { background-image:url(../images/backgrounds/bg_dark_body_bottom1.png); width:900px; height:20px; background-repeat:no-repeat; }
  21.  
  22. .footer_bar { background-color:#2B2D20; height:60px; text-align:center; }
  23. .footer_text { font-family:Geneva, Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF; line-height:60px;}
  24.  
  25. .text_style_body { text-align:left; font-family:Geneva, Arial, Helvetica, sans-serif; color:#CECECE; font-size:10px; }
  26. .content_body { height:auto; width:900px; margin-left:auto; margin-right:auto; }
  27.  
  28. .text_area { padding-top:10px; padding-left:20px; padding-right:20px; padding-bottom:20px; width:860px; margin-left:auto; margin-right:auto; }
  29.  
And here is the HTML:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Test Page 1</title>
  6. <link href="styles/style.css" rel="stylesheet" type="text/css" />
  7. </head>
  8.  
  9. <body>
  10. <div id="container">
  11.  
  12.     <div class="content_body">
  13.         <div class="div_body_top"></div>
  14.         <div class="div_body_middle">
  15.             <div class="logo_banner"></div>
  16.             <div id="menu">
  17.                 <div id="home_btn"></div>
  18.                 <div id="home1_btn"></div>
  19.                 <div id="home2_btn"></div>
  20.                 <div id="home3_btn"></div>
  21.                 <div id="home4_btn"></div>
  22.             </div>
  23.  
  24.             <div class="spacer_10px"></div>
  25.             <div class="spacer_dotted_line"></div>
  26.             <div class="spacer_40px"></div>
  27.  
  28.             <div class="text_style_body">
  29.                 Here is some content. Love that content. One day this text will actually say something.
  30.                 ...
  31.                 <br/>
  32.                 <br/>
  33.                 Here is some content. Love that content. One day this text will actually say something.
  34.                 Here is some content. Love that content. One day this text will actually say something.
  35.                 Here is some content. Love that content. One day this text will actually say something.
  36.                 ...
  37.             </div>
  38.  
  39.             <div class="spacer_50px"></div>
  40.             <div class="spacer_40px"></div>
  41.         </div>
  42.         <div class="div_body_bottom"></div>
  43.     </div>
  44.     <div class="spacer">&nbsp;</div>
  45.     <div class="footer_bar footer_text">Copyright 2008</div>
  46. </div>
  47. </body>
  48. </html>
  49.  

Any help is GREATLY appreciated. Thanks!
Dec 18 '08 #1
Share this Question
Share on Google+
2 Replies


clain
P: 79
stop using PNG files with IE... i do not support PNG True transparency ...

there is nothing to do with this other than that.... its that transparent part of PNG file that is not rendered in IE ..displayed as double background..
Dec 19 '08 #2

P: 1
Hi PhatP,

I found a solution for you. I had exactly the same problem with background repeat-overlapping in IE7 and in IE6 they'd show white where they overlap. After scouring the internet for hours on end (finding your post duplicated in multiple places) I also found a solution that works. (I tried many.)

You can find it here:
http://www.dillerdesign.com/experiment/DD_belatedPNG/

Hope it helps.
Mar 18 '09 #3

Post your reply

Sign in to post your reply or Sign up for a free account.