Menu vervormd in IE

[LaRaLoVeR]

Hallo,

Ik ben bezig met 'n website te maken, en stuit op het volgende probleem:

In Firefox ziet mijn menu er perfect uit, maar in IE komt er onder elk deel van mijn menu (zijn afbeeldingen met een hyperlink achter) een dubbele stippellijn, waardoor mijn menu uitrekt.

Zie screenshot (links is IE (met stippellijn), rechts is Firefox):

http://img152.imageshack.us/img152/9075/screenrr0.jpg

Ik heb lang zitten zoeken naar de fout, maar vind 't niet. Weet iemand hoe ik dit wegkrijg? Hopelijk vind ik 'n oplossing voor het probleem!
Ik veronderstel dat dat iets met die hyperlink heeft te maken? Of een fout in mijn code?

Hier is 'n link van de (voorlopige) website: http://www.trias.be/nieuwesitetrias/index.html
Je kan altijd zowel eens kijken in IE als FF, dan zie je wat ik bedoel.

Thanks!


EDIT: Intussen heb ik al gemerkt dat die 'stippellijn' de achtergrond is van mijn website die er doorkomt. Wat wil zeggen dat mijn menu niet helemaal aansluit ofzoiets... Dit kreeg ik echter pas nadat ik die rollover maakte. Is er iemand dat 'n oplossing weet?

[sander1]

De snelste oplossing is om je </td> terug te halen naar de vorige regel waar je </a> staat. Om het duidelijker te maken:

Niet zo:
<img name="overons" src="http://www.trias.be/images/menu/overons.jpg" border="0" height="26" width="149"></a>
</td>Maar zo:
<img name="overons" src="http://www.trias.be/images/menu/overons.jpg" border="0" height="26" width="149"></a></td>Dan is het probleem weg. Er staat me iets van bij dat het ook met CSS op te lossen moet zijn, maar ik kan dat even niet terug vinden...

[Energy Design]

Wat ook voor dit probleem kan zorgen is dat IE altijd 3 pixels onder een image plakt. (Ik weet niet of dit komt door het probleem wat Sander omschrijft, maar dat zou ook best eens kunnen:))
Dit is simpel op te lossen door de volgende regel CSS toe te voegen:
.menuClass img{
margin-bottom:-3px;
}

Waarbij de menuClass uiteraad je menu-onderdeel is:)

[LaRaLoVeR]

Thanks voor de reactie!
Dat eerste lukt vanzelf, dus eigenlijk is het opgelost! Maar ik zou graag mijn code zo net mogelijk hebben, daarom zou ik het graag eens met oplossing 2 proberen (de CSS). Maar dat lukt me eigenlijk niet. Kan iemand me vertellen waar het precies in mijn CSS code moet? (kopieer desnoods mijn CSS en plaatrs dat ertussen waar het hoort...)

Alvast bedankt!!

Koen

[Energy Design]

Ik zou je graag helpen maar je site staat nu niet online?

Ps. de site onder gaat een hele verbetering!
zo als trias.be nu is kan echt niet meer maar met je nieuwe ontwerp is de site weer helemaal up to date (H)

[LaRaLoVeR]

Heb 'm terug online geplaatst! Dus als je wil mag je me altijd helpen!
De oude Trias site heb ik niet gemaakt trouwens, ik doe het nu in opdracht van iemand anders. ;) Fijn dat je die beter vind!

[sander1]

Een margin-bottom van -3px opnemen zou het probleem misschien verhelpen voor IE, maar andere browsers (die het standaard correct weergeven) zullen dan de items weer 3 pixels te laag tonen. Of je moet weer een aparte Internet Explorer stylesheet gebruiken (en koppelen m.b.v. conditional comments).

Ik had het probleem laatst zelf met een list waarbij IE 2 à 3 pixels teveel toonde onder elk list-element. De oplossing daar was om voor het li-element in de stylesheet dit op te nemen:vertical-align: bottom;Misschien werkt dit voor jou ook als je dit opneemt voor het opliggende element (de td geloof ik in jouw geval).