ugrás a tartalomhoz

Opera és Firefox 10-20px-szel az Explorernél lejjebb tol elemeket

cyrus · 2006. Aug. 14. (H), 10.21
Sziasztok szakértők!

Segítsetek!

Nemrég kezdtem el tanulmányozni a DIV+CSS felépítésű oldalak készítését.

Tanulmányaim során legyártottam egy egyszerű kis oldalt amin tesztelhetem az eddig tanultakat. A problémám ill. kérdésem: Explorerben jól (legalábbis úgy ahogy szándékoztam megjeleníteni) jelent meg az oldal, Operában, Firefoxban furán. Mintha függőlegesen 10-20px-el lejjebb tolna egyes elemeket. Mi lehet ennek az oka? Milyen speciális formázást kéne bevetni, ha ugyanúgy akarnám megjeleníteni Operában, mint Explorerben.
Kódok alább:


HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
  5. <title>ie_opera_firefox_teszt</title>  
  6. <link href="ie_opera_firefox_teszt.css" rel="stylesheet" type="text/css" />  
  7. </head>  
  8. <body>  
  9. <div id="content">  
  10.     <div id="top">  
  11.         <p>fejléc</p>  
  12.     </div>  
  13.     <div id="middle">  
  14.         <div id="left">  
  15.             <p>közép - bal</p>  
  16.         </div>  
  17.         <div id="center">  
  18.             <p>közép - közép</p>   
  19.         </div>  
  20.         <div id="right">  
  21.             <p>közép - jobb</p>  
  22.         </div>  
  23.     </div>  
  24.     <div id="bottom">  
  25.         <p>lábléc</p>  
  26.     </div>  
  27. </div>  
  28. </body>  
  29. </html>  
CSS:
  1. body {  
  2.     margin: 0;  
  3.     padding: 0;  
  4.     background-color:#CCCCCC;  
  5. }  
  6. p{  
  7.     text-align:center;  
  8.     font-family:Verdana, Arial, Helvetica, sans-serif;  
  9.     font-size:16px;  
  10.     color:#FFFFFF;  
  11. }  
  12. #left p{  
  13.     text-align:left;  
  14. }  
  15. #right p{  
  16.     text-align:right;  
  17. }  
  18. #content{  
  19.     width: 800px;  
  20.     margin-left:auto;  
  21.     margin-right:auto;  
  22.     background-color: #00CC99;  
  23. }  
  24. #top, #left, #center, #right, #bottom{  
  25.     padding: 0px 0px 0px 0px;  
  26. }     
  27. #top{     
  28.     height: 50px;  
  29.     background-color:#990000;  
  30. }  
  31. #middle{  
  32.     height: 150px;  
  33.     background-color: #009999;    
  34. }  
  35. #bottom{  
  36.     height: 50px;  
  37.     background-color:#990000;  
  38. }  
  39. #left{  
  40.     width: 150px;  
  41.     height: 150px;  
  42.     background-color: #006699;  
  43.     float:left;  
  44. }  
  45. #center{  
  46.     width: 500px;  
  47.     height: 150px;  
  48.     background-color: #009966;  
  49.     float:left;  
  50. }  
  51. #right{  
  52.     width: 150px;  
  53.     height: 150px;  
  54.     background-color: #006699;  
  55.     float:right;  
  56. }  
Elnézést, ha kicsit hosszú voltam. Ha esetleg van egy összafoglaló gyűjtemény a böngészők eltérő viselkedéséről megköszönném az odavezető linket.
Előre is köszi.
‹ <pre> tag nem töri a sort Befoglaló div magassága igazodjon a tartalomhoz ›
 ■
1

szerintem p

Anonymous · 2006. Aug. 14. (H), 13.14
p {margin: 0; padding: 0;}

ff ben van marginja a p elemnek default, ie-ben nincs.
2

thx

cyrus · 2006. Aug. 15. (K), 09.01
Köszönöm!

Valóban ez volt a gond. Ha időd engedi tudnál (vagy bárkimás) mondani még ilyeneket? (Operában, FF-ban így csináld, IE-ben amúgy...)

A témával kapcsolatos a következő is, amiről még nem olvastam sehol.

Ugye IE nem ismeri az auto margin fogalmát ezért az ominózus text-align-os trükkel kell középre igazítani az egész tartalmat. (erről olvastam :)
Viszont, ha IE-ben XHTML-es doctype-ot használok, akkor ismeri az auto margint és a text-align-os hack nélkül is középen van, mint Operában.

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


Esetleg van valami hátulütője a fenti Doctype-nak, ami miatt nem ezt szokás használni?
3

re

toxin · 2006. Aug. 15. (K), 10.15
http://www.webdevout.net/browser_support_css.php?uas=IE6-IE7-FX1_5-OP9#support-css2propsbasic-margin

nagyjából benne van , kérdésedre meg http://www.quirksmode.org/css/quirksmode.html