[SuckerFish] Menu probleem in IE6,7,8

[DAMAGE]

Hallo mensen,

Ik ben nu bezig met een menu op basis van SuckerFish. Dit menu is redelijk basic, en werkt goed. Dit was ook de bedoeling want het moet niet te veel poes pas zijn. Nu heb ik het zelf wat meer flashy gemaakt met wat plaatjes etc door middel van CSS. Op een boel browsers heb ik het getest en het gaat goed op de volgende browsers:

- Firefox
- IE8
- Opera 10
- Safari

Ik kan het hier nu niet testen op Linux gezien ik op mijn werk ben, maar ik kom er echt niet meer uit. Wel heb ik op internet verschillende bugs hier over gevonden, maar geen een oplossing die voor mij een oplossing bied in die vervelende Internet Explorer browsers die altijd maar hun eigen leventje leiden (Behalve IE8 dan). Mijn CSS is valid, maar goed dat zegt natuurlijk niks over de bug opzich. Op IE7 gaat het mis. Waarschijnlijk ook wel in IE6.

Ik heb speciaal voor de test gelegenheid eventjes het menu uit de site gehaald en in een apparte file gezet. Daarmee is dus eigenlijk gelijk uit gesloten dat het door een andere css code in de site zou kunnen komen.

http://www.bagageonline.nl/catalog/rick.php

Daar kun je de boel bekijken. Ik weet dat ik hier niet zo maar om hulp mag komen vragen, maar ik heb persoonlijk echt al van alles geprobeerd. Ik zie schijnbaar iets over het hoofd voor IE7 en lager. Maar wat?

[brtk]

hier op mijn IE8 werkt het volgens mij ook niet zoals zou moeten; er zit alleen een submenu onder Accessoires en die opties zijn onleesbaar, zie een soort zwarte lijntje.

lijkt me een padding, margin probleem ?

[DAMAGE]

Hey dat is heel raar. Het zelfde menu heb ik namelijk op de website zelf ook draaien, alleen dat kan ik alleen zelf zien en de klanten momenteel niet, anders zouden ze niet op de website kunnen kijken.

Bij mij doet het bestand wat ik gepost heb hier boven het wel gewoon in Mozilla, maar inderdaad in IE8 doet hij het nu ook niet meer.

Als je de mogelijkheid hebt om het in Firefox te zien, dan zul je zien dat elk onderdeel een sub menu heeft. Alleen de bug in IE is dus dat hij er maar 1 laat zien, en niet alles. En inderdaad, dat wat hij toont, toont hij foutief.

[DAMAGE]

Ik heb het probleem al gevonden. Hij zette er een paar UL's en LI's extra in wat dus niet moest.

[DAMAGE]

Sorry voor nog een schopje, maar ik was wat te voorbarig.

Wat ik nu eerst is gedaan, is voor de mensen die eventueel kunnen helpen, de source code wat netter gemaakt:

http://www.bagageonline.nl/catalog/rick.php

Daar kun je zien hoe het menu is opgebouwt. Dit is prima verder. Ik heb het menu nu in IE7 ook werkend, alleen de tekst valt daar weg. Zie screenshot:



Ik heb al veel met padding/margin geprobeerd en ook al met line-height maar dat lijkt niet te baten.

Iemand een idee?? Ik pruts nog even verder...

[Fuzzillogic]

Zorg eerst eens dat de boel in standards-mode draait door er een correct doctype boven te zetten. Nu in quirksmode kun je blijven raden waar het aan ligt.

En die image-only menu-items kunnen ook wel wat netter

[ Voor 16% gewijzigd door Fuzzillogic op 23-09-2009 19:55 ]

[DAMAGE]

Ik heb het al aangepast maar er zitten wat fouten in. Die fouten zijn naar mijn inziens niet relevant. Dat het niet goed is oke, maar dat zou niks te maken mogen hebben met waarom IE7 bugged is.

Ik heb het gister thuis even bekeken en daar heb ik een andere versie van IE7. Daar deed de tekst het prima, maar zaten er weer wat kieren tussen de items... Elke browser doet het, behalve dat fijne IE7 en daar beneden. IE8 is al een hele verbetering dus...

[Fuzzillogic]

Je geeft de UL wel hard een margin en padding mee, maar de LI niet. Dus geef LI ook eens de gewenste padding en margin (0 wellicht)

[DAMAGE]

Geprobeerd en er in gezet, maar mag niet baten.

Ik heb ook de Li's al groter gemaakt, maar dat maakt ook niks uit. Dus dat heb ik weer weg gehaald. Het is net of de tekst ergens achter vliegt, maar waar achter kan ik ook niet verzinnen. Hoe groot de LI ook is, de tekst blijft door streept in die oude versie.

[Fuzzillogic]

a { line-height: 0px;}

waarom die?

[DAMAGE]

Ik dacht dan komt de tekst vast wel wat naar boven.

Het is nu bijna klaar, er moet alleen nog voor gezorgd worden dat de tekst in de LI's wat naar boven toe gaat.. De a dus eigenlijk.

Maar overal staat de margin en de padding al op 0. Dus de tekst zou eigenlijk helemaal niet naar beneden verplaatst mogen worden?

Ik ben er nu achter dat IE7 dus line-height: 0px; niet goed ondersteund.. Want dat heeft wel effect op de andere browsers maar niet op die IE7. Is er een ander foefje voor?

IE7 en daar beneden heeft dus een line-height bug... Ik ben aan het googlen ondertussen voor een oplossing.

[ Voor 31% gewijzigd door DAMAGE op 24-09-2009 11:29 ]

[DAMAGE]

FIXED!

Voor iedereen die dit probleem ook heeft:

ik had deze code:

code:

#sfrickoptions a:link, #sfrickoptions a:visited{
    position: static;
    display: block;
    color: #666666;
    padding: 0;
    margin: 0;
    font-weight: normal;
    padding-left: 6px;
    padding-top: 14px;
    height: 25px;
    
}

Deze heb ik veranderd naar:

code:

#sfrickoptions a:link, #sfrickoptions a:visited{

    color: #666666;
    padding: 0px;
    margin: 0px;
    padding-top: 3px;
    padding-left: 8px;
    font-weight: normal;
}

Ook toen ik de position static weg haalde werkte het nog niet. Ook niet toen de display block weg was. Ik denk dat het te maken heeft gehad met de height die daar was ingevuld. Deze was wel precies goed, maar waarschijnlijk gaat windows daar icm line-height niet goed mee om. Vreemd!

Intressante artikelen om te lezen hier over;

http://www.positionisever...plorer/lineheightbug.html
http://meyerweb.com/eric/...08/unitless-line-heights/