SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: IE hates me!

  1. #1
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Nova Scotia, Canada
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE hates me!

    The link: http://www.jamiegerrard.com/carpentersUnion/

    As you can see there is a block of whitespace when viewing in IE. Now when it's viewed in Firefox it renders fine.

    I thought it may have to do with IE rendering of a margin but I think I've tried everything, any ideas?

    CSS

    Code:
    html, body {margin:6px 0 0 0; padding:0;}
    img {border:0; margin:0; padding:0;}
    
    #container {width:701px; margin:0 auto; padding:0px; background:url(../images/common/bgContainer.gif) repeat-y;}
    
    #containerTop {width:701px; height:6px; background:url(../images/common/bgTop.gif) no-repeat top; clear:both;}
    #containerBottom {width:701px; height:6px; background:url(../images/common/bgBottom.gif) no-repeat bottom;}
    
    #content {width:556px;}
    #header {width:556px; height:84px; float:left;}
    #nav {width:141px; float:right;}
    HTML > DIV's

    Code:
    <div id="container">
    	<div id="containerTop"></div>
    	<div id="nav"><img src="_assets/images/common/testInfoLink.gif" /></div>
    	<div id="header"><img src="_assets/images/common/testLogo.gif" /></div>
    	<div id="content"></div>
    	<div id="containerBottom"></div>
    </div>
    ----
    Cheers, Jamie

  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 won't render an element less thatn the current font size/line-height so you simply have to set overflow:hidden.
    Code:
    html, body {margin:0; padding:0;}
    body {margin:6px 0 0 0;}
    #containerTop {width:701px; height:6px; background:url(_assets/images/common/bgTop.gif) no-repeat top;overflow:hidden;}
    You may also want to change your body margins as I have code above otherwise some browsers will give you double what you want as you get 6px on html and 6px on body = 12px.

    Hope that helps.

    Paul

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Nova Scotia, Canada
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul.

    I thought I tried this.. <sigh>.

    -jamie
    ----
    Cheers, Jamie


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
  •