CSS div formázási probléma IE alatt
Helló Bölcsek!
Sokat tanultam már itt, de ehhez hasonlóval még nem találkoztam. Ezért kérem a segítségeteket.
Éppen egy theme-t készítenék, egy már működő php motoromhoz. Minden nagyon szép nagyon jó, csak a kedvenc böngészőm újra közbeszólt. IE alatt a következő html résznél nem értelmezi konténerként a pageheader DIV-et valamiért. És szétcsúszik a design.A hozzátartozó .css rész a következő:Az oldalt felraktam ide, hogy működés közben is meg tudjátok nézni mire gondolok. Remélem tudtok segíteni mert meghülyülök se tudok rájönni, hogy mi a baj.
Előre is köszönöm:
Monty
■ Sokat tanultam már itt, de ehhez hasonlóval még nem találkoztam. Ezért kérem a segítségeteket.
Éppen egy theme-t készítenék, egy már működő php motoromhoz. Minden nagyon szép nagyon jó, csak a kedvenc böngészőm újra közbeszólt. IE alatt a következő html résznél nem értelmezi konténerként a pageheader DIV-et valamiért. És szétcsúszik a design.
<div id="pageheader">
<div id="introimage">
<img height="120" width="230" alt="" src="./img/intro.jpg" />
</div>
<div id="intro">
<div>
<h1>valami Bemutatkozás, és Egyebek</h1>
<p class="quote">
<span>"Ide kellene idézet!!! Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla"</span>
<br/>
Meg hogy honnan van! XD
</p>
</div>
</div>
<div id="pagetools">
<ul>
<li>
<a id="english" lang="en" href="#">in English</a>
</li>
<li>
<a id="deutsch" lang="de" href="#">auf Deutsch</a>
</li>
</ul>
<p>
<a href="#">Kapcsolat</a>
</p>
</div>
</div>
div#pageHeader {
background:#F0F0EE none repeat scroll 0% 0%;
font-size:1.2em;
overflow:hidden;
padding:1em 0pt;
}
div#pageHeader div#introImage {
float:left;
overflow:hidden;
width:25.5%;
}
div#pageHeader div#introImage img {
display:block;
margin-left:0.8em;
}
div#pageHeader div#intro {
float:left;
width:50%;
}
div#pageHeader div#intro div {
line-height:1.3;
margin-left:2em;
}
div#pageHeader div#intro span {
font-family:georgia,serif;
font-style:italic;
font-weight:normal;
}
div#pageHeader div#intro span {
display:inline;
}
div#pageHeader div#pageTools {
float:left;
width:24.5%;
}
div#pageHeader div#pageTools p,
div#pageHeader div#pageTools ul {
padding-right:1em;
}
div#pageHeader div#pageTools ul,
div#pageHeader div#pageTools p {
margin-left:1em;
}
div#pageTools ul {
list-style-type:none;
padding:0.1em 0pt 0pt;
}
div#pageTools ul li {
margin-bottom:0.35em;
}
a#english {
background:transparent url(../img/kellkep.gif) no-repeat scroll left top;
padding:0.1em 0pt 0pt 20px;
white-space:nowrap;
}
a#deutsch {
background:transparent url(../img/kellkep.gif) no-repeat scroll left top;
padding:0.1em 0pt 0pt 20px;
white-space:nowrap;
}
Előre is köszönöm:
Monty
mas a pelda
A neten levo cuccban van egy max-width a div#page-ben, amit az IE6 nem kezel le, ezert dobja szet az egesz oldal szelessegre
fenebe
Nem jól írtam le a problémámat.
Szóval az a gondom, hogy az idézet mögött a div nem szürke. A szélességproblémát meg tudom oldani, azzal nincs gond. De nem bírok rájönni, hogy ott miért nem lesz szürke, és az angol meg a német link miért alá kerül, és miért nem mellé IE alatt. :(
haslayout
DOCTYPE
A doctype meglett ami kellene, de az még jobban szétzilálja a header részt.
Közben sajnos a ingyentárhely vacakol, szóval ide raktam fel a dolgokat:
DOCTYPE-pal
DOCTYPE nélkül.
Elképzelésem sincs miért? Az xhtml szabvány szerint dolgoztam pedig! :S
Valid
doctype + még egy float
az #introimage divnek is kellene egy float:left, az rendbeteszi a head részt és nálam pl IE7 / FF3 alatt is ugyanúgy néz ki
doctype
A doctype megválasztásáról hol lehet olvasni? Mert én elvileg az xml szabvány szerint próbáltam dolgozni! :S
És az egész széthullik, ha beírom, minden böngészőben. :S
doctype olvasnivaló
:(
KÉSZ!