[CSS] Dropdown probleem IE7/8

[Noctonix]

Hi!

Ik ben voor een klant bezig met een website. Echter in ie7/8 gaat hij niet helemaal zoals ik wil (zoals gewoonlijk ).

Ik wil dat alle dropdown items dezelfde breedte aanhouden. dus alle items moeten de breedte overnemen van het breedste item.

Omdat het menu aan te passen valt binnen het CMS krijgt hij geen vaste breedtes mee.

Ik heb hier een JSfiddle Klik! Zoals hij er nu uitziet.



In IE 7/8 nemen de minder brede items de breedte over van het hoofditem.. (zonder padding/margin)
Ik gok dat er iets in de CSS niet helemaal goed gaat..

[TheNephilim]

JSFiddle doet het niet in IE8, dus dat is best lastig testen

[C0rnelis]

TheNephilim schreef op vrijdag 08 november 2013 @ 15:13:
JSFiddle doet het niet in IE8, dus dat is best lastig testen

Het eindresultaat (hoe het nu is) is wel te bekijken: http://fiddle.jshell.net/andywillekens/azY8c/1/show/light/

[DJMaze]

Jouw probleem (en altijd bij iedereen) is FLOAT!
Je moet even heel goed leren wat "float" precies doet en waarom het "bad practice" is.
Om die ouwe meuk die per april 2014 verboden is (MSIE 7/8) te ondersteunen moet je inderdaad gaan klooien met "float:left" i.p.v. "display:inline-block"

Cascading Stylesheet:

ul li { float:left; }
ul ul li { float: none; display: block; }

[ Voor 3% gewijzigd door DJMaze op 08-11-2013 20:42 ]

[NNF]

Ik vermoed ook dat het probleem veroorzaakt wordt door dit soort dingen:

Cascading Stylesheet:

.head-menu ul li {
    float: left;
    position: relative;
    margin:0 10px 0 0;
}

Zodra je nu ul's gaat nesten wordt het vervelend, want die erven -wellicht onbedoeld- ook weer deze eigenschappen en dat kan vervelende bijeffecten hebben. Het is in mijn ervaring vaak beter om zo specifiek mogelijk te zijn, bijv. door de child selector (>) te gebruiken.

Ik heb de CSS weggegooid en heb het even snel opnieuw gemaakt, dit lijkt wel goed te gaan in IE7:

http://jsfiddle.net/99c83/3/

P.S.: '0px' is onzin Gewoon 0!

[ Voor 3% gewijzigd door NNF op 09-11-2013 14:40 ]

[R4gnax]

Ik heb echt teveel tijd

Hoe dan ook; bovenstaande werkt in IE7 en hoger en alle andere browsers en bevat ook nog een leuk trucje voor keyboard accessibility. Probeer die maar eens te ontleden en er wat van te leren.