Spry Menu in Internet Explorer en andere CSS opmaak

[Crossdesigner]

Hallo,
In Dreamweaver heb ik de functie Spry Menu gebruikt om een horizontaal menu met submenu te maken. In de browsers zoals Firefox, safari en Chrome geen problemen.
De boosdoener is Internet Explorer.
Ik krijg dat het submenu naar rechts verschuift, terwijl dit niet in de CSS is opgenomen. Het menu moet gewoon naar beneden uitklappen.
Verder krijg ik de standaard opmaak van een link en visited link, terwijl dit in de CSS ook is aangepast.

Los van het menu heb ik twee iconen een vaste plek gegeven. IE vind dat ze veel verder naar beneden moeten staan dan dat ik heb aangegeven.
Hoe kan ik bovenstaande met CSS-code ondervangen?
Zit me nu suf te zoeken, waar dat in kan zitten.

Hopelijk is het simpel op te lossen.

Mvg
Crossdesigner

 

[csshunter]

Hoi Crossdesigner,
Welkom op het forum!

Zonder verdere gegevens is het koffiedik kijken wat IE (alles versies: IE7, IE8, IE9 ?) uithaalt, en hoe daar tegengas aan gegeven kan worden.
Heb je een link naar een testpagina?

Met vriendelijke groet,
CSShunter

 

[Crossdesigner]

Hallo CSS hunter,

Fijn dat je reageert op mijn vraag.

Het betreft onderstaande website. Ik heb geen testomgeving.

http://www.hp-m.nl/pages/watbiedthpm.php

Ik ben benieuwd wat ik hier aan kan doen. Als er een andere manier is om dit menu te maken, hoor ik het ook graag. Ik heb ook aan de nav tag gedacht in html5/ css3, maar daar ben ik nog niet helemaal in thuis.

 

[csshunter]

Hoi Crossdesigner,

Eerst even de LinkedIn en Twitter-icoontjes
In Internet Explorer is bij absoluut gepositioneerde elementen vaak expliciet nodig om de top en/of de left positie op nul te zetten.
De icoontjes zijn hier ook in IE op hun plek te brengen door in het css-stylesheet op te nemen:

#linkedin, 
#twitter {
	top: 0;
	}

=======
Dan de vette borders in IE om de submenu-items
Die komen doordat het hier images zijn binnen een link. Met de gewone css voor een link zijn die niet aan te passen, maar wel door de images zelf binnen een link te verbieden er een rand omheen te zetten:

a img {
	border: 0;
	}

=======
En dan de IE-verschuiving van het submenu
Huuu! Die automatische Spry-menu's van Dreamweaver zijn prachtig als ze werken, maar wee je gebeente als ie het niet doet!
Kom er dan maar eens achter in de wirwar van classes als "ul.MenuBarHorizontal a.MenuBarItemSubmenuHover" (die er ook nog eens via javascript aan toegevoegd worden) wat er aangepast moet worden om het in IE te laten werken...
Met geduldig puzzelen blijkt:

• Het is de centrering van de tekst van de hoofd-items, die de subitem-positie voor IE uit balans brengt.
  Die {text-align: center;} moet er uit.
• Om toch links en rechts van de tekst van de hoofd-items wat ruimte te krijgen, kunnen die een padding-left en padding-right krijgen.
• Paddings worden opgeteld bij de opgegeven breedte van een element; daarmee past het menu niet meer op de regel. Daarom kan de breedte van de hoofd-items op automatisch gezet worden (ipv de huidige opgegeven breedte).

In de css wordt het dan:

ul.MenuBarHorizontal li {
	text-align: left;
	width: auto;
	}

ul.MenuBarHorizontal li a {
	padding: 0 1em;
	}

=======
In de praktijk

• Test: bliksekaters.nl/tests/hpm-nw.htm
• Komt er goed door in IE7, IE8 en IE9

=======
Maar ... er zitten helaas nog wat andere struikelpunten in het ontwerp.
Ik kom daar later nog op terug.
Alvast eentje: in regel 4 van de pagina-code staat:

...
<meta charset=UTF-8">

Daar mist een aanhalingsteken, het moet zijn:

...
<meta charset="UTF-8">

Dat is de reden waarom de html-validator bij deze pagina zijn werk niet kan doen (die geeft dit resultaat).

Met vriendelijke groet,
CSShunter

 

[Crossdesigner]

Bijna tevreden...

Hallo CSShunter,

Super blij met je uitgebreide respons :d .
Alle opmerkingen heb ik verwerkt in mijn scripts.
In eerste instantie dacht ik dat het nog niet goed was gekomen. Ik bekeek het resultaat in IE en was niet tevreden met wat ik zag. Opeens vroeg ik me af in welke IE versie ik aan het kijken was. Bleek dit 6 te zijn. Vervolgens van computer gewisseld (hier zit versie 8 op) en toen werd ik helemaal blij. Geweldig dit is precies wat ik wilde. Ik moet nu alleen nog wat bijschaven.

Op de Ipad werkt een menu als deze niet. Nu hoeft dat in dit geval niet, maar weet jij toevallig hoe ik dit type menu ook geschikt kan maken voor de Ipad?

Heel erg bedankt voor je tijd en hulp.

Crossdesigner