Opera és Firefox 10-20px-szel az Explorernél lejjebb tol elemeket
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:CSS: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.
■ 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:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ie_opera_firefox_teszt</title>
<link href="ie_opera_firefox_teszt.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content">
<div id="top">
<p>fejléc</p>
</div>
<div id="middle">
<div id="left">
<p>közép - bal</p>
</div>
<div id="center">
<p>közép - közép</p>
</div>
<div id="right">
<p>közép - jobb</p>
</div>
</div>
<div id="bottom">
<p>lábléc</p>
</div>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
background-color:#CCCCCC;
}
p{
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
color:#FFFFFF;
}
#left p{
text-align:left;
}
#right p{
text-align:right;
}
#content{
width: 800px;
margin-left:auto;
margin-right:auto;
background-color: #00CC99;
}
#top, #left, #center, #right, #bottom{
padding: 0px 0px 0px 0px;
}
#top{
height: 50px;
background-color:#990000;
}
#middle{
height: 150px;
background-color: #009999;
}
#bottom{
height: 50px;
background-color:#990000;
}
#left{
width: 150px;
height: 150px;
background-color: #006699;
float:left;
}
#center{
width: 500px;
height: 150px;
background-color: #009966;
float:left;
}
#right{
width: 150px;
height: 150px;
background-color: #006699;
float:right;
}
Előre is köszi.
szerintem p
ff ben van marginja a p elemnek default, ie-ben nincs.
thx
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?
re
nagyjából benne van , kérdésedre meg http://www.quirksmode.org/css/quirksmode.html