ugrás a tartalomhoz

CSS div formázási probléma IE alatt

montyx · 2008. Júl. 24. (Cs), 20.22
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.

<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>

A hozzátartozó .css rész a következő:

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;
}
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
 
1

mas a pelda

toro · 2008. Júl. 24. (Cs), 21.06
Mas van a linken mint itt, ezt itt fenn at se nezten...

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
2

fenebe

montyx · 2008. Júl. 25. (P), 14.34
Igazad van. Bocsi. :(
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. :(
3

haslayout

yaanno · 2008. Júl. 26. (Szo), 01.00
az a legkevesebb, hogy adsz doctype-ot! azután szerintem nézz utána az IE alatti haslayout problémának, érdemes, továbá IE web developer toolbarral is szerelkezz fel, ingyenes; két tipp a megoldáshoz:

#content, #pageheader { height: 1% }
vagy

#content, #pageheader { zoom: 1 }
tedd kondiconális kommentbe, hogy csak az IE lássa
4

DOCTYPE

montyx · 2008. Júl. 26. (Szo), 17.28
Köszönöm a tippeket, már nyomozok is a hashlayout és a két css tipped után.

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
5

Valid

montyx · 2008. Júl. 26. (Szo), 18.03
A w3 validálás szerint tökéletes a doctype-os változat. Akkor miért nem működik??? :(
7

doctype + még egy float

yaanno · 2008. Júl. 26. (Szo), 21.09
doctype az KELL, nem opcionális :) most nem a szabvánnyal jönnék elő, hanem azza, hogy ha nem adsz doctype-ot, akkor később magadat fogod megszívatni...

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
8

doctype

montyx · 2008. Júl. 27. (V), 10.36
div#pageheader div#introImage {
	float:left;
	overflow:hidden;
	width:25.5%;
}
Elvileg van neki.

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
9

doctype olvasnivaló

yaanno · 2008. Júl. 27. (V), 12.22
Szerintem ezt nézd meg mindenképpen. A szétesés miben jelentkezik? "Sajnos" IE6 már nincs a gépemen, ott esik szét?
6

:(

montyx · 2008. Júl. 26. (Szo), 19.08
Nem nyert sajnos a két css változtatás sem. :(
10

KÉSZ!

montyx · 2008. Júl. 27. (V), 13.17
Na sikerült megoldani. Két gond volt. Az egyik a DOCTYPE hiánya, a másik, meg hogy a DT megadása után érzékeny lett a kis- nagy betűkre, ami a cssben el volt írva 3 helyen.