[CSS] container niet variabel in hoogte in Firefox

[Ewald !]

Het volgende probleem is er aan de hand.
Ik ben bezig met een babes blog.. (softpr0n ) maar nu zit ik het met het probleem dat het middelste stuk niet variable in hoogte is als er divs worden geplaatst die de post kadertjes bevatten.(Alleen met FireFox, in Internet Explorer
Het probleem doet zich bijv niet voor als ik vijf paragraven lorem lipsum neer zet.
De code is te vinden op: http://www.naughtylog.com/naughtylog/style.css
De site is te vinden op: http://www.naughtylog.com/naughtylog/
Ik heb veel al geprobeerd, en haast alle divs op display:block gezet, maar dit mocht ook al niet baten.

De site is redelijk NSFW, alhoewel het enige naakt wat te zien is nihil (1 thumnail wat erg vaag is)

[ Voor 1% gewijzigd door Ewald ! op 08-05-2006 14:17 . Reden: url verbeteren ]

[CodeCaster]

Je url naar de site zelf klopt niet:
http://www.naughtylog.com/naughtylog/

En het gaat dus om:

Cascading Stylesheet:

.boxtxtkleincenter, .boxtxtmrkcenter {
    font-family: verdana;
    font-size: 6.8pt;
    color: #666666;
    line-height: 12px;
    text-align: left;
    padding: 5px 7px 5px 7px;
    letter-spacing: 0.5pt;
    display: block;
}

?

Daar zou ik even height: auto bij zetten.

[Ewald !]

Nee, werkt ook niet..

Als ik bij .post de hoogte ook op auto zet, is hij niets meer in hoogte.
Ik ben haast bang de site opnieuw op te moeten bouwen en als achtergrond een code als:

Cascading Stylesheet:

body {background: #FFFFFF url(/image/nieuwbreed2.jpg) repeat-y 50% 0; background-attachment: inherit;}

te moeten gaan gebruiken.....

[BasieP]

Ewald ! schreef op maandag 08 mei 2006 @ 14:28:
Nee, werkt ook niet..

Als ik bij .post de hoogte ook op auto zet, is hij niets meer in hoogte.
Ik ben haast bang de site opnieuw op te moeten bouwen en als achtergrond een code als:

Cascading Stylesheet:

body {background: #FFFFFF url(/image/nieuwbreed2.jpg) repeat-y 50% 0; background-attachment: inherit;}

te moeten gaan gebruiken.....

das bullshit, kan je even een testcase maken? ik heb opzich niet zoveel zin om je hele site te gaan debuggen.

[remcotolsma]

Misschien kun je dit even proberen:

Cascading Stylesheet:

.endboxcenter 
{
    width: 624px;
    height:30px;
    background-color: #FDF2EE;
    background-image: url(images/contentboxfooter.jpg);

    clear: both;
}

Hmm, zo te zien heb je het zelf ook al opgelost...

[ Voor 15% gewijzigd door remcotolsma op 08-05-2006 14:46 ]

[Boelie-Boelie]

Een div is een block-level element, die hoef je geen display: block mee te geven. De default van height is al 'auto', dus ook die hoef je niet te vermelden.

Font-sizes in pt zijn bedoeld voor print, beter is gebruik van ems voor het kunnen resizen van tekst (px kunnen niet resizen in IE).

Maar teug naar het probleem.. 'overflow: auto' op .boxcenter moet voldoende zijn.

Edit: Zie Quirksmode - clearing floats.

[ Voor 15% gewijzigd door Boelie-Boelie op 08-05-2006 15:21 . Reden: Link toegevoegd ]

[Ewald !]

Ik heb het nu opgelost met:

Cascading Stylesheet:

#panel_center {
    float:left;
    width:623px;
    height: auto;
    display: table-row;

alleen als ik nu de <div class="post"> weer onder de andere post zet, gooit Firefox ze door elkaar, en IE laat het gewoon boven elkaar zien?
Misschien omdat het table-row is ?

De hoogte is nu in iedergeval al goed.. Alleen gooit firefox ze nog steeds door elkaar?


**EDIT:
Ik heb nu het haast gefixed, maar moest wel een absoluut aantal pixels invoeren bij de class .post .... Lukt dus niet automatisch op een of andere manier, dan gooit hij de eerste .post en de .post door elkaar heen...

[ Voor 24% gewijzigd door Ewald ! op 08-05-2006 15:11 ]