css: links nemen niet de volle breedte (IE only)

[anoniem]

Ik heb ff snel een menuutje gemaakt: http://members.lycos.nl/marienssite/menutest.htm Wanneer je over een menuitem gaat in FF, krijgt de link de volle breedte van de li waar die in zit. In IE echter niet, daar gaat de padding er van af. Is dat op te lossen. Of ben ik veel te moeilijk bezig en hoeft t helemaal niet in een lijst? (dat heb ik gedaan adhv suckerfish) Ik wil het hebben zoals het er nu uitziet in FF, dus de breedte afhankelijk van de tekst, en het volledige gebied dat gehovert wordt moet ook de link zijn. In Netscape ziet t er niet zo uit als in FF, Opera gedraagt zich nu als IE. Is het ook goed in Safari? (NB:"excuses voor de Lycos-reclame)

[anoniem]

Dat komt omdat IE het box-model anders implementeert dan FF. In IE geldt als "width" de margin+border+padding+breedte inhoud, in FF alleen "breedte inhoud" (wat correct maar wel onlogisch is). Bij mij werkt het trouwens gewoon in IE. EDIT: oh, nou zie ik het probleem. Bij de a moet je width waarschijnlijk op 100% ipv auto zetten.

[anoniem]

Ik zie geen verschil? Of heb je al opgelost? Weetje wat wel HEEL raar is: Als ik in FF op de knopjes druk herlaad hij gewoon de pagina terwijl hij in IE een totaal andere pagina gaat laden :-?

[anoniem]

@Stijn: dat over het boxmodel wist ik wel ongeveer, maar vooral de vraag is hoe moet ik t oplssen. De a-width op 100% zetten resulteert in IE dat de links de volle breedte worden en dus onder elkaar komen te staan. Het werkt wel, maar zoals je volgens mij kunt zien is dat de links niet de hele breedte innemen. NB ik was vergeten een regeltje daarvoor neer te zetten, NU is het wel te zien (Excuses!). Dit resulteert erin dat wanneer je binnen het gehoverde valk bent, maar buiten de link, die dus niet werkt. Dat Safihre geen verschil zag is dan ook wel logisch. Die links: raar...

[anoniem]

Oke ik denk dat ik vandaag er niet goed bij ben... Alles werkt hier nog steeds perfect... ik snap echt niet wat er fout is :cry:

[anoniem]

Ik weet niet of je er vandaag goed bij ben. Ik zie toch echt (IE6.0.blablabla) dat wanneer ik vanaf onderen zon vakje in ga, ik niet direct op de link zit (zowel aan de onderlijning die nog ontbreekt als aan de statusblak) , en pas wanneer ik mn muis op de letters houdt ik op de link zit.

[anoniem]

[quote:0a0eaec506="marientje"]Ik weet niet of je er vandaag goed bij ben. Ik zie toch echt (IE6.0.blablabla) dat wanneer ik vanaf onderen zon vakje in ga, ik niet direct op de link zit (zowel aan de onderlijning die nog ontbreekt als aan de statusblak) , en pas wanneer ik mn muis op de letters houdt ik op de link zit.[/quote:0a0eaec506]Ooooooh... Waarom doe je dan geen onMouseOver op die LI's dat hij dan de style van text-decoration op underline laat zetten door JS?

[anoniem]

das misschien niet de netstse manier, maar t gaat wel werken, denk ik... Hartstikke beadnkt!

[anoniem]

[quote:069b84d9c9="marientje"]das misschien niet de netstse manier, maar t gaat wel werken, denk ik... Hartstikke beadnkt![/quote:069b84d9c9]Achja.. soms moet je ook om die irritante IE dingen heen werken (zoals het alleen kunne toepassen van hovers op A) met JS. Ik bedacht net dat we jammer genoeg hier nog wel lang aan vast zullen zitten, zelfs als straks IE 7 wel CSS goed ondersteund zal het gebruik van IE 6 nog zo groot zijn dat er nog steeds JS dingen voor geschreven moeten worden :roll: Lang leven MS! :P

[anoniem]

Ik zou het doen zoals beschreven staat in het [url=http://css.maxdesign.com.au/listutorial/]Listutorial[/url] (tutorial 2), waarbij voor jouw specifieke geval op de a:hover 'text-decoration: underline;' zou moeten worden toegevoegd. Werkt dan zonder gebruik van javascript, ook in IE.

[anoniem]

boelieboelie, bedankt voor de link Het is toch niet helemaal wat ik wil. Ik wil namelijk ook een balk over het hele beeld, en volgens mij is die dan niet meer te realiseren. Ik denk dat ik het of maar laat zoals het is, of wat javascript toevoeg.

[anoniem]

Euh sorry ik zei iets verkeerd, het moest tutorial 4 zijn. Bovendien had ik die balk ff over het hoofd gezien. Maar m.b.v. wat aanpassinkjes aan tutorial 4 is het nog steeds te realiseren. [code:1:907f145ac5] #navcontainer ul { margin: 0; padding: .2em 0; list-style-type: none; text-align: center; display: block; background-color: #036; } #navcontainer ul li { display: inline; } #navcontainer ul li a { text-decoration: none; padding: .2em 1em; color: #fff; background-color: #036; } #navcontainer ul li a:hover { color: #fff; background-color: #369; text-decoration: underline; }[/code:1:907f145ac5] D.w.z.:[list:907f145ac5] [*:907f145ac5]ul als block tonen; [*:907f145ac5]ul dezelfde padding en background-color als a geven; [*:907f145ac5]a:hover underline meegeven. [/list:u:907f145ac5]Of zie ik nog steeds iets over het hoofd?

[anoniem]

[quote:7399767836="boelieboelie"]Euh sorry ik zei iets verkeerd, het moest tutorial 4 zijn. Bovendien had ik die balk ff over het hoofd gezien. Maar m.b.v. wat aanpassinkjes aan tutorial 4 is het nog steeds te realiseren. Of zie ik nog steeds iets over het hoofd?[/quote:7399767836] Dat t tut 4 moest zijn had ik al ontdenkt, en met wat aanpassingen kwam ik al in de richting, maar ik dacht dat de laatste stap niet mogelik was. Ik zal er vanmiddag (hoop ik dan) ff naar kijken. Bedankt!

[anoniem]

Bedankt boelieboelie, dit werkt perfect. De padding-left en -rght hoeft zelfs niet gelijk te zijn aan die van a, als de padding-top en -bottom maar dezelfde zijn.