[css] iconen vastplakken rechts gaat niet goed in IE

dinsdag 23 februari 2010 22:07

Acties:

0 Henk 'm!

Kowalski: Kaboeeem??

Topicstarter

Op de volgende pagina heb ik een test gemaakt waar ik een viertal iconen rechts regen de zijkant van mijn browser aan wil plakken. In Firefox is het geen probleem en werkt het goed. Helaas doet IE iets vreemds, het verplaatst mijn header.

Het is mij niet gelukt om de iconen geen effect te laten hebben op de rest van de pagina in IE en netjes mee te scrollen als ik de pagina scrol.

Iemand een idee wat er fout staat in mijn css code?

http:// www. fotovergelijk.n l/indextest.php (bestaat niet meer)

[ Voor 6% gewijzigd door rmfloris op 29-01-2012 15:41 . Reden: update URL ]

Foto afdrukken prijsvergelijk -> http://www.fotovergelijk.nl

dinsdag 23 februari 2010 22:13

Acties:

0 Henk 'm!

Leftblank

Met je CSS lijkt mbt. de fixed positionering weinig mis, het ligt eerder aan IE. Je bent nogal vaag over welke IE iets vreemds doet, dus er zijn wel meerdere quirks waar je last van kunt hebben. Een ervan zou je bijv. zo op kunnen lossen.

[ Voor 9% gewijzigd door Leftblank op 23-02-2010 22:17 . Reden: Beter voorbeeld ]

dinsdag 23 februari 2010 22:32

Acties:

0 Henk 'm!

rmfloris

Kowalski: Kaboeeem??

Topicstarter

Leftblank schreef op dinsdag 23 februari 2010 @ 22:13:
Met je CSS lijkt mbt. de fixed positionering weinig mis, het ligt eerder aan IE. Je bent nogal vaag over welke IE iets vreemds doet, dus er zijn wel meerdere quirks waar je last van kunt hebben. Een ervan zou je bijv. zo op kunnen lossen.

Ik heb het probleem met IE 6 en IE 7. Ik zal de oplossing die je hebt aangereikt eens gaan uitproberen. Mochten er nog meer tips zijn, dan hoor ik ze graag.

Foto afdrukken prijsvergelijk -> http://www.fotovergelijk.nl

dinsdag 23 februari 2010 23:09

Acties:

0 Henk 'm!

MBV

IE8 gaat standaard al in quirks-modus, dus daar zal je probleem wel zitten. In IE8 zitten ook de development-tools om te kijken wat er gebeurt in verschillende modussen (waaronder IE7-modus) en een tool vergelijkbaar met firebug om de foutjes te debuggen.

Als alleen IE6 en 7 vervelend doen: zoom:1 meegeven in je CSS om hasLayout op true te krijgen doet vaak wonderen

.

[ Voor 66% gewijzigd door MBV op 23-02-2010 23:11 ]

woensdag 24 februari 2010 09:48

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Css

IE6 ondersteunt uberhaupt geen position:fixed, dus dat gaat lastig worden.

Daarnaast, pak eens een fatsoenlijke doctype die standardsmode triggered.

woensdag 24 februari 2010 10:08

Acties:

0 Henk 'm!

rmfloris

Kowalski: Kaboeeem??

Topicstarter

@bosmonster, wat zou jij voorstellen als fatsoenelijk Doctype?

Foto afdrukken prijsvergelijk -> http://www.fotovergelijk.nl

woensdag 24 februari 2010 10:50

Acties:

0 Henk 'm!

Spinal

HTML 4.01 Strict: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Zie ook Kwaliteitsmodel webrichtlijnen

Full-stack webdeveloper in Groningen

woensdag 24 februari 2010 11:26

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Css

Of gewoon

<!doctype html>

Persoonlijk zie ik weinig reden meer html4 strict te gebruiken als doctype, al is er natuurlijk niks mis mee. In html5 kun je tenminste custom-attributen laten valideren (en dingen als iframe en target).

Wil natuurlijk niet zeggen dat je de hele html5 standaard moet implementeren (want dat ondersteunt IE niet), maar alleen de doctype voor standards-mode en validatie.

[ Voor 4% gewijzigd door Bosmonster op 24-02-2010 11:27 ]

maandag 1 maart 2010 12:06

Acties:

0 Henk 'm!

rmfloris

Kowalski: Kaboeeem??

Topicstarter

Het is gelukt om de iconen vast te plakken. IE6 uitgezonderd dan.

Ik loop nu alleen tegen een ander probleem aan. De afbeelding is 1 plaatje, waaruit dmv CSS de verschillende plaatjes worden geselecteerd. Dit gaat overal goed, behalve bij IE6. Daar laat hij het gehele plaatje zien, ipv alleen het geselecteerde plaatje.

Moet je voor IE6 iets speciaals doen?

Foto afdrukken prijsvergelijk -> http://www.fotovergelijk.nl

maandag 1 maart 2010 13:22

Acties:

0 Henk 'm!

MBV

Mijn reactie al gelezen?

MBV schreef op dinsdag 23 februari 2010 @ 23:09:
Als alleen IE6 en 7 vervelend doen: zoom:1 meegeven in je CSS om hasLayout op true te krijgen doet vaak wonderen .

Het valt me verder op dat in FF je maar 2 icoontjes laat zien, waar er in IE8 4 te zien zijn (maar dan dubbel, dus

. En in je broncode staat "<!--[if lte IA 6]>" wat waarschijnlijk IE 6 moet zijn

Waarom laat je IE trouwens in Quirks-mode werken? Vind je dat makkelijker ofzo

[ Voor 36% gewijzigd door MBV op 01-03-2010 13:30 ]

maandag 1 maart 2010 14:47

Acties:

0 Henk 'm!

rmfloris

Kowalski: Kaboeeem??

Topicstarter

MBV schreef op maandag 01 maart 2010 @ 13:22:
Mijn reactie al gelezen?

Het valt me verder op dat in FF je maar 2 icoontjes laat zien, waar er in IE8 4 te zien zijn (maar dan dubbel, dus . En in je broncode staat "<!--[if lte IA 6]>" wat waarschijnlijk IE 6 moet zijn

Waarom laat je IE trouwens in Quirks-mode werken? Vind je dat makkelijker ofzo

Ik heb de zoom toegevoegd, maar geen effect. IE8 dubbel, dat is raar. Bij mij laat hij hem goed zien. Toch nog eens naar kijken.

Je hebt het over Quircks-mode. Dit wordt waarschijnlijk veroorzaakt door mijn Doc type? Als ik een ander doc type neerzet, veranderd er weinig aan.

Foto afdrukken prijsvergelijk -> http://www.fotovergelijk.nl

maandag 1 maart 2010 15:07

Acties:

0 Henk 'm!

MBV

Sorry, mijn glazen bol is stuk: IE is af en toe echt een drama. Maar je kan toch zelf IE8 even downloaden, of de toolbar proberen: http://www.microsoft.com/...5e1db91038&displaylang=en

Als je dan de read-only properties aanvinkt kan je zien welke elementen hasLayout op false hebben staan, dat is iets wat je kan verhelpen met zoom:1. Dat is in 90% van de gevallen een van de oorzaken van IE6-problemen. Verder kan je eens kijken naar de verschillende overflow-modes.

En een van de hints is dat de W3-validator niet eens snapt dat het een HTML-document is:
http://validator.w3.org/c...29&doctype=Inline&group=0
En een andere hint dat je pagina iets netter geschreven mag worden is dat W3 158 errors vindt! Inconsequent gebruik van shorttags wel of niet met een /> afsluiten, ID's meerdere keren gebruiken, attributen niet in quotes zetten, geen type bij de style-tag opgeven, bold-tags niet afgesloten, geen H1-H6-tags gebruikt, enzovoort

[ Voor 26% gewijzigd door MBV op 01-03-2010 15:07 ]

maandag 1 maart 2010 15:19

Acties:

0 Henk 'm!

rmfloris

Kowalski: Kaboeeem??

Topicstarter

M.b.t. de fouten in het document, dat komt omdat de pagina een test is. Style codes zet ik normaal niet in de pagina, maar in een css bestand. Voor de test staan ze nu in de bron etc.

Het blijft lastig, ik ga verder op zoek naar een oplossing voor dit rare probleem.

Foto afdrukken prijsvergelijk -> http://www.fotovergelijk.nl

maandag 1 maart 2010 15:24

Acties:

0 Henk 'm!

MBV

Dat soort fouten kunnen nu net raar gedrag veroorzaken

maandag 1 maart 2010 15:56

Acties:

0 Henk 'm!

rmfloris

Kowalski: Kaboeeem??

Topicstarter

MBV schreef op maandag 01 maart 2010 @ 15:24:
Dat soort fouten kunnen nu net raar gedrag veroorzaken

Een helemaal gestripte versie: http:// www. fotovergelijk.n l/indextest1.php (bestaat niet meer)
Zelfde probleem, perfecte code volgende de hierboven genoemde website.

[ Voor 4% gewijzigd door rmfloris op 29-01-2012 15:43 . Reden: update URL ]

Foto afdrukken prijsvergelijk -> http://www.fotovergelijk.nl

maandag 1 maart 2010 17:23

Acties:

0 Henk 'm!

MBV

Je gestripte versie werkt heel anders in IE7/8: de icoontjes komen schuin onder elkaar. In IE7/IE8 is het simpel te fixen met een clear:right op #testing a. Ik zie met de developer tools geen verschillen, en ik kan het niet triggeren door dingen aan/uit te zetten. Ik zie nu trouwens geen dubbele icoontjes meer in IE8, geen idee wat daarvoor zorgde.

In IE6 moet je iets veranderen aan de overflow denk ik: er staat me iets van bij dat overflow:auto iets met de achtergrond doet.

offtopic:
Ik zie wel dat je aardig wat zinloze dingen in je CSS hebt staan: je haalt de UL naar rechts met position:fixed en right:0, en geeft ook een float:right die daardoor niets doet. De anchors geef je een top:0 en left:0 die geen effect hebben doordat je effectief position:relative hebt. Dubbel 'oplossen' is vaak dubbel zoveel problemen.

dinsdag 2 maart 2010 09:29

Acties:

0 Henk 'm!

rmfloris

Kowalski: Kaboeeem??

Topicstarter

Zo, de code is netjes opgeruimt. Het werkt nog steeds hetzelfde. Ook voor de zekerheid het PNG filetje vervangen door een gif bestandje. Maar nog steeds geen succes in IE6. Ze blijven onder elkaar staan.

Zijn er nog idee hoe ik ervoor kan zorgen dat hij niet alle afbeeldingen laat zien? De overflow werkte ook al niet.

Foto afdrukken prijsvergelijk -> http://www.fotovergelijk.nl

Onderwerpen