SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    UK
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Where did my bottom margin go in IE?

    Example Page: Here

    Problem: The (temporarily coloured) blue area is used to define a 10px margin all around the content. Seems to be working fine in Firefox (1.0.4), but in IE (6), the bottom margin is gone.

    Code:
    #marginwrap{
      	margin: 10px;
      	background: blue;
      }
    At first, I thought I had messed my floats up, but they seem to be ok.

    More Relevant CSS I've deliberately left bright colours for each div for easier bug spotting.

    Code:
    body{
          font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
          font-size:76%;
          color: #333333;
          background: #FFF;
      }
      
      body, #bodywrap, #right-col, #marginwrap, #header,
      #logo, #maincontent{
          padding: 0; margin: 0;
      }
      
      #bodywrap{
          position: absolute;
          top: 110px;
          background: #FFFCF5;
      }
      
      #marginwrap{
      	margin: 10px;
      	background: blue;
      }
      
      #header{
          position: absolute;
          top: 0; left: 0;
          height: 79px; width: 100%;
          background: #FFF4D7;
      }
      
      #logo{
          position: absolute;
          width: 207px; height: 45px;
          top: 9px; left: 8px;
          background: transparent url("images/logo.gif") no-repeat top left;
      }
      
      #maincontent {
          float:left;
          width: 78%;
          background: yellow;
      }
      
      #right-col {
          float: right;
          width: 22%;
          background: green;
      }
      
      #footer{
          width: 100%; height: 30px;
          margin: 0; padding: 0;
          background: #7385C0;
      }
    Thank you for any assistance provided.

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,290
    Mentioned
    198 Post(s)
    Tagged
    3 Thread(s)

    margin in IE

    You are not seeing a margin, but the marginwrap div's background-color. Does IE understand
    Code:
    <br style="clear: both;" />

  3. #3
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    UK
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe you are right about the <br style.... causing the issue, and to the best of my knowledge, yes, IE understands it, as I've used it countless times before.

    Can't think of another way of clearing both the floats...

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,290
    Mentioned
    198 Post(s)
    Tagged
    3 Thread(s)

    clearing both floats

    Why not replace it with an empty div?

  5. #5
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    UK
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mittineague
    Why not replace it with an empty div?
    Tried that too and would you believe, still the same problem. I've even tried looking at http://www.positioniseverything.net/easyclearing.html as a solution, but the moment I remove or exchange that float, the whole layout breaks.

    Seems to me I have a badly or incorrectly placed float somewhere along the line but can I hell pinpoint it...


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
  •