471,831 Members | 1,646 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,831 software developers and data experts.

Div background image overlapping in IE7; works in FF

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:

I have very little code, and I'm not sure what is the relevant part:

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; }
  8. #menu { height:50px; margin-left:200px; margin-top:-80px; }
  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; }
  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; }
  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; }
  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;}
  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; }
  28. .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:
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>
  9. <body>
  10. <div id="container">
  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>
  24.             <div class="spacer_10px"></div>
  25.             <div class="spacer_dotted_line"></div>
  26.             <div class="spacer_40px"></div>
  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>
  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>

Any help is GREATLY appreciated. Thanks!
Dec 18 '08 #1
2 13822
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
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:

Hope it helps.
Mar 18 '09 #3

Post your reply

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

Similar topics

6 posts views Thread by Gernot Frisch | last post: by
14 posts views Thread by Schraalhans Keukenmeester | last post: by
4 posts views Thread by Gary | last post: by
4 posts views Thread by =?Utf-8?B?cm9kY2hhcg==?= | last post: by
3 posts views Thread by tor.brekke.skjotskift | last post: by
1 post views Thread by kmw | last post: by
reply views Thread by NeoPa | last post: by
reply views Thread by YellowAndGreen | last post: by
reply views Thread by aboka | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.