Преоблем с падинг-а в FireFox

[PhrozenCrew]

Здравейте пичове. Нещо не мога да схвана къде бъркам. Опитвам се да преработя един сайт на познати, тъй като искат да премахнат таблиците от сайта. Но нещо се получи жега от един padding , който исках да задам.
Страницата може да се види тук:
http://thebestfriends.hit.bg/probi/index.html
Проблема е, че Firefox-a приема padding-a като допълнително разширение. Т.е. ако задам width: 300px и padding: 50px общата широчина, която ми изкарва Firefox е 350px. Не мога да се усетя от къде идва жегата.
Ето и 2 картинки за показно:
Firefox:

IE:

Рядко си позволявам да пълня форума с подобни глупави въпроси, но сега наистина ми е трудно да се сетя къде греша.
Благодаря предварително!

 

[PhrozenCrew]

Въпроса може да се сведе до следния код:

<div style="
 
width: 300px; 
padding-top: 50px; 
height: 100px; 
background-color: #ddd;
 
">
aloha
</div>

До се га не съм предполагал, че разликите между 2-та браузера са толкова големи. За да не ви мъча с копиране ето страничка:
http://thebestfriends.hit.bg/probi/proba.html
Ще съм особено благодарен ако някой предложи фикс на тая тъпня.

 

[Doris]

<div style=" 
  
width: 300px; 

height: 100px; 
background-color: #ddd; 
  
"> 
<p style=" 
font-family: Verdana, Arial, Helvetica;    font-size: 8pt;  

padding-top: 50px; 
">aloha</p> 
</div>

така ми изглеждат еднакви.

 

[PhrozenCrew]

Doris, прав си. Изглеждат ти еднакви просто защото си налучкал правилния подход. Проблема е много сериозен и няма универсален хак за него. Прочетох няколко статии по темата и ми стана ясно, че за да си спестя проблемите е по добре да ползвам бокс в бокс-а - нещо подобно на това, което ти си използвал.

<div style="
width: 300px;
height: 100px;
background-color: #ddd;
padding-top: 50px; ">
aloha </div><br />

<div style="width: 300px; height: 100px; background-color: #ddd;">
    <div style="padding-top: 50px; border: 1px solid black">тук се интерпретира правилно</div>
</div>

Ето статията от която схванах проблема:
http://www.456bereastreet.com/lab/developing_with_web_standards/bg/#css

 

[Doris]

Не съм "налучкал" , а го знам. Падингът по определение е отместване на вътрешен елемент спрямо външен. 8)