Netscape 7 Margin Problem

**brently2002** · Oct 13, 2004, 14:11

I'm working on a site whereby there will be three horizontal boxes within the main body. The left margin appears correctly in IE 6.0 so that all three boxes are centered, however, in Netscape 7 the left margin does not working the same. What relevant hack must I utilize?

Here's the code:

Code:

  <body class="main" id="homepage"> 

    <!-- Begin wrapper --> 
    <div id="wrapper"> 
  
    <!-- HEADER--> 
    <div id="header"> 

    </div> 
    <!-- END OF HEADER --> 
    
    <!-- Begin content, starting with main text. --> 
    <div id="maintext"> 

      <div id="block1"></div> 
      <div id="block2"></div> 
      <div id="block3"></div> 
      
      <div id="belowblock"> 
        <hr /> 
      </div> 
      
    </div> 

    <!-- BOTTOM FOOTER--> 
    <div id="footer"> 
     Text 
    </div> 
    <!-- END FOOTER -->

and my CSS declarations are defined as follows:

Code:

body { 
  text-align: center; 
  margin: 0; 
  padding: 0 0 6px; 
  border: 0; 
  background: #fff; 
  color: #000; 
  font: 11px/18px verdana, arial, sans-serif; 
} 

hr { height: 1px; border-top: 1px dashed #666; width: 600px; text-align: center; } 

body.main div#wrapper   { 
   color: #000; 
   background: #fff url(../img/wrap_shadow.gif) top left repeat-y; 
   width: 740px; 
   margin: 0 auto; 
   padding: 0; 
   text-align: left; 
   } 

    
body.main div#header   { 
   margin: 0 11px 0 10px; 
   padding: 0 0 10px 0; 
   text-align: left; 
   width: auto; 
   color: #000; 
   height: 100px; 
   background: #a00 url(../img/head_shadow.gif) bottom left no-repeat; 
   } 
    
body.main div#maintext   { 
   clear: left; 
   float: left; 
   width: 700px; 
   padding: 0; 
   margin-bottom: 20px; 
   text-align: left; 
   /* False margin value for all versions of IE Win, including 6.0 */ 
   margin-left: 9px; 
   } 

body.main div#block1 { width: 165px; height: 150px; float: left; margin-left: 25px; margin-top: 10px; margin-bottom: 10px; padding: 5px; border: 1px #ddc solid; background: #fff; } 
body.main div#block2 { width: 165px; height: 150px; float: left; margin-left: 35px; margin-top: 10px; margin-bottom: 10px; padding: 5px; border: 1px #ddc solid; background: #fff; } 
body.main div#block3 { width: 165px; height: 150px; float: left; margin-left: 35px; margin-top: 10px; margin-bottom: 10px; padding: 5px; border: 1px #ddc solid; background: #fff; } 

body.main div#block3:hover { background: #ffe; } 

body.main div#belowblock { clear: both } 

div#block ul { 
   margin: 0 0 0 12px; 
   padding: 10px 0 0 0; 
   display: inline; 
   text-align: left; 
   } 

div#block ul li { 
   font-size: 10px; 
   margin-left: 0; 
   padding: 3px 10px; 
   border: 1px solid #9a0; 
   list-style: none; 
   display: inline; 
   width: 175px; 
   } 
        
div#block ul li.first { 
   margin-left: 50px; 
   margin-right: 150px; 
   border-left: none; 
   list-style: none; 
   display: inline; 
      width: 175px; 
   } 

div#footer   { 
   clear: left; 
   background: #fff url(../img/footer_bg.gif) top left repeat-x; 
   padding: 12px 0 0 0; 
   height: 31px; 
   text-align: center; 

   /* Begin hack to fix broken WinIE box model */ 
   \height: 43px; 
   he\ight: 31px; 
   /* End hack */ 
   } 

body.main div#footer   { 
   margin: 0 11px 0 10px; 
   }

**Paul O'B** · Oct 13, 2004, 14:59

Hi,

Ie has a double margin bug on the side of a float nearest the windows edge (or containers edge) and that side nearest the edge has its margin doubled.

The fix is to add display:inline to the float which cures the problem even though it should have no effect as floats are hard coded as display:block and cannot be changed by css. Therefore the fix is safe to use as it has no menaing in the context of floats and will be ignored by other browsers.

Code:

body.main div#maintext   { 
   clear: left; 
   float: left; 
   width: 700px; 
   padding: 0; 
   margin-bottom: 20px; 
   text-align: left; 
   /* False margin value for all versions of IE Win, including 6.0 */ 
   margin-left: 9px; 
   display:inline;
   } 
body.main div#block1 { display:inline;margin-left: 60px; width: 165px; height: 150px; float: left; margin-top: 10px; margin-bottom: 10px; padding: 5px; border: 1px #ddc solid; background: #fff; }

Paul

The SitePoint Forums have moved.

User Tag List

Thread: Netscape 7 Margin Problem

Thread Tools

Display

Netscape 7 Margin Problem

Bookmarks

Bookmarks

Posting Permissions