473,226 Members | 1,632 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,226 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:
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
2 14032
clain
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
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

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

Similar topics

6
by: Gernot Frisch | last post by:
http://www.glbasic.com/bugs.htm I fixed the doctype and simplified it. The validator shows no error. But Firefox is still overlapping the DIV's. (View with IE7 to get the picture of what I want)...
14
by: Schraalhans Keukenmeester | last post by:
I am building a default sheet for my linux-related pages. Since many linux users still rely on/prefer viewing textmode and unstyled content I try to stick to the correct html tags to pertain good...
4
by: Chris | last post by:
Hello, I have two div's, div1 is a lot bigger and is the parent of div2, and div1 also has a background image. What I would like to do, is set a background color for the smaller nested div2,...
4
by: Gary | last post by:
Hello, I want a background image to display in the extreme bottom right corner. What I have works fine in IE7 and FF2 not so in Opera 9.1 Any suggestions? Page Posted at the the link. ...
3
by: vunet.us | last post by:
why am i unable to insert image background into a tr or td element in IE using preloaded image object, like this: var img = new Image(); img.src = 'blah.gif';...
4
by: =?Utf-8?B?cm9kY2hhcg==?= | last post by:
hey all, i was able to make the background of my image transparent on my web page. However, it looks fine in ie7 but a background shows up in ie6? any ideas? thanks, rodchar
3
by: tor.brekke.skjotskift | last post by:
I want to set a background-image with an id and use class to create the rollover effect by altering background-position. It wont work in either IE or FF. Any suggestions? HTML <a href="#"...
1
by: kmw | last post by:
Hi, Page is www.wapitiarchersofpa.com Issue is with the image at the top of the page which is set in css as a background image in the header class. Source shows <div class="header"></div> I...
1
by: casybay | last post by:
Hi all, I have a css for my html files, everything works fine except the background image. It doesn't show. My browser is IE7. Here is how my files construct: test.html: ...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

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.