Padding в разных браузерах.

aPioz · April 19, 2009

Наверняка данная проблема уже обсуждалась, да и я видел ее решение на просторах интернета, но как то не обратил внимание, о чем сейчас жалею. Проблема в следующем:

Создаю меню через <ul> список:


<div id="Меню">
	<div id="Шапка_меню">Меню</div>
                        <ul>
                            <li><a href="#">Пункт меню</a></li>
                            <li><a href="#">Пункт меню</a></li> 
                            <li><a href="#">Пункт меню</a></li> 
                        </ul>
</div>

Задаю стили для него:


#Шапка_меню {
border: solid #000;
border-width: 1px;
width: 200px;
height: 30px;
}

#Меню ul {
width: 200px;
list-style: none; 
margin: 0px;
padding: 0px;
}
#Меню li a {
width: 200px;
display: block; 
color: #999;
border: solid #f2f2f2;
border-width: 0 1px 1px 1px;
height: 30px;
}

Получается, что весь текст прижат к левому краю меню, когда я прописываю padding, для "#Меню li a", допусти 10px, то в IE ширина меню остается такой же, 200 пикселей, а в опере прибавляются padding'и и меню становится шире и длиннее. Как сделать, чтобы оно одинаково отображалось в обоих браузерах?

Читал где-то, что выход простой. Но не смог найти ссылку.

rash · April 19, 2009

Получается, что весь текст прижат к левому краю меню, когда я прописываю padding, для "#Меню li a", допусти 10px, то в IE ширина меню остается такой же, 200 пикселей, а в опере прибавляются padding'и и меню становится шире и длиннее. Как сделать, чтобы оно одинаково отображалось в обоих браузерах?

Укажите строгий доктайп.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

alexspb · April 25, 2009

Дело не в пэддинг, а в сумме некоторых свойств - они по разному считаются в разных браузерах, посмотрите внимательно таблицу здесь - http://htmlbook.ru/css/width.html

Sign In

Padding в разных браузерах.

Question

aPioz

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

rash

Link to comment

Share on other sites

alexspb

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information