Navigatie CSS IE7

Status
Niet open voor verdere reacties.
S

samcappelle05

Gebruiker
Lid geworden
8 aug 2007
Berichten
43
Hallo,

Ik heb volgend probleem met m'n navigatie. Het gaat om een html list die met images werkt. Via de css hover worden de items in het wit geplaatst. Het menu werkt perfect in Firefox en IE8, maar niet in IE7. Zie foto's:

Firefox
ff.png


IE7
ie7.png


Kheb de code met de images toegevoegd aan een zipje. Gewoon uitpakken en de index.htm openen in IE7.

Weet iemand wat hier het probleem is?

Alvast bedankt
 

Bijlagen

Laatst bewerkt:
Weet iemand wat hier het probleem is?
Klik om te vergroten...
Jazeker, dat weten we allemaal: Internet Explorer is het probleem. :D
Iets anders is het vlooien op een hackje om de IE-bugs weg te jagen. De gangbare dingen uit het arsenaal van PIE gaven niet 1-2-3 soelaas. Maar ...
In dit geval doet #nav li a { vertical-align: top; } de trick. Het werkt ook in IE6, en verstoort IE8 en FF enz. ook niet. Dat spaart weer een conditional comment. ;)

Dan zou ik voor de veiligheid ook even de { display: none; } van de <span> er uit halen, want het schijnt dat een aantal tekstbrowsers dat heel letterlijk nemen, en óók niets van de <span> laten merken. Met buiten beeld plaatsen gaat het in elk geval goed: { position: absolute; margin-left: -9999px; }.

Leuk ontwerpje, trouwens!
Met vriendelijke groet,
CSS-hunter
 
prachtig!

Hoi Sam,
Animatie: subtilo, mmm! :)
En alles ook nog helemaal keurig unobtrusive javascript. :) (voor andere lezers: wasda?)
Dit was natuurlijk alleen een testpagina voor de hover, maar als er nog even een php-header boven komt met nogmaals de charset, en een lang="nl" in de <html> en een <title>'tje (aldus), dan wordt het deze, en komt ie helemaal ongeschonden door de Quick Scan van het Kwaliteitsmodel Websites!

En ik zie dat er ook nog een heel mooi uitklapbaar #subnav aan zit te komen. Ik word wel heel nieuwsgierig! Is het te veel gevraagd om hier een link te posten als alles klaar is?

Met vriendelijke groet,
CSS-hunter
 
knutsels

Kben ook nog even aan de knutsel geweest. ;)
Het zou wat gebruiksvriendelijker zijn om ook een stukje naast de hover-tekst van de items te kunnen klikken, bedacht ik; en daar het volgende op gevonden.
Als je met een soort css pop-up techniek een trappetje maakt met wat extra <span>'netjes, dan wordt het hele schuine menu-item aanklikbaar, alsof het een schuine knop is.
Met de trappetjes doorzichtig ziet het effect er zo uit voor alle items: een area-affect zonder image en zonder area. Nobody knows! :)

CSS-hunter
 
Bedankt voor alle goede tips!

Kheb de navigatie geplaatst in de site. En nog wat voorlopige foto's toegevoegd.

==> http://www.samcappelle.be/


edit: Heb het trapje toegevoegd zoals in je vorige post, maar net zoals de jouwe doet die het niet optimaal in IE7 (weeral) :D
 
Laatst bewerkt:
altijd dezelfde...

... doet het niet optimaal in IE7 (weeral) :D
Klik om te vergroten...
Hè! In de trappetjes zichtbaar versie deed ie het wel :confused: (het is ook niet de toevoeging van de trappetjes bij de andere items, die interfereert; dan doet ie het ook nog). Grrrmpf! - Je mag ook nóóit vergeten IE nog eens extra te stress-testen ... schaamte bevangt mij. :o
 
En toch gaan we IE bij zijn lurven pakken! :)
  • Stap 1: { background: transparent; } ipv { background: none;} ? Helpt niet.
  • Stap 2: Als IE een "niet bestaande background" niet rendert, wat doet ie dan met een border? De border-test! Even nauwkeurig muizen, en het blijkt dat precies het 1px border-randje wèl de link hoevert, maar de binnenkant binnen de border nog steeds niet.
  • Stap 3: Maar dan maken we het hele trappetje tot border! De full-border test. Ha, IE7 doet het nog steeds.
  • Stap 4: Bibber, nu de border transparant maken..., en voor FF enzo de { background: none; } er weer in...
    Triomf! IE7 trapt er in! :D
Even ademhalen.
Stap 5: IE8? :)
Stap 6: En IE6? - Bij mij doet die het niet meer, maar in jouw laatste versie nog wel. - Dus toch een conditional comment.
Stap 7: FF, Opera, Safari, Chrome, Seamonkey? Als te verwachten, alles ok.

Gegroet!
CSS-hunter
 
Idd, jouw border doet de trick. Kheb de navigatie ook werkend gekregen in IE6 zonder conditional comment. Althans volgens NetRenderer... :confused:

Omdat IE6 geen borders die transparant zijn aanneemt heb ik ze in dashed gezet i.p.v. solid. Had ooit eens gelezen omdat het eerste streepje van dashed transparant is de volledige border transparant wordt. :shocked:

Grtz

Sam
 
Hoi Sam,
Had ooit eens gelezen omdat het eerste streepje van dashed transparant is de volledige border transparant wordt.
Klik om te vergroten...
Daar moet je óók maar tegenaan lopen! ;)
navigatie ook werkend gekregen in IE6 althans volgens NetRenderer...
Klik om te vergroten...
Mijn virtuele PC met Win98SE en IE6 zegt hetzelfde: hij doet het prima in IE6, ook de uitklappers. *) **) :D
Alleen de pointer bibbert een beetje als je over het menu gaat > zeker bang geworden van onze hackjes. :p
En het totaal: ziet er flashy uit zonder flash (en zonder alle toegankelijkheidstoestanden die flash met zich meebrengt). Proficiat!

Gegroet,
CSS-hunter

*) Misschien nog zo maken, dat de uitklapper weer dichtklapt bij een tweede klik op het item dat 'm deed uitklappen, zodat je niet een ander item of "home" hoeft aan te klikken om 'm te resetten. - Hé, ik zie geen "home", is dat hetzelfde als "about"? Of komt de home-link nog onder je logo?

**) Zelfs IE5.5 lijkt het te doen, weliswaar wat schots-en-scheverig, en alleen op het middengedeelte klikbaar, maar het menu blijft werken. - Getest met Multiple IE's (die is niet 100% betrouwbaar, heb ik gemerkt; maar ik denk dat het hier wel zal meevallen).
 
Laatst bewerkt:
Hih, stom van me. Khad VirtualBox nog staan van vroeger met XP en IE6 geïnstalleerd. En inderdaad, hij doet het prima. :D Nu nog de footer, de content en wat fine-tuning.

Bedankt voor alle tips en hulp CSS-hunter! :thumb:

Groeten

Sam
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan