Проблем с дължината на div в IE

[misho]

Цяла сутрин се опитвам да направя header-а на сайта си еднакъв под всички браузъри, но с менюто все удрям на камък. :? Лентата с менюто трябва да е широка 1000px и да има padding по 10px от ляво и от дясно. Проблемът е, че ако напиша това, под IE е добре, но при другите изкача с 20px вдясно.

padding: 8px 10px 9px 10px;
width: 1000px;

Ако задам ширината на 980px, навсякъде се оправя, но в IE остават 20px място отдясно. :shock:

padding: 8px 10px 9px 10px;
width: 980px;

Как мога да оправя този проблем без да правя отделен файл за IE?

 

[teroristd]

имаш ли контейнер на сайта

 

[misho]

Да!

HTML

<div class="body">
            <div class="header_line_menu">
                <a href="<?=$url; ?>***" title="***">НАЧАЛО</a>
            </div>
</div>

CSS

* {
    margin: 0px;
    padding: 0px;
}
body {
    margin: 0px auto;
    padding: 0px;
    min-width: 1000px;
    font-family: Tahoma;
    font-size: 13px;
    text-align: center;
    color: #232323;
    background-color: #434343;
}
.body {
    display: block;
    margin: 0 auto;
    padding: 0px;
    width: 1000px;
    height: 100%;
    text-align: left;
    background-color: #ffffff;
}
.header_line_menu {
    display: block;
    margin: 0 auto;
    padding: 8px 10px 9px 10px;
    height: 33px;
    width: 980px;
    background-image: url(img/header_line_menu_bg.jpg);
    background-posititon: top left;
    background-repeat: repeat-x;
}
.header_line_menu a:link,
.header_line_menu a:visited {
    display: inline;
    margin: 0px 1px 0px 0px;
    padding: 8px 10px 9px 10px;
    width: auto;
    height: 13px;
    border: 0px;
    font-size: 13px;
    font-weight: bold;
    color: #ffffff;
    background-color: #43a481;
    opacity: 0.85;
    -moz-opacity: 0.85;
    filter: alpha(opacity=85);
}
header_line_menu a:active,
.header_line_menu a:hover {
    display: inline;
    text-decoration: none;
    opacity: 1.00;
    -moz-opacity: 1.00;
    filter: alpha(opacity=100);
}

 

[teroristd]

не знам може и да не е от това но за какво си задал на контейнера да е блоков елемент височина и т.н при мене е възможно най просто и под всички браузъри е ок


body {
margin: 0;
padding: 0;
background: #202020 url(../images/bg1.png) no-repeat;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
color: #464032;
}

#wrapper {
width: 960px;
margin: 0 auto;
padding: 0;
}

/* Header */

#header {
width: 940px;
height: 60px;
margin: 0 auto;
}

 

[shterev]

Така както си го направил, точно така се прави и по пронцип не би трябвало да се бъги в ИЕ.Обаще като гледам на а-то си задал някакви стойности от там ще се чупи. А много по добре ще е да направиш менюто така:

<ul>
   <li><a href="#">home</a></li>
</ul>

Отколкото е сега с тоя див

 

[misho]

Махнах display: block;, но проблемът си остава. :lol:

shterev, след малко ще го направя, както каза и ще пиша. :wink:

 

[misho]

Пак не успях.

 

[adrian]

Освен, че менюто трябва да го направиш

<ul id="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<br class="cb" />
</ul>

трябва и да зададеш маргин на 0 и падинг също на 0.

ul, li { margin: 0; padding: 0; }

.cb { clear: both; }

#menu li { float: left; } //за да застанат линковете един до друг

 

[geo6o]

Слагаш

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

най-отгоре в html документа и си готов Smile

 

[misho]

adrian, направих го както каза и с малко помощ от този пример.

Но какво е целта на <br class="cb" />? А и валидатора не ми позволява да слагам <br /> между ul таговете.

 

[shterev]

<ul id="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="cb" ></li>
</ul>

тоя клас изчиства флоатинга