Question

I was wondering if anyone could help me troubleshoot some CSS issues I’m running into with the dreaded IE. Here’s the undesired layout as rendered by IE…

alt text http://beeeph.squarespace.com/storage/images/misc/ielayout.jpg

and here’s the correct layout (as rendered by Firefox and Chrome)…

alt text http://beeeph.squarespace.com/storage/images/misc/correctlayout.jpg

you can see there are three undesired differences in IE…

1. The left tabs (#header-tabs) get all bunched up in the upper right hand corner of the page
2. The main logo, paragraph, and image (#header-container) get indented too far to the right
3. The login box and button are misaligned

alt text http://beeeph.squarespace.com/storage/images/misc/ielayoutdifferences.jpg

I’ve read through a few different tutorials on fixing the most common IE problems, such as the float/double-margin problem and the width/padding box problem, but that didn’t change anything.

Here’s my CSS code…

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label  {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* my styles */

body {
    /*margin-left:auto;
    margin-right:auto;*/
    padding-bottom:20px;
    width:100%;
    color:#666666;
    font-family:"Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;
    font-size:62.5%;
    /*line-height:185%;*/
}

#header-navbar {
    background:#000000 none repeat scroll 0 0;
    height:50px;
    line-height:50px;
    border-top:2px solid #FFFFFF;
    width:100%;
}

#header-toplinks {
    color:#FFFFFF;
    line-height:50px;
    padding-left:44px;  
}

#header-toplinks a{
    border-bottom:1px solid #38373A;
    color:#FFFFFF;
    font-weight:bold;
    text-decoration:none;
}

#header-toplinks a:hover{
    color:#9E9B9B;
}

#header-toplinks ul, li{
    display:inline;
    float:left;
}

#header-login {
    float:right;
    height:12px;
    padding:3px 5px 0px 0px;
    line-height:50px;
    text-align:left;
}

.form-search .text {
    border-bottom:1px solid #CCCCCC;
    border-left:1px solid #CCCCCC;
    border-top:1px solid #CCCCCC;
    height:18px;
    margin-bottom:8px;
    vertical-align:middle;
    width:100px;
    color:#AAAAAA;
}

.form-search .search-button {
    background:#999999;
    border:medium none;
    font-size:1em;
    height:18px;
    margin-bottom:8px;
    margin-left:-2px;
    text-transform:uppercase;
    vertical-align:middle;
    width:52px;
}

#header-tab_projects{
    float:left;
    left:0;
    position:fixed;
    top:105px;
    z-index:50;
}
#header-tab_blog{
    float:left;
    left:0;
    position:fixed;
    top:275px;
    z-index:50;
}

#header-container {
    padding-top:50px;
    padding-left:100px;
    width:100px;
}

#header-container p {
    color:#AAAAAA;
    text-align:left;
    line-height:20px;
    font-size:1.3em;
    margin-top:25px;
    margin-bottom:25px;
    width:500px;    
}

.portrait img {
background:#EFEFEF none repeat scroll 0 0;
border:1px solid #EEEEEE;
margin-bottom:5px;
padding:5px;
text-align:center;
}

#footer {
    padding-top:20px;
    padding-left:100px;
    width:100%;
}

*Update: When I removed position: fixed and replaced it with position: absolute, it fixed problems #1 and #2 🙂

Answer 1

Is it ie6 specific or all ie versions?
Note ie6 & early ie7 versions do not understand position fixed…more