Fire Fox-Internet Explorer различно

[prima08]

По колкото и различни начини да правя цсс файла с класове със айди и кво ли не все става по един и същ начин.При интернет експлорер всичко е наред.Но при Fire Fox една от column ми излиза извън страницата.Ето

А при Internet Explorer всичко си е наред

Ето ми цсс кода ама не е от него щото съм го писал поне в 10 варианта и все е същото
body {
background-color:#AAAAAA;
}
.page {
background-color: #6699cc;
height: auto;
width: 900px;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
border: 5px solid #99ccff;
}
.header {
height: 120px;
width: 850px;
margin-top: 0px;
margin-right: 25px;
margin-left: 25px;
border-bottom-width: 3px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #FFFFFF;
}
.left {
float: left;
height: auto;
width: 170px;
margin-left: 25px;
margin-top: 10px;
border-right-width: 3px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: none;
border-right-color: #FFFFFF;
}

 

[misirkov]

Под слоя .left сложи един clear слой и всичко ще се оправи.
Демо:
http://web-tourist.net/project/misirkov/ff_problem.html

 

[adrian]

<style>
body {
background-color:#AAAAAA;
}
.page {
background-color: #6699cc;
height: auto;
width: 900px;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
border: 5px solid #99ccff;
}
.header {
height: 120px;
width: 850px;
margin-top: 0px;
margin-right: 25px;
margin-left: 25px;
border-bottom-width: 3px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #FFFFFF;
}

.left {
float: left;
height: auto;
width: 170px;
margin-left: 25px;
margin-top: 10px;
border-right-width: 3px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: none;
border-right-color: #FFFFFF;
}
</style>
<div class="page">
<div class="header">
header
</div>
<div class="left">
left
</div>
<br style="clear: both;"/>
</div>

Трябва ти или слой или нещо друго, което да е забранило подравняването около него с clear: both; (в моя случай - празен ред)

Това обикновено не се получава, защото имаш хедър, лява колона, централна колона, дясна колона и един footer, на който задаваш да не се подравнява от никъде с clear: both;

П.С. Няма нужда да декларираш рамките, ако не искаш да ги ползаваш. Т.е редовете в синьо са напълно излишни

Също така където имаше:

margin-top: 0px;
margin-left: 25px;
margin-right: 25px;

Можеш да го направиш така:
margin: 0 25px;

Когато на margin (както и на всяко друго свойство, което има -left, -right, -top и - bottom) можеш да задаваш стойностите като го пишеш само:
margin: от 1 до 4 стойности;

Ако имаш една стойност:
margin: 4px;
задаваш външния отстъп от елемента да е 4px от всички страни

Ако имаш две стойности:
margin: 4 5px;
задаваш стойност на външния отстъп от елемента от горе и от долу да е 4 px, а от ляво и дясно да е 5px

Ако имаш три стойности:
margin: 4 5 6px;
задаваш стойност на външния отстъп от елемента от горе да е 4px, от ляво и дясно да е 5px и от долу да е 6px

Ако имаш четири стойности:
margin 4 5 6 7px;
задаваш стойност на външния отстъп от елемента от горе да е 4px, от дясно - 5px, от долу - 6px и от ляво -7px

Също така свойствата на рамката можеш да ги задаваш на куп и така декларациите ти:

border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;


Могат да бъдат представени така:

border: 3px solid #FFFFFF;

Успех с начинанието :?:


П.П.С Демо няма да давам, защото туко-що видях, че са ме изпреварили с отговора на въпроса ти

 

[prima08]

Е да аз ще добавя една колона най-отдолу както ти каза и значи на него да сложа това clear.Явно в уроците не съм обърнал внимание на това
:?: