[Css] IE/FF - 100% Height misinterpretatiee

[duskarel]

Hey,

Ik leg even kort de layout uit
ContainerDiv, 400 px hoog (deze hoogte wordt later variabel)

• IMG 1 - Float left, hoogte 100%
• DIV (met tekstinhoud) - Float left, hoogte 100%
• IMG 2 - Float left, hoogte 100%
• Footer Image

--> Bedoeling is dus dat IMG 1 & 2 een rand vormen voor het tekstvak, en dat de footer image die rand doorzet naar onderen. In firefox is dit geen probleem...

Internet explorer echter, neemt voor img 1 een hoogte van (hier nu) 400px, (denk ik), voor img 2 een hoogte van 400px + de hoogte van mijn footer image (enigste niet gefloate in container) en voor mijn contentDiv een hoogte van img 2 + hoogte footer image (400px + 2x footer dus)

Kan ik hier iets tegen beginnen? (Indien uitleg niet volstaat printscreen ik wel even)

[user109731]

Doe maar een printscreen ja, en graag ook de code die je gebruikt

Want zoals je het nu zegt zou het ook in IE goed moeten gaan.

[StarLite]

Zonder code/screenshot kan ik er niks van maken, maar IE kent eigenlijk geen height css-tag. IE intepreteerd 'height' als 'min-height' [en kent geen atribuut min-height].
Misschien dat dat iets met je probleem te maken heeft.

[duskarel]

• Internet explorer
• Firefox
• Code

[LionOne]

Als ik het goed lees is zijn de img tags "randLinks" en "randRechts" 100% de hoogte van je div "kader" en probeer je daar nog een img "randOnder" aan toe te voegen.
Ik kan me indenken dat dat niet gaat passen, misschien zou je de laatste img onder de div "kader" kunnen plaatsen?

/edit
misschien wel aardig als ik de vraag ook goed lees..
De reden dat ff het hier goed doet zal in de fout afhandeling liggen, want dat het niet hoort te passen klopt volgens mij wel. Maar waarom in IE links twee keer en rechts maar één keer de footer hoogte leeg blijft.. geen idee.

[ Voor 34% gewijzigd door LionOne op 12-08-2006 19:42 ]

[duskarel]

LionOne schreef op zaterdag 12 augustus 2006 @ 19:30:
Als ik het goed lees is zijn de img tags "randLinks" en "randRechts" 100% de hoogte van je div "kader" en probeer je daar nog een img "randOnder" aan toe te voegen.
Ik kan me indenken dat dat niet gaat passen, misschien zou je de laatste img onder de div "kader" kunnen plaatsen?

Ik had er al gewoon een div rondgezet tijdens het 1000-dingen-probeer-proces... nu ik er verder over dacht ben ik toch inzicht gekomen dat ik dan ook hetgeen ik wil overnemen van mijn parentdiv moet splitsen... maw, nu werkt het wel...

<div id="kader">
<div id="contentKader">
<img id="randLinks" src="../img/general/randLinks.png" alt="" />
<div id="content">
 
</div>
<img id="randRechts" src="../img/general/randRechts.png" alt="" />
</div>
<img id="randOnder" src="../img/general/randOnder.png" alt="" />
</div>
Waarbij contentKader de optie hoogte heeft overgenomen.
Merci!

[mithras]

duskarel schreef op zaterdag 12 augustus 2006 @ 19:45:
[...]
Ik had er al gewoon een div rondgezet tijdens het 1000-dingen-probeer-proces... nu ik er verder over dacht ben ik toch inzicht gekomen dat ik dan ook hetgeen ik wil overnemen van mijn parentdiv moet splitsen... maw, nu werkt het wel...

<div id="kader">
<div id="contentKader">
<img id="randLinks" src="../img/general/randLinks.png" alt="" />
<div id="content">
 
</div>
<img id="randRechts" src="../img/general/randRechts.png" alt="" />
</div>
<img id="randOnder" src="../img/general/randOnder.png" alt="" />
</div>
Waarbij contentKader de optie hoogte heeft overgenomen.
Merci!

Wat als je nu een container-div zet, met als background de gehele image (links als rechts) 1px hoog. Je laat de background van de container verticaal doorlopen. Je content-div zit in het midden van de container. Onder de container-div plak je een footer met de "bocht" en de rand. Ben je ook klaar
Zegmaar zo:
[code=html]<div id="container" style="background-image: plaatje.jpg ;background-repeat: repeat-y; width:800px;">
<div id="content" style="margin:0 auto 0 auto;width:650px;">
</div>
</div>
<div id="footer" style="background-image: plaatje.jpg ;width:800px;"></div>[/]_{breedte weet ik niet precies, heb niet naar je site gekeken voor die info. Maar dit is een stuk simpeler}

Nog makkelijker: 1 div, gecentreerd in het midden van je pagina, zo breed als je plaatje. Dan zet je een padding om je tekst binnen je kader te krijgen. Alleen kut dat IE de padding anders benaderd dan het hoort volgens de specificaties, maar daar moet wel uit te komen lijkt me

[ Voor 27% gewijzigd door mithras op 12-08-2006 19:58 ]

[Rowanov]

Wat dacht je van gewoon een achtergrond plaatje? Kost je hooguit 1 extra element om het voor elkaar te krijgen, maar vergeet daarbij niet dat je de body ook nog hebt om te stylen. Die plaatjes (img1, img2) zijn layout gerelateerd en horen dus niet als een img element in je pagina; het is namelijk geen content.