Firefox padding проблем
| Автор |
|
| phrozencrewСъб, 07.07.07, 21:57 |
Здравейте, Някой може ли да ми каже, защо този код изглежда толкова различно под IE и Firefox.
Никога не съм си представял, че може толкова семпъл код да води до такива проблеми. Ето го и кода: <div style="
width: 300px;
padding-top: 50px;
height: 100px;
background-color: #ddd;
">
aloha
</div> |
За да не ви тормозя особено ето и страничка. Много ще съм благодарен ако някой ми каже къде е грешката. | | | anonymousСъб, 07.07.07, 22:39 |
phrozencrew, радвам се че се включваш. Като че ли ТУК напипах нещо (към края на статията). Има някакво обяснение за падинга. Надявам се не те обиждам с този линк, знам че ги разбираш работите. А иначе аз какво намерих: Цитат ” padding - topВсички свойства за падинг са проблематични или пък напълно неподдържани за вградените елементи. В случая на padding - top, поддръжката в IE4 и IE5 е доста добра за блоковите елементи. Navigator се справя относително добре, стига падингът да не се прилага за плаващи или вградени елементи, като в този случай има ужасно големи бъгове. Цитат от: Cascading Style Sheets, Пълното ръководство, Ерик А. Мейер, 2002 г. „ | | | anonymousСъб, 07.07.07, 22:42 |
Ами виж... кажи ако има проблем, ако някъде в страница стане някакъв проблем с това, кажи, иначе може да се направи по триста начина че да изглежда по един и същи начин с двата браузъра: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>
</title>
</head>
<body>
<div style="width: 300px; height: 100px; background-color: #ddd; border: 1px solid black;">
<div style="margin: 50px 0px 0px 0px">aloh</div>
</div>
</body>
</html> |
| | | phrozencrewСъб, 07.07.07, 23:48 |
Благодаря за коментарите. Разбрах, че това ще остане дълго време проблем. joanaomgod замаскира проблема като просто слага само padding-а във вътрешен слой. Което все пак си е решение, макар и не най-елегантното. <div style="
width: 300px;
height: 100px;
background-color: #ddd;
/* joanaomgod пренася само padding-a в нов слой*/
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> |
ricetek, попадението ти е много точно. Ето това изречение ме накара да спра да си блъскам главата:
Цитат ” ...Другият вариант е просто да избягваме едновременната употреба на ширина и padding... „
Отново благодаря! | | | genyВто, 14.08.07, 08:09 | | | | anonymousВто, 14.08.07, 10:45 |
geny е права. Ето решение на проблема: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html> <body> <div style=" width: 300px;
padding-top: 50px;
height: 100px;
background-color: #ddd;
display: block;
">
aloha
</div>
</body>
</html> | | | insecteaterВто, 14.08.07, 11:09 |
strict-а е хубаво нещо, но понякога е прекалено "стриктен"  и може да ти изяде главата. Особено ако страничката ти е на български език и/или имаш много включени форми и/или хипервръзки използващии GET. Аз рядко използвам strict, понеже енергията която ми отнема да следя за коректността на всичко е повече отколкото ако просто избягвам едновременната употреба на padding и margin. Макар че напоследък гледам да свиквам на strict. | | | anonymousВто, 14.08.07, 13:52 |
Така си е. И аз срещам проблеми, когато програмирам с темплейти. Не винаги ми приема всичко, което пиша. | |  Коментар
|
Отговор
За печат