[CSS] Positie niet goed in Opera 8

[Verwijderd]

Na veel proberen en zoeken op het web kan ik de oplossing voor mijn probleem niet vinden. Bij opera (8.51) en oudere firefox krijg ik steeds een soort van margin aan de bovenkant. Hierdoor schuift het hele zooitje een eindje naar beneden. Dit gebeurd wanneer ik met float werk.

Stukje CSS

code:

#container 
{
    margin: 0 auto;
    width: 617px;
    text-align: left;
}

#content
{
    width: 400px;
    float: left;
    min-height: 500px;
    background: url(header.jpg) no-repeat top left;
}

#content2
{
    clear   : both;
    line-height: 150%;
    width: 400px;
}

#menu
{
    width: 197px;
    float: left;
    
    margin-left: 20px;
    margin-bottom: 20px;
    
    padding-top: 150px;
    
    background: url("logo.gif") no-repeat;
    
    font-family: Verdana, Arial, Helvetica;
    font-size: 11px;
}

Op www.pronamic.nl/kj.tolsma kan je de fout zien. Kan iemand me helpen want ik kom er echt niet achter waar nou de fout zit.

[crisp]

Daar lijkt inderdaad iets niet goed te gaan, ook in de laatste Opera 9 preview gaat het fout.
Toevallig kwam ik gisteren ook al langs een margin/padding bug in Opera 9 - het wordt weer tijd voor wat bugreportjes denk ik

[user109731]

In Opera 8.54 gaat-ie idd fout hier, maar Opera 9 (build 8393) rendert 'm goed.

[ Voor 7% gewijzigd door user109731 op 08-05-2006 18:14 . Reden: buildnr ]

[crisp]

hmmz, ja inderdaad; ik had vorige week Opera 8.54 weer geinstalleerd om een bug te hunten
Fixed in Opera 9 dus

[Alternativ]

Even een puntje van aandacht, ik blader door je website en zie een beschrijvende tekst naar je eigen bedrijf..

Als u met uw klanten wilt communiceren moet u voor Pronamic kiezen. Kijk op www.pronamic.nl voor meer informatie.

De klant moet niets

Probeer het in de vorm te gieten als u wilt communiceren met uw klanten dan is ... de beste keus, we zijn ervaren blablabla

/offtopic

[Verwijderd]

@ Alternativ

Je hebt helemaal gelijk, thx voor de tip!

ontopic:

Heeft iemand ook een oplossing voor dit probleem? Het wordt niet alleen in Opera verkeerd weergegeven maar ook in de oudere versies van Firefox.

[JHS]

Aangezien het gewoon om bugs gaat, zou ik er niet al te veel aan doen, eerlijkgezegd . Om voor alle oudere versies van alternatieve browsers te gaan testen en workarounds te gaan bedenken, terwijl er geen goede filtermethoden zijn, gaat mij wat ver.

[remcotolsma]

Ik weet niet zeker of het hier wel om een bug van Opera gaat. Het zou ook een bug van Firefox kunnen zijn. Ik ken de specificaties van CSS niet zo goed.

De fout zit 'm niet in de gegeven CSS van KJT, maar in het volgende:

Cascading Stylesheet:

#footer
{
    background          : url("bgfooter.gif") repeat-x;

    clear               : both;
    width               : 100%;
    
    padding-top         : 55px;
    margin-top          : 20px;
    
    text-align          : center;
    line-height         : 150%;
    
    font-family         : Verdana, Arial, Helvetica;
    font-size           : 9px;
    color               : #777;
}

Omdat alle andere elementen 'gefloat' worden is het beter dat de 'footer' ook gefloat wordt. De padding-top: 55px veroorzaakt namelijk het probleem.

De oplossing:

Cascading Stylesheet:

#footer
{
    background          : url("bgfooter.gif") repeat-x;

    float               : left; /* <-- OPLOSSING!!!! --> */
    clear               : both;
    width               : 100%;
    
    padding-top         : 55px;
    margin-top          : 20px;
    
    text-align          : center;
    line-height         : 150%;
    
    font-family         : Verdana, Arial, Helvetica;
    font-size           : 9px;
    color               : #777;
}

[ Voor 4% gewijzigd door remcotolsma op 10-05-2006 23:33 ]

[crisp]

remcotolsma schreef op woensdag 10 mei 2006 @ 23:33:
Ik weet niet zeker of het hier wel om een bug van Opera gaat. Het zou ook een bug van Firefox kunnen zijn. Ik ken de specificaties van CSS niet zo goed.

[...]

Omdat alle andere elementen 'gefloat' worden is het beter dat de 'footer' ook gefloat wordt. De padding-top: 55px veroorzaakt namelijk het probleem.

De padding van de footer zou geen enkele invloed mogen hebben op andere elementen.
Een nadeel van het uit de flow halen van de footer is tevens dat de container-div niet meer alles omspant (tenzij je daar weer een overflow: auto of hidden op zet, of na de footer alsnog een ander clearing element plaatst).

Ergo: het is wel degelijk een bug in Opera 8.5x en jouw oplossing is geen oplossing maar een work-around waar zelf ook weer nadelen aan kleven.

[ Voor 6% gewijzigd door crisp op 11-05-2006 01:11 ]