[CSS] weergave IE5.x windows

[Vinzzz243]

Met de simplified box model hack kan ik het probleem dat zich voordoet als je dit voorbeeld bekijkt in IE5.x, omzeilen.
(Ik bekijk dit via een standalone versie van IE5.x (dus naast mn andere browsers))

Echter moet ik dan wel weten hoe. Met margins en paddings spelen kom ik er niet uit. Ik heb naar mijn mening alles goed gestyled, maar er gebeurt iets vreemds in IE5.x Als ik de pagina open, staan alle menu items verkeerd, en waneer ik hover gaan ze goed staan en blijven ze goed staan...
Voor de duidelijkheid er een groene border omheen gedaan.
Sorry voor de brakke layout in de code, heb het ff willen rippen, om geen 'reclame' te maken.

Wie kan me vertellen waar dit aan ligt, of me een nuttige link over dit probleem geven?

[JayVee]

Nou, in mijn IE 5.5 standalone ziet het er prima uit hoor. Precies hetzelfde als in FireFox.

Je weet wel wat precies het probleem is met IE 5/Win he: Als je margin, padding of border EN width aangeeft trekt hij alles van width af (ipv optellen).

// edit:
Altijd je code validaten voordat je bugs gaat zoeken en gaat posten!

//edit2:
Als je de code al ript om reclame te vermijden, haal dan ook de tekst en link uit de footer! Niet dat ik het erg vind hoor!

[ Voor 35% gewijzigd door JayVee op 15-09-2004 23:12 ]

[JayVee]

Ik ga niet weer editen
Bij de originele site zie ik wel fouten in IE5.5! Buttons zijn rechts uitgelijnd en hebben nog een blokje drek kleven aan de rechter bovenhoek!

[Vinzzz243]

JayVee schreef op 15 september 2004 @ 23:07:
Nou, in mijn IE 5.5 standalone ziet het er prima uit hoor. Precies hetzelfde als in FireFox.

Inderdaad. IE5.5 wel ja tis de 5.01 die o.a. niet goed gaat,zie ik nu.Die url van je ga ik morgen eens doornemen. ik heb inderdaad zo'n aparte mapjes van ie versies. maybe dat ik een 'slechte' erbij heb.

JayVee schreef op 15 september 2004 @ 23:07:
altijd je code validaten voordat je bugs gaat zoeken en gaat posten!

Buiten het feit dat ik de echte site nog moet ombouwen (omdat ik paar li's en een verloren target en paragraafje verkeerd heb) is hij verder valid heb deze versie snelsnel geript en gekeken of de bug in de geripte versie nog bestond, maar terechte opmerking!

JayVee schreef op 15 september 2004 @ 23:07:Als je de code al ript om reclame te vermijden, haal dan ook de tekst en link uit de footer!

grappig, dacht echt dat alles weg was naja, nu wel.

JayVee schreef op 15 september 2004 @ 23:16:Buttons zijn rechts uitgelijnd en hebben nog een blokje drek kleven aan de rechter bovenhoek!

Klopt ja, daar heb ik de hack nog niet toegepast

JayVee schreef op 15 september 2004 @ 23:07:
Je weet wel wat precies het probleem is met IE 5/Win he: Als je margin, padding of border EN width aangeeft trekt hij alles van width af (ipv optellen).

Ik ga eens verder stoeien met jouw reactie!

[ Voor 63% gewijzigd door Vinzzz243 op 16-09-2004 01:37 ]

[Vinzzz243]

Ik heb ernaar gekeken, en inderdaad, het probleem doet zich alleen voor als je de 3 linkjes in het menu een width meegeeft.

Is er een manier om width mee te geven aan alle browsers (en een andere IE dan 5.x) behalve IE5.x ?

Maybe dat iemand een handige url voor me heeft waar dit soort hacks opgesomd staan om code voor bepaalde browsers of versies te verbergen cq tevoorschijn te halen?

[JayVee]

Ja, de IE5.5 CSS hack.
Kijk eens naar Eric Meyer on CSS, en dan met name (voor dit geval) naar "The voice-family Hack".

[Vinzzz243]

Qua layout krijg ik de 'bug' opgelost. Echter krijg ik het nu niet meer voor elkaar om het totale menu (breedte van ongeveer 200pixels) clickable te maken...in IE5.x dus.

Als ik de width's bij de A weghaal in de css, komt het menu er goed in te staan, maar is dan alleen clickable door op de tekst te klikken...

Heb de code wat gestript: www.vinzzz.nl/got

[ Voor 32% gewijzigd door Vinzzz243 op 18-09-2004 21:13 ]

[JayVee]

Sja, IE snapt :hover alleen bij anchors, en ook dan alleen bij de tekst zelf. Denk dat je het alleen met javascript ok kunt lossen.

[Vinzzz243]

IE6 snapt dat wel, tis net IE5 en 5.5 hmz...naja, ik wil geen js gebruiken, dan maar geen 100% clickable area

[Grijze Vos]

Wat ik heb gedaan is de a's een display: block meegeven, hoogte en breedte opgeven, en je bent klaar.

[Vinzzz243]

Grijze Vos schreef op 19 september 2004 @ 01:46:
Wat ik heb gedaan is de a's een display: block meegeven, hoogte en breedte opgeven, en je bent klaar.

zeker weten? want ik heb er al display:block en width in staan

[JayVee]

Ook in IE6 is alleen de tekst clickable en "hoverable" als je block level links maakt. I'm seriouslah!

[Vinzzz243]

JayVee schreef op 19 september 2004 @ 10:50:
Ook in IE6 is alleen de tekst clickable en "hoverable" als je block level links maakt. I'm seriouslah!

ok weird, bij mij (IE6) is gewoon de hele hyperlink clickable?

[JayVee]

In dat voorbeeld wel ja. Maar "normaal" niet. Check hier een oud voorbeeld van mij.

HTML:

<style type="text/css">
div#div_nav a {
  display: block;
  background-color: red;
}

div#div_nav a:hover {
  background-color: blue;
}
</style>

<div id="div_nav">
  <h1>Navigation</h1>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <p class="nav">Dude</p>
  <p class="nav">What does mine say?</p>
</div>

Het hoveren (link cursor, clickable en achtergrond kleur) werkt @ IE alleen bij de tekst zelf!

[ Voor 29% gewijzigd door JayVee op 19-09-2004 15:15 ]

[Vinzzz243]

Sorry, maar ik snap jouw punt niet wat probeer je me nu uit te leggen, want als je jouw linkjes gewoon een breedte meegeeft, werkt het gewoon wel hoor.

de vraag was of en zoja, hoe ik het voor elkaar krijg om in IE 5.x ook het menu helemaal clickable te krijgen...

[JayVee]

Vinzzz schreef op 19 september 2004 @ 23:54:
[...] want als je jouw linkjes gewoon een breedte meegeeft, werkt het gewoon wel hoor.

Ah! Dat wist ik niet. Dat werkt idd prima @ IE! Ook in 5.5 trouwens!

De links in jouw voorbeeld zijn trouwens ook helemaal clickable in mijn IE5.5. Of was dat het probleem niet (meer)?

[Vinzzz243]

JayVee schreef op 20 september 2004 @ 11:01:
[...]De links in jouw voorbeeld zijn trouwens ook helemaal clickable in mijn IE5.5. Of was dat het probleem niet (meer)?

Het probleem ligt bij IE 5.0. Ook daar is de hele link clickable, maar omdat ik daarvoor een width moet opgeven, wordt de combinatie width,padding en margin IE5 te veel en layout ie het menu verkeerd...

[JayVee]

Dan vrees ik dat je een "Download FireFox" moet gebruiken om het probleem te fixen!
Wie gebruikt er nou nog IE 5.0? Maar goed, moest het daar echt in werken kan je alleen nog proberen de margin te verplaatsen naar de padding van de parent. En de padding naar de margin van je children. Maar ja, met de links wordt dat erg lastig tot onmogelijk.