Проблемы с компоновкой CSS (с изображениями и кодом) в IE

Question

Мне было интересно, может ли кто-нибудь помочь мне устранить некоторые проблемы с CSS, с которыми я сталкиваюсь с ужасным IE. Вот нежелательное расположение вынесенные на IE ...

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

и вот правильное расположение (как оказываемый Firefox и Chrome) ...

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

вы можете видеть, что есть три нежелательных различия в IE ...

1. Левые вкладки (#header-tabs) получают все сгруппированные в верхнем правом углу o е страницы,
2. Основной логотип, пункт, и изображение (#header-container) получить отступ слишком далеко вправо
3. Окно Логина и кнопка неровные

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

Я прочитал несколько различных руководств по устранению наиболее распространенных проблем IE, таких как проблема с поплавком/двойным краем и проблема с шириной/заполнением, но это ничего не изменило.

Вот мой CSS код ...

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

* Обновление: Когда я удалил position: fixed и заменил его position: absolute, это постоянные проблемы # 1 и # 2 :)

Answer 1

ли IE6 конкретные или все версии? Примечание ie6 & ранние версии ie7 не понимают положения фиксированного ... more

Answer 2

Может быть, глупо спрашивать, но ваш HTML проверяет? Как насчет вашего CSS? Я часто обнаружил, что при возникновении странного или неожиданного поведения в разных браузерах это происходит потому, что я делаю что-то недействительное в HTML/CSS. Возможно, это не ваша проблема, но, вероятно, стоит быстро проверить.

Answer 3

Попробуйте приведенный ниже код.

1) Чтобы исправить выравнивание окна входа.

HTML:

<div id="header-navbar"> 
<div id="header-login">login content goes here</div> 
</div> 

CSS:

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

#header-login { 
position:absolute; 
height:12px; 
top:3px; 
right:5px; 
text-align:left; 
color:#FFFFFF; 
} 

2) Для того, чтобы разместить кнопки именно на левой стороне страницы

После окончания часть заголовка раскладка. Введите новое имя контейнера id как #main_content {}

введите следующие коды.

HTML:

<div id="main_content"> 
<div id="tab_projects">insert the project tab image</div> 
<div id="tab_blog">insert the blog tab image</div> 
<div id="content">some content goes here</div> 
</div> 

CSS:

#main_content{ 
position:relative; 
text-align:left; 
} 

#content{ 
padding:0 0 0 50px; 
} 

#tab_projects{ 
position:absolute; 
top:10px; /* adjust the top position according to your design */ 
left:0px; 
} 

#tab_blog{ 
position:absolute; 
top:50px; /* adjust the top position according to your design */ 
left:0px; 
} 

Я думаю, что это работает ... Просто попробуйте.