Смещение div в ie

[Sup]

style.css

body{
margin-top:0px;
}
.menu{
width:1024;
margin-top:1px;
background-color:#CCC;
height:30;
line-height:30px;
}

.menu a{
padding:0 57;
font-family: Arial;
font-size:14;
background-color:3f99ff;
background-image:url("1.jpg");
color:#fff;
display:block;
float:left;
text-align:center;
border-right:solid 1px #b7b7b7;

}

.menu a:hover{
background-color:#008000;
color:#FFF;
background-image:url("2.jpg");
}

index.html

<center>
<div class="menu">
<a href="">Кнопка номер один</a>
<a href="">Кнопка номер два</a>
<a href="">Кнопка номер три</a>
<a href="">Кнопка 4</a>
<a href="">5000</a>
</div>
</center>

Недавно начал изучать вёрстку сайтов, прошу вас помочь с этой проблемой:
При открытии страницы в FF/Opera всё отображается хорошо.
При открытии страницы в IE - последняя кнопка смещается вниз.
Как это исправить?
Спасибо.

 

[kosbo]

Для IE придуманы специальные хаки. К примеру если у тебя не работает в IE6, тогда перед правилом ставишь - .
К примеру

#wrap{
-width:98%; /*Для IE6*/
*width:97%; /*Для IE7*/
}

Вот и пиши конкретно под них правила, только это вроде не проходит валидацию.

 

[medwoodu]

style.css

body{
margin-top:0px;
}
.menu{
width:1024;
margin-top:1px;
background-color:#CCC;
height:30;
line-height:30px;
}

.menu a{
padding:0 57;
font-family: Arial;
font-size:14;
background-color:3f99ff;
background-image:url("1.jpg");
color:#fff;
display:block;
float:left;
text-align:center;
border-right:solid 1px #b7b7b7;

}

.menu a:hover{
background-color:#008000;
color:#FFF;
background-image:url("2.jpg");
}

index.html

<center>
<div class="menu">
<a href="">Кнопка номер один</a>
<a href="">Кнопка номер два</a>
<a href="">Кнопка номер три</a>
<a href="">Кнопка 4</a>
<a href="">5000</a>
</div>
</center>

Недавно начал изучать вёрстку сайтов, прошу вас помочь с этой проблемой:
При открытии страницы в FF/Opera всё отображается хорошо.
При открытии страницы в IE - последняя кнопка смещается вниз.
Как это исправить?
Спасибо.

у вас код правильно не работает ни в одном из браузеров. width:1024; - должно быть width:1024px; <center>- <div style="text-align: center">.... htmlbook.ru вам в помощь

 

[igorekart]

Почему все так любят эту верстку в дивах? Ведь и табличная тоже хороша!

 

[tigra60]

Почему все так любят эту верстку в дивах? Ведь и табличная тоже хороша!

Из разговора двух друзей:
- Э, дружище, да у тебя руки из жопы растут
- Ну, мне так удобнее - я все через жопу делаю...

Недавно начал изучать вёрстку сайтов

Интересно, по какому источнику вы изучаете верстку?

1. Почему кнопка смещается вниз?
Плавающие блоки будут размещены рядом друг с другом только в том случае, если им хватает на это места. То есть, если у вас должно в ряд стоять три блока по 200рх, а вы отвели им 500рх, то, естественно, третий блок съедет вниз. Причем, если даже отведено необходимых 600рх (200 х 3), а размер окна браузера меньше по ширине, третий блок тоже съедет вниз. Для устранения этой проблемы существует стиль min-width. Кроме того, не забывайте, что поля, отступы и рамки не входят в ширину блока width.
То есть, если вы указали:

width:200px;
border:solid 2px;
padding:20px;
margin:10px;

То реальная ширина блока будет width + 2 х border + 2 х padding + 2 х margin = 200 + 2 * 2 + 2 * 20 + 2 * 10 = 264рх

2. Никогда не применяйте элемент <center>. Он запрещен стандартами, хотя браузеры его и понимают.
Если вам нужно выровнять по центру линейное содержимое блока, используйте стиль text-align:center.
Другое дело с блоками. Блок имеет по умолчанию ширину 100%. А если у вас указана конкретная ширина блока, то его можно выровнять по центру с помощью авто полей:

width:1024px;
margin:auto;

3. Как правило, меню пишется в виде маркированного списка:

<div class="menu"> 
  <ul>
    <li><a href="">Кнопка номер один</a></li>
    <li><a href="">Кнопка номер два</a></li>
    <li><a href="">Кнопка номер три</a></li>
    <li><a href="">Кнопка 4</a></li>
    <li><a href="">5000</a></li>
  </ul>
</div>

4. В стилях обязательно всегда указывайте единицы измерения (вам, кстати, об этом уже написали).

 

[ALEXu]

Почему все так любят эту верстку в дивах? Ведь и табличная тоже хороша!

Только в стандартах предназначение переписать нужно).