IE6 en IE7 menuweergave

[dit kan niet]

Goeiemorgen,

Ik ben bezig onze site aan te passen, bij wijze van test heb ik op het volgende adres al enkele bestanden geupload: http://www.vanalphenbladel.nl/nieuwepopeyesite/

Voor mij is dit allemaal nieuw (css), omdat ik voorheen mbv frames en tabellen de site in elkaar zette. Okay, de index pagina heeft nog tabellen, maar daar kwam ik zo 1-2-3 niet uit, hoe dat anders te doen...
Nu naar het probleem:

Ik had begrepen van iemand met IE6 of 7 dat de "menubalk", niet goed stond. Deze zou teveel naar rechts staan. Omdat ikzelf FF 3.... en IE8 heb, kan ik dit probleem zelf niet zien. Bij mij wordt een en ander goed geplaatst, maar aangezien 30% van de bezoekers IE7 gebruikt en nog steeds 8% IE6... zou ik graag willen weten, waar het probleem door veroorzaakt wordt.
Via browsershots.org heb ik deze afbeelding. Hier zie je duidelijk het probleem.

Link naar style.css bestand

 

[MooF]

Ja zal waarschijnlijk een aparte css stylesheet moeten hebben voor je menu voor IE-gebruikers. Dit omdat IE echt helemaal k*t is en dit niet altijd de standaard script kan laden of hier problemen mee heeft.

Wat er precies in dat andere stylesheet zou moeten staan weet ik niet, maar waarschijnlijk zal dat wel helpen.

 

[dit kan niet]

??
Is dit nu een voordeel van css? Voor iedere browser een apart css bestand maken?
Kan niet de bedoeling zijn lijkt me.
Waarschijnlijk zie ik een klein dingetje over het hoofd of staat er iets dubbel? Wanneer ik marges van de #nav verander, geeft dat iig niet het gewenste resultaat.

 

[dit kan niet]

Het lijkt erop dat het probleem opgelost is.

Na een hele hoop dingetjes geprobeerd te hebben met de css editor van Kompozer, gaf dit geen resultaat. Nadat ik bij de optie "opruimen" links had gekozen, was het in IE6 opgelost.
Of het in IE7 ook opgelost is weet ik niet.

In de css code voor de #nav staat nu:

#nav {
  top: 130px;
  line-height: 20px;
  position: absolute;
  width: 800px;
  clear: left;
}

De laatste regel lijkt ervoor te zorgen dat het in IE6 nu goed weergegeven wordt.
Als ik dan kijk waar de clear property voor is
"The clear property specifies which sides of an element where other floating elements are not allowed."
Dan vraag ik me af welk element IE6 dan langs mijn menu liet floaten?

 

[csshunter]

Hoi dit kan niet,
Dit kan wel: probleem ook in IE7 opgelost.

• Zie verse browsershots op verschillende resoluties.

In "aanvraaggroep 4" geeft IE6 onder Win2000 geen beeld; zou aan die server kunnen liggen, want IE6 onder WinXP doet het bij mij prima op alle resoluties. - O, een herzien verzoek in "aanvraaggroep 5" doet het wel, zal wel ergens een kromme bit onderweg geweest zijn.

... maar er is wel nog iets anders met het menu aan de hand.
Als de bezoeker in Firefox de lettergrootte wat groter instelt, dan verdwijnen de laatste twee items van het menu:

D.w.z. eigenlijk verdwijnen ze niet echt, maar ze zijn onder de menuregel terechtgekomen, op de witte achtergrond (en hebben witte letters, dus dat gaat mis):

Omdat alle menu-onderdelen zo stuik op elkaar zitten, en er geen vrije ruimte in de menu-regel is, kan je dit oplossen door de menu-regel een automatische hoogte te geven. Dan blijft de rode achtergrond bestaan op de twee regel, en schuift zo nodig ook de "Home" <h1> (en de rest) door naar beneden.

• Alternatief: als je het hele menu persé op die ene regel wilt laten staan, kan je het probleem ondervangen met image-knoppen en een hover-variant die met css bediend wordt (1 image voor alle menu-items, rest css; voorbeeld).

Met vriendelijke groet,
CSShunter
[Edit]
Herstel: de menu-<ul> heeft al geen opgegeven hoogte. De rode background zit in de header met opgegeven hoogte van 150px. De #nav staat absoluut gepositioneerd op 130px van boven, maar heeft geen achtergrondkleur. Oplossing wordt dan het toevoegen van:

#nav { background: red; }
#content { margin: 25px 10px 10px 10px; }

De 15px extra margin-top laat de #content dan ook bij een tweede menu-regel er onder zitten.[/edit]

 

[csshunter]

O, je vraag nog!

Dan vraag ik me af welk element IE6 dan langs mijn menu liet floaten?

Ik denk dat het Engelse vlaggetje is, dat links gefloat staat. IE6 en IE7 kunnen kennelijk niet begrijpen dat een erop volgend absoluut gepositioneerd element er niet rechts van moet komen (ook al staat het er mijlenver onder, en is er breedte genoeg).
We hebben:

[FONT="Courier New"][SIZE="2"]breedte vlaggetje:         25px
img.left  { margin-left:    5px; } /* binnen de link! */
img.left  { margin-right:   5px; } /* binnen de link! */
#header a { padding-left:   8px; } /* binnen de link! */
#header a { padding-right:  8px; } /* binnen de link! */
                           ====
totale link-breedte .....: 51px[/SIZE][/FONT]

(= er is extra klik-ruimte rechts van het vlaggetje)
En laat die 51px nu exact de opschuiving van de #nav volgens het Browsershots-IE-screenshot zijn!

Met vriendelijke groet,
CSShunter

 

[dit kan niet]

CSSHunter,

Kijk eens aan... Jij weet waar je het over hebt... Het kan wel, ja. Wat jij allemaal verteld (uit de mouw schud) is voor mij momenteel nog een beetje wartaal, maar ik ga een en ander proberen en hoop zo wijzer te kunnen worden.
Wat je aangeeft, van dat vlaggetje, dat zou goed kunnen zijn, dat het daar aan lag. Wat ik ook veranderde, de "inspring" bleef hetzelfde.
Dus "clear left" moet erbij enkel voor IE...

Ik heb ook FF (3.5), maar ik krijg het niet voor elkaar om de lettergrootte te veranderen... "ctrl +", maar dan wordt alles groter en blijft menu "intakt". Maar ik zal, de aangedragen oplossing proberen.
Bedankt voor de reactie.

EDIT: Ik heb gevonden hoe ik enkel de lettergrootte (met dubbel "oo" en dubbel "tt") kan veranderen. (->Beeld->Zoomen->Enkel tekst zoomen...)
Ook de aanpassingen gedaan #nav achtergrondkleur en extra top margin voor de content, lijkt nu te werken. Het menu is eigenlijk te groot (teveel keus vind ik) een dropdownmenu laat de keus makkelijker lijken? En hoe zit dat dan met zoekmachines en zo'n dropdownmenu?

 

[dit kan niet]

Hallo,

De link vanalphenbladel.nl/nieuwepopeyesite/ zal niet meer werken.
Vanaf nu staat de nieuwe site gewoon op vanalphenbladel.nl
Voor zover ik kan zien zijn de mankementen eruit?