[css] mozilla/ff probleem - konqueror en opera zijn ok

[Verwijderd]

Ik heb wat css problemen - heb het halve web afgezocht, maar ik kan niks vinden dat op een oplossing lijkt.

Mijn site: http://www.mandrake.tips.4.free.fr/ heb ik net aangepast, maar de H2's wil ik eigenlijk anders hebben. Kies daarvoor "view - use stylesheet/Page Style - Orig". Dit ziet eruit zoals ik het hebben wil in Opera en Konqueror (Safari dus hopelijk ook).

Het probleem is de float aan de rechterkant - in moz/ff gaan de H2 achtergrond beelden door de rechter float heen.
Ik zou natuurlijk de midden tekst een kolom kunnen maken , maar dan wordt dat na de rechter'float' niet breder, wat ik wel wil...

Volgens de css definities, o.a. hier: http://www.w3.org/TR/REC-CSS1-961217.html
zou de float niet overlapt moeten raken...
(Hmm, had gister een andere pagina bij W3 waar het duidelijker op stond... dat blocks niet door andere blocks overlapt mogen raken, dus die H2's horen incl hun achtergrond volgens mij dan niet door de float heen te gaan... in elk geval niet in de voorgrond, bij konqueror kan ik gewoon de float een achtergrond geven die dan de H2 achtergrond overdekt...)

Het rare is ook dat de text gecentreerd is binnen de kolom, terwijl de achtergrond de hele breedte neemt....

Wat moet ik anders doen om dit te fixen?


(Overigens, ik weet dat het zaakje in IE verschuift, maar omdat ik dat niet kan testen kan ik er weinig aan doen - als iemand tips heeft zijn die natuurlijk welkom. Maar omdat het een Linux gerichte site is voldoet het voor mij als het in Mozilla/FF goed werkt. En konqueror / lynx etc natuurlijk.)

[Verwijderd]

ik zie niks raars eigenlijk....

D'r overlapt nergens wat. Post anders eens een screenshot en wat relevante code ofzo

Dingen kunnen mekaar gaan overlappen als ze absoluut gepositioneerd zijn, dus misschien migt het ergens daaraan

[Rowanov]

Heb je je site al in IE6 gezien? Er zit iets niet helemaal goed...

[Verwijderd]

mophor, als je de andere stylesheet kiest, zie je de 'headers' "Motivation for this site" enzo (waar links naar gelinkt wordt) doorlopen over de rechter 'float'.

http://mandrakeusers.org/...=Attach&type=post&id=1250
is een voorbeeld hoe het eruit moet zien (konq in achtergrond) en hoe Moz/ff het doet (voorgrond).

[Verwijderd]

ah, de andere stylesheet

wat is de css voor die h2 en die span die er omheen staat? (en die div#sideremarks)

[Rowanov]

Je hebt dit stukje css:

code:

h2 { 
margin-left: 1em; 
margin-right:1em; 
padding: 0.33em; 
text-align: center; 
background: #6a81ff url(images/mdklogobgdkbl.jpg) 0 0 repeat fixed; 
color: #024; 
letter-spacing: 0.25em; 
font: bold 150% sans-serif; 
}

Lijkt mij vrij logisch dat hij dan zo doet, jij vertelt hem dat hij links en rechts 1em moet overhouden en dat doet hij ook. Dat hij dan over andere elementen heen gaat, tja...
...dus de margin-right gewoon wat opschroeven lijkt mij voldoende.

[Verwijderd]

nee, dat kan niet, dan zou ie rekening moeten houden met de float

ik zou eerder gokken op de span die er omheen staat (dat mag sowieso al niet en verder is ie compleet overbodig)

[Verwijderd]

Sorry, die span tags staan ertussen omdat ik aan het prutsen was om de zaak goed te krijgen - ze hebben geen enkele invloed (in konq en moz/ff), maar zijn inderdaad ongeldig.
Daar ligt het niet aan - maar ik kan het van hier niet fiksen...

Het probleem is met mijn margins, inderdaad, ik dacht die leuk als dynamisch te bepalen (met ems), maar ik moet de rechter margin inderdaad als standaard waarde plus de breedte van de float (180px dacht ik) nemen!

Eh, nee!
Dat gaat ook niet, als de float korter is, dan is de breedte van de H2's weer te kort...
Op sommige pagina's krijg ik misschien een veel kleinere 'float' inhoud, en ik wil daaronder de H2's toch wel over de hele breedte houden...


Ps Als iemand nog hints heeft om de zaak in IE recht te trekken (ik heb het zoeven in IE gezien, niet mals - de links aan de linkerkant van de middentekst zijn niet zichtbaar..), dan graag, zolang het met correcties aan de huidige css is, liever niet een keuze voor een gemodde css.

[Verwijderd]

Volgens mij is dit zeker een bug in Mozilla. Een beetje prutsen aan stijleigenschappen of verwijderen van wat content doet dit rare effect al verdwijnen.

edit:
Sterker zelfs, de ene keer doet die het verkeerd bij het laden hier en de andere keer doet die het goed.


edit edit:
Ik kon het reduceren tot deze testcase:

code:

<html>
<head>
<style type="text/css">
div { float: left;background-color:green;}
h2 { background: #6a81ff;
background-image:url(http://www.mandrake.tips.4.free.fr/images/mdklogobgddkbl.jpg);
background-attachment:fixed;
}
</style>
<title></title>
</head>
<body>
<div>Sometimes this green box gets covered behind the blue box.
This shouldn't happen</div>
<h2>You should see a green box on the left of this text</h2>
</body>
</html>

Dit is voglens mij gelijk aan https://bugzilla.mozilla.org/show_bug.cgi?id=211830
Die bug is duplicate gemaakt aan: https://bugzilla.mozilla.org/show_bug.cgi?id=191830

[ Voor 85% gewijzigd door Verwijderd op 23-11-2004 13:11 ]

[Verwijderd]

Martijn, bedankt voor de info.

Het zou kunnen dat een z-info tag al helpt, daar staat ook iets over in die bugreports...

Vanavond proberen.

[Verwijderd]

Die z-info tag doet wonderen!
Iedereen bedankt voor de tips en het meedenken!

(Net op tijd, mijn review wordt genoemd in de Mandrakelinux newsletter..)

[Verwijderd]

Ik heb net bij iemand op IE mijn site bekeken, zwaar belabberd vergeleken met Moz/FF/Opera/Konq (Lynx ) maar al minder slecht dan gisteren, ik heb de stylesheet nog wat aangepast en dat heeft geholpen om de in-page links (links buiten/naast de inhoudstekst) zichtbaar te maken. Buiten mijn bedoeling - het was om eea in Moz/FF/Opera te verbeteren, heeft voor IE toevallig ook wat geholpen.

Het lijkt erop dat IE op een of andere manier denkt dat de pagina inhoud gecentreerd moet zijn...

Kan iemand mij een hint geven hoe ik dat zou kunnen oplossen?
(Nogmaals, ik heb geen IE dus kan het niet zelf debuggen -- zelfs op mijn werk zit ik op een linux machine; ik kan daar wel op een andere machine dingen in IE bekijken..)