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

black background missing in firefox 3 and opera

P: 41
hi all

i have two column div structure in which i have applied black background colour to the main div which holds the two columns (left and right divs).

In internet explorer 7 the structure shows black colour in right side fine but its missing in Firefox 3 and opera 9. why.

please copy and paste the code in your editor and check. the html file is also attached.

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=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. #main{
  8. width:946px;
  9. margin:0px auto;
  10. background-color:#000000; 
  11. height:100%; 
  12. }
  13. #left{
  14. width:201px;
  15. float:left;
  16. height:100%;
  17. background-color:#FFFF00;
  18. }
  19. #right{
  20. background-color:#FF00FF;
  21. width:725px;
  22. padding:10px;
  23. }
  24. </style>
  25. </head>
  26.  
  27. <body style="background-color:#FF0000">
  28. <!-- main starts -->
  29. <div id="main">
  30.  
  31. <!-- left starts -->
  32. <div id="left">
  33. <p style="padding-left:30px; line-height:22px; margin:0px;">
  34. <a href="one.html">Nokia</a> <br />
  35.  Samsung <br />
  36.  HTC <br />
  37.  LG <br />
  38. Sony Ericsson<br />
  39.  Samsung <br />
  40.  HTC <br />
  41.  LG <br />
  42.  Sony Ericsson<br />
  43.  Samsung <br />
  44.  HTC <br />
  45.  LG <br />
  46.  Samsung <br />
  47.  HTC <br />
  48.  LG <br />
  49.  Sony Ericsson</p>
  50. </div>
  51. <!-- left ends -->
  52.  
  53. <!-- right starts -->
  54. <div id="right" style="float:right">
  55. <p>hello how are you</p>
  56. <p>hello how are you</p>
  57. <p>hello how are you</p>
  58. <p>hello how are you</p>
  59. </div>
  60. <!-- right ends -->
  61.  
  62. </div>
  63. <!-- main ends -->
  64. </body>
  65. </html>
  66.  
  67.  
vineet
Attached Files
File Type: zip bg.zip (755 Bytes, 50 views)
Jul 26 '09 #1
Share this Question
Share on Google+
2 Replies


drhowarddrfine
Expert 5K+
P: 7,435
Never, ever use IE as a reference for how anything should work. It's 11 years behind all other browsers in modern standards and practices and the worst browser on the planet. Note that the more modern browsers, Firefox and Opera (Safari, too), all work the same.

The problem, as it ALWAYS will be, is IE. Parent elements are NEVER to expand to contain floated elements. This is one of the hundreds of bugs and missing properties you are seeing in IE.

To force the modern browsers to act like IEs bug, add 'overflow:auto' to #main.
Jul 26 '09 #2

P: 41
hi drhowarddrfine

thanks for the reply.

overflow:auto worked great. its solved now.

vineet
Jul 27 '09 #3

Post your reply

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