CSS achtergrond H1 in IE6

[jeroendenoot]

Hallo allemaal, ik heb een probleempje met de lay-out van een website. Ik heb er lang aan gewerkt om het in elke browser (IE6/7, FF, Opera) goed eruit te laten zien.
Nu heb ik er iets bijgemaakt; een achtergrondafbeelding en -kleur en een randje voor de H1-tags. Dit werkt prima in alle browsers, behalve in Internet Explorer 6.
Ik heb al veel problemen opgelost, maar nu sta ik echt voor een raadsel. Zo ziet het eruit in Internet Explorer 7:

En zo in Internet Explorer 6:

Zoals je ziet worden een paar onderdelen fout weergeven in het rechter blok. Op het eerste gezicht zijn dat de achtergrondafbeeldingen van de koppen. Die worden niet of half weergeven. Als je goed kijkt zie je dat behalve dat, ook het onderste lijstitem een paar pixels teveel naar links staat.
Maar dat is nog niet alles als je met de cursor wat beweegt en doet met de website verandert het een en ander. Hiervan heb ik een screenmovie gemaakt: http://216.86.150.60/videos/0/731427_0eada.wmv (Sorry voor de spelfout niews)
Wat ik ook raar vind, is dat dit alleen voor het rechter blok geldt, en niet voor het linker.
De website is tevens hier te bekijken: http://www.vgbot.nl/preview/
Heeft iemand een oplossing voor (een van) deze dingen?
Alvast heel erg bedankt!

 

[peter vazed]

Nou, ik zie het verschil niet.
Maar je css is wel goed:
http://jigsaw.w3.org/css-validator/

Ik denk dat je iets een paar pixels hoger moet maken in je CSS.

 

[jeroendenoot]

Zie je geen verschil...? Nou ja het is ook niet zo heel erg opvallend, maar als je goed kijkt zie ik toch echt wel verschillen hoor..

Ik heb al vanalles geprobeerd, ik kan op dit moment alleen nog maar iets met concrete oplossingen

 

[defietser]

jeroendenoot,
Ik zie wel het verschil, nu ik weet niet hoe IE6 omgaat met de weight en hoe je die hebt ingesteld. Ik veronderstel dat je bold hebt gebruikt.
Probeer eens in je pagina de tag b na uw h1 te plaatsen

<h1><b>Algemeen</b></h1>

Je zal zien of het effect heeft indien wel oke, wordt de h1 te zwaar in IE7 dan kan je nog de weight in uw h1 veminderen wetende dat bold gelijk is aan 400.
Zo maar even een bedenking van mijn kant
suc6

 

[jeroendenoot]

Het gaat hier niet om de dikte van de letter, dat maakt mij niet zoveel uit. Waar het me om gaat is dat de achtergrond bij de H1 niet of gedeeltelijk wordt weergegeven. Is hiervoor een oplossing?

 

[joanne]

Kijk hier eens.

 

[defietser]

jeroendenoot,
Zijn de kleuren wel websavekleuren. Probeer daar eens mee, ik denk dat je een verloopje hebt gemaakt voor die achtergronden in die headers.Ik heb eigenlijk niet in uw css gekeken 't is maar een gok. En IE 6 heb ik niet meer op mijn computer staan

 

[aaajeetee]

Ik heb ook een soortgelijk probleem meegemaakt met een achtergrond van een "p"-element. Ook dit werkte niet in IE6 en in alle overige browsers wel.

Zelf een klein "onderzoekje" naar uitgevoerd, maar was geen touw aan vast te knopen en we (klasgenoot en ik) zijn tot de conclusie gekomen dat het een IE6-bug is (lees: we hebben het zo gelaten).

 

[joanne]

div#more h3
{
margin-top: 0;
/* color: #40E0D0; */
padding: .2em;
background-image: url("plaatje.jpg"); 
/* background-position: right; */
/* background-repeat: repeat-y; */

Mss wat met padding en margin rommelen?
Heb nl iets wat erop lijkt in mijn eigen css style sheet.

Werk zelf onder IE6.

 

[jeroendenoot]

Allereerst allemaal hartelijk dank voor de reacties! :thumb:

Kijk hier eens.

Daar kan ik niet veel mee, dat heb ik al toegepast.

jeroendenoot,
Zijn de kleuren wel websavekleuren. Probeer daar eens mee, ik denk dat je een verloopje hebt gemaakt voor die achtergronden in die headers.Ik heb eigenlijk niet in uw css gekeken 't is maar een gok. En IE 6 heb ik niet meer op mijn computer staan

Ik heb de website volledig omgezet in websave kleuren (resultaat is niet echt mooi, maar in princiepe zou daar wel iets van kunnen worden gemaakt), maar met websave kleuren verkrijg ik hetzelfde resultaat.

Ik heb ook een soortgelijk probleem meegemaakt met een achtergrond van een "p"-element. Ook dit werkte niet in IE6 en in alle overige browsers wel.

Zelf een klein "onderzoekje" naar uitgevoerd, maar was geen touw aan vast te knopen en we (klasgenoot en ik) zijn tot de conclusie gekomen dat het een IE6-bug is (lees: we hebben het zo gelaten).

Ja, ik had al een sterk vermoeden dat het zoiets was.

div#more h3
{
margin-top: 0;
/* color: #40E0D0; */
padding: .2em;
background-image: url("plaatje.jpg"); 
/* background-position: right; */
/* background-repeat: repeat-y; */

Mss wat met padding en margin rommelen?
Heb nl iets wat erop lijkt in mijn eigen css style sheet.

Werk zelf onder IE6.

Daar kan ik niet veel wijs uit... Dat is namelijk best wel anders als ik het heb. Volgens mij heeft het ook niets met padding of margin te maken.

Conclusie: ik denk dat er weinig tot niets aan te doen is, dus laat ik het maar zo. Over een tijdje zullen er waarschijnlijk toch nog maar heel weinig mensen zijn met IE6. Het aantal zal in elk geval afnemen.

Nu is er eigenlijk nog een tweede probleem (tevens genoemd in mijn startbericht): bij het derde lijstitem uit de lijst van nieuwsberichten is de tekst drie pixels naar links verschoven. Ook hier is het alleen in het rechter blok. Ook is het vreemd dat het alleen vanaf het derde lijstitem is. Als ik er meer bij zet, dan komen die ook drie pixels naar links te staan. Dit kun je bekijken op http://www.vgbot.nl/preview/ of op de onderstaande schermafbeelding:

Is dit ook een bug of dit wel te verklaren (en oplosbaar)?