[css/html] Firefox vult linker kolom niet, IE wel

[Rodyman]

Ik ben nog steeds bezig een site om te bouwen van tabellen, naar css. En nu ben ik tegen het volgende probleem aangelopen:

kijk hier: (met IE én Firefox)
Link die alles verduidelijkt!

Het gaat om de linkerkolom. Deze vult hij in IE goed op tot beneden aan toe, maar in Firefox blijft deze boven in steken.

Ik had voorheen alleen een float:left in het linker menu zitten, maar dan kreeg ik problemen met de 3-pixel bug van IE en daarom heb ik het main gedeelte ook een float : right gegeven.

Sindsdien vult hij de linker kolom dus niet goed meer op

iemand enig idee?

[André]

Zet op de leftcolumn een height:100%, of onder de linkerkolom een <br style="clear:both" />

[Rodyman]

als ik op de leftcolumn een height:100% zet, loopt ie onderaan door, omdat die leftcolumn niet helemaal tot boven loopt.

[th3]

doe een <div style="height:1px;clear:both;"></div> boven je wrapper </div> tag dat moet het doen denk ik

[ Voor 23% gewijzigd door th3 op 01-11-2004 00:30 ]

[Rodyman]

th3 schreef op 01 november 2004 @ 00:30:
doe een <div style="height:1px;clear:both;"></div> boven je wrapper </div> tag dat moet het doen denk ik

En inderdaad! Dat werkt! thnx! kun je me ook uitleggen, waarom het precies werkt?

[Verwijderd]

Ja waar staat die <br style="clear:both" /> op?

[th3]

dat clearen zorgt ervoor dat de document flow weer goed verloopt, je cancelled zeg maar de float:right en left;. Omdat de background inprincipe geen content heeft(op de float na) gaat het naast de floats staan en is het net 1px hoog. als je er een element onder zet met clear:both; dan wordt het uitgerekt tot onder je kolommen waardoor je container ook wordt uitgerekt. het beste kan je een div gebruik of een ander block level element. de <br> deed het bij mij vroeger niet goed vandaar dat ik een div gebruik nu.

ik hoop dat het duidelijk is ben niet zo goed in uitleggen

[Rodyman]

Ik snap het helemaal! bedankt voor de uitleg!

Maar hierdoor duikt een ander probleem op:

Zie: LINK!

Het balkje tussen het menu links en de content rechts, moet een 1 pixel-breed donkerblauw kleurtje krijgen. Ik heb nu de content rechts een margin-left: 1px; gegeven zodat de achtergrond daar doorheen schijnt.

Maar omdat ik de achtergrond licht moest maken, omdat anders de linker kolom niet doorliep, wordt dit lijntje ook licht. Dit is niet de bedoeling

Hoe krijg ik dit makkelijk weer donkerblauw?

Ik heb het al geprobeerd met een div om de content heen die donkerblauw was, maar werkte niet goed... een losse float van 1pixel ertussen werkte ook niet helemaal lekker..
zit nu weer eens zogezegd met mijn handen in het haar.

Iemand enig idee hoe dit netjes op te lossen is?

[X-Lars]

Een border van 1 pixel i.p.v. een margin?

[Rodyman]

X-Lars schreef op 01 november 2004 @ 21:07:
Een border van 1 pixel i.p.v. een margin?

nope een border rechst bij de linkse kolom loopt niet helemaal van boven naar beneden door en een border links bij de rechtse kolom verpest de layout weer

[th3]

maak een creatief bg.gif-je
1px hoog en dan zo breed als je page
grijs - blauwlijntje-grijs
zo doe ik het altijd, kost nauwlijks extra filesize en werkt perfect

[Rodyman]

th3 schreef op 02 november 2004 @ 19:13:
maak een creatief bg.gif-je
1px hoog en dan zo breed als je page
grijs - blauwlijntje-grijs
zo doe ik het altijd, kost nauwlijks extra filesize en werkt perfect

Hahaha leuke oplossing, het werkt in ieder geval wel!

Jammer dat het niet makkelijk met css - margins kan