[css]Variable hoogte van content holder div

[Niakmo]

ik ben bezig met een simpele layout, die ik maar niet goed krijg. het nare ervan is dat ik gebruik maak van "dubbele border", eerst een zwarte dan een witte, dit doe ik door 2 divjes in elkaar genest te zetten zo als hier te zien is (styles.css ) .

het relevante stukje je code is:

Cascading Stylesheet:

/* de holders*/

#inhoudholder
 {
    position: absolute;
    top: 107px;
    left: 0;
    background: #FFFFFF;
    width: 800px;
    border: 1px solid white;
    border-top: 0;
}

#inhoud
 {
    width: 798px;
    border: 1px solid black;
    border-top: 0px;
    padding-top: 70px;
    padding-bottom: 70px;
    padding-left: 40px;
    padding-right: 30px;
}

/* text en photo in de holder */

#photoholder
{
    width: 155px;
    margin: 0;
    margin-right: 70px;
    float: left;
}

#textholder
{
    margin: 0;
    float: left;
}

op deze manier werkt hij pefect in IE (op een klein render foutje na rechts onderin) maar firefox en safari bakken er niks van, zodra ik het aanpas voor firefox en safari werkt het in IE niet, ik kan op de een of andere manier geen midden weg vinden.

[Verwijderd]

doe eens overflow: auto; bij #inhoud, is dat wat je bedoelt? anders snap ik je vraag niet echt goed denk ik, 't is ook een beetje moeilijk te zien waar wat zit

[Niakmo]

in firefox, wil hij de divjes momenteel niet floaten plus de tweede holder neemt niet de maximale hoogte aan. Maar in IE doet hij het wel goed op deze manier.

[Verwijderd]

geef dan ook nog eens dat textvak eens een expliciete breedte (400px ofzo), of doe het op de manier zoals float eigenlijk echt bedoeld is: plaatje in je textvak met alleen het plaatje een float: left;

_{en trouwens niet alleen maar div's gebruiken, zoekwoord: semantiek}

[ Voor 17% gewijzigd door Verwijderd op 22-07-2005 12:05 ]

[Niakmo]

de overflow:auto; was inderdaad het probleem, dat doet het nu goed.

Het probleem nu is dat de margin die de foto div mee geef in IE anders is dan in FF, ik heb alle divjes die geen margin of padding nodig heben maring: 0; en padding:0; gegeven maar nog doet IE er een aantal pixels bij.

Verder zit er in IE een renderfout links onderin met de border, die loopt nog door waar die dat niet moet.

[crisp]

vwb IE loop je waarschijnlijk tegen de doubled margin bug of tegen de three pixel text-jog aan.

[Niakmo]

de eerste was inderdaad de doubled margin bug, maar ik zie niet zo snel of ik daar onderin te maken heb met die 3 pixels aangezien alleen de bottom border niet goed zit, en alleen aan de linker kant, en maar 1 pixel te veel.


http://www.menkovic.nl/lomo/index.html




waarom renderd IE images anders als je ze onder elkaar zet in je html source dan als je ze achter elkaar zet?

[ Voor 35% gewijzigd door Niakmo op 22-07-2005 15:14 ]