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

Question

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

альтернативный текст http://beeeph.squarespace.com/storage/images/misc/ielayout.jpg

и вот правильная компоновка (в соответствии с Firefox и Chrome) ...

альтернативный текст http://beeeph.squarespace.com/storage/images/misc/correctlayout.jpg

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

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

альтернативный текст 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 конкретно или все версии ie? Обратите внимание, что ie6 и более ранние версии ie7 не понимают фиксированного положения ... more

Answer 2

Попробуйте следующий код.

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) Чтобы разместить кнопки точно в левой части страницы

После окончания заголовка часть макета. Введите новое имя контейнера с идентификатором #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;
}

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

Answer 3

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