SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Huntington Woods
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Netscape 7 Margin Problem

    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; 
       }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •