Header werkt niet correct in IE

[soccerke]

Hey,

Ik ben een website aan het ontwerpen. En in google chrome en firefox werkt de header wel juist, maar in IE niet.
De naam van het bedrijf wordt maar half getoond, en het menu wordt halverwege op de volgende regel geplaatst terwijl dit in chrome en firefox gewoon mooi op 1 lijn staat.

De website kan je vinden op: http://users.telenet.be/fridobroekx/

Dan nog een vraagje, op de pagina's met de foto's van producten kan je in chrome en firefox gewoon op heel de kader klikken om de pagina van het product te krijgen, maar in IE niet, daar kan je alleen klikken in de kader waar geen foto of tekst staat. De html-code hiervan is:

<a href="bloembakstrafael.html">
		<div>
		        <h3>Bloembak Saint Rafael</h3>
			<img src="images/buiten/overige/bloembak1.jpg" alt="" />
		</div>
</a>

Ik had op internet gevonden dat het opgelost zou moeten zijn door dit toe te voegen in de css:

a {
  overflow: hidden; 
  cursor: pointer;
}

Maar ook dan werkt het niet correct, dan komt er wel al het 'handje' te staan, maar ik kan nog niet overal klikken. (Op de website is deze css nog niet toegevoegd, heb het lokaal uitgeprobeerd)

Hopelijk kan iemand mij helpen! Alvast bedankt!

 

[soccerke]

Oke, het eerste probleem heb ik nu al opgelost.

Blijf wel nog de link in de kader die niet werkt in IE.

En heb nog een 2e probleem ontdekt, ik werk met een dropdown menu, maar de dropdown verschijnt in IE achter mijn sliderbalk. Heb al wat gespeeld met de z-index, maar niets lijkt te werken.
Kan iemand mij helpen met deze 2 problemen?

Alvast bedankt!

 

[csshunter]

Hoi soccerke,
Dit:

<a href="bloembakstrafael.html">
        <div>
                <h3>Bloembak Saint Rafael</h3>
            <img src="images/buiten/overige/bloembak1.jpg" alt="" />
        </div>
</a>

... zit in een verkeerde volgorde (en is ook invalid html, zegt de html-validator - altijd eerst even checken, zie m'n handtekening. )

Een <a> is een inline-element, een <div> is een block-element; en een block-element mag niet binnen een inline-element staan (wel andersom).
Wat er nu gebeurt, is dat browsers op de onjuiste html-code hun eigen fout-afhandeling gaan toepassen, en daar zijn geen vaste regels voor. In dit geval kan IE er niet mee overweg, de rest wel.

Maar de hele <div> kan gemist worden als je het zo doet:

<h3>
    <a href="bloembakstrafael.html">
        Bloembak Saint Rafael
        <img src="images/buiten/overige/bloembak1.jpg" alt="" />
    </a>
</h3>

... met:

#content h3 {
    border: 2px solid #808080;
    float: left;
    font-family: 'Droid Sans',Tahoma,Arial,sans-serif;
    font-size: 1em;
    margin: 10px 10px 0 1px;
    text-align: center;
    text-transform: none;
    width: 285px;
}
#content h3 a {
    display: block;
    padding: 10px;
    text-decoration: none;
}
#content img {
    height: 180px;
    margin: 7px 0;
    padding: 0;
    width: 245px;
}

Nu zit de link <a> met z'n tekst en afbeelding keurig binnen de <h3>, de breedte van de <h3> zorgt ervoor dat het <img> na de tekst op de volgende regel springt, en een {display: block} voor de <a> zorgt dat alles binnen de <h3> aanklikbaar is.
Dat zou het ook in IE moeten doen.

=======
oho!
Nu zie ik dat er een frameset Doctype boven staat maar het is helemaal geen frameset!
=======

Het verdwenen submenu in IE.
Er wordt in de niveau-slider nogal flink met lagen en z-indexen gespeeld. IE7 wordt gered met toevoegen van:

#header {
    ....
    z-index: 10;
    }

Met vriendelijke groet,
CSShunter