Sprymenu doet niet wat ik wil in IE browser

[ElsyV]

Ik heb een horizontaal Sprymenu geplaatst.
Deze werkt goed in FF en Chrome.

De sublinken moeten onder elkaar verschijnen maar in IE verschijnen deze naast elkaar.
Hoe moet ik mijn CSS aanpassen om dit te corrigeren?

Hieronder een screenshot van FF en IE en van de CSS instellingen.

 

[csshunter]

Hoi Gezins- en website-manager,

Wat nu weer?

Nou, het screenshotje van de css is maar een heel klein deel van de Spry-css, daar valt niet uit op te maken wat er aan de hand is. Het kan aan 1001 dingen liggen, in de Sprymenu-css, in andere css, in de html...

Maar ik heb de site gevonden.
En geopend in IE7: inderdaad, het menu doet het niet goed, maar de hele kop staat bij een resolutie > 1024*768px ook teveel naar rechts.

Dus het eerste gedaan wat nodig is: een check op valid html en css (zie m'n handtekening).

• Hoelawoela! :shocked: De html-validator meldt: 503 Errors, 577 warning(s).
• De css-validator vertelt: Sorry! We vonden de volgende Fouten (18) en Waarschuwingen (480).
• De Webrichtlijnen Quickscan komt niet verder dan een magere 30/47 score.

Toch maar in de broncode gedoken.
In de links van het Sprymenu staan <div>'s die er niet in horen, bv.:

<li>
    <[B][COLOR="#B22222"]a[/COLOR][/B] class="menu"  href="?hoofdrubriek_id=2&hoofdrubrieknaam=Foto&subrubriek_id=4&subrubrieknaam=Afdruk service" 
    onClick="_gaq.push(['_trackEvent', 'Tekstlink', 'Rubriek', 'Foto | Afdruk service']);" 
    rel="nofollow" >[COLOR="#B22222"][B]<div class="submenu-linken">[/B][/COLOR]Afdruk service[COLOR="#B22222"][B]</div>[/B][/COLOR]</[B][COLOR="#B22222"]a[/COLOR][/B]>
</li>

• Of dit het enige is, weet ik niet, maar in inline-elementen als een <a> mogen geen block-elementen als een <div> staan (alleen omgekeerd).
• Misschien kan het IE-gedrag verbeterd worden door er <span>'s ipv <div>'s van te maken.
• Maar gezien de rest van de errors is dat onzeker.
• Misschien moet bv. in die <span>'s de {display:block;} op {display:inline-block;} gezet worden.
• Het komt me voor dat niet de complete Spry-menu opbouw gevolgd is (met de voorgeschreven Spry-menu class-namen). In elk geval worden de Spry-styles gemixt met classes die uit het algemene styles.css voortkomen.
• Al met al is het een beetje onoverzichtelijk.
• De complete css (alleen al de styles.css heeft ruim 1900 regels) heb ik niet doorgevlooid...

Met vriendelijke groet,
CSShunter

 

[ElsyV]

Heel erg bedankt voor de tips. Ik ga ermee aan de slag. Je hoort nog of het allemaal is gelukt.

Update:
Ik heb al die <div>'s eruit gehaald, was niet nodig.
Daarna block op inline-block gezet maar maakt geen verschil.
Verder zoeken dus.

Ik heb versie 9 van IE.
Waar kun je je website bekijken in verschillende browsers? Is Spoon.net iets?

 

[csshunter]

Met spoon.net heb ik geen ervaring; zou kunnen.

Ik check voor eerste indruk met Netrenderer (geeft alleen statische screenshots, dus hovers e.d. functies zijn niet te controleren, behalve als je die via de css tijdelijk aan zet; heeft ook geen resolutie-optie: altijd 1024*768). Maar Netrenderer is wel véél sneller dan de (ook statische, maar met meer opties) Browsershots (althans de gratis versie zonder priority).

Met IE-versies loop ik er bewust een paar achter, ik zit nu op IE7 (8 en 9 zijn beter; dus als het goed gaat in IE7 en in FF, Chrome, Opera en Safari, zal het ook wel goed gaan in IE8 en IE9; maar je weet het nooit ).

Voor IE6 had ik een virtuele schijf aangemaakt met Microsoft Virtual PC (IE6 draait daaronder op Win98SE). Maar binnenkort ga ik er maar eens eentje opschuiven, want IE6 is behoorlijk ter ziele.