[CSS] Probleem met IE: list items verspringen omhoog

[Verwijderd]

Ik heb een probleempje waar ik niet uit kom, waarschijnlijk omdat ik niet op de goede zoekwoorden kan komen.
Op de volgende website:
http://www.clouso.nl/beta/index.html
verspringen alle items in de navigatie bar.
ze doen dit alleen in IE, niet in firefox.

Heeft iemand een idee waarom ze dit doen en wat ik kan doen om ze op te laten houden?
Op verzoek kan ik de code hier neer gooien, maar die staat dus ook online.

[Woudloper]

Zo te zien heeft het te maken met de .floatright class die je op je image heb staan. Wellicht kan je nog eens hier kijken naar voorbeelden van het stylen van list items.

Verder zou ik hetgeen zoals je het nu hebt opgelost (door de image in de list te plaatsen) anders oplossen. Sematisch gezien zou het beter zijn als je gewoon tekst in je list items plaatst en de images met behulp van background (op list item) op je pagina te plaatsen. Kijk maar eens hoe het hier op GoT en op de FP is opgelost...

[Noork]

Zoveel CSS heb je hiervoor totaal niet nodig. Waarom niet gewoon zo?

code:

<div id="top">
            [img]"http://www.clouso.nl/beta/images/clouso.gif"> 
            <img[/img]
            [img]"http://www.clouso.nl/beta/images/divider.gif">
            <img[/img]
            [img]"http://www.clouso.nl/beta/images/divider.gif">
            <img[/img]
            [img]"http://www.clouso.nl/beta/images/divider.gif">
            <img[/img]
            [img]"http://www.clouso.nl/beta/images/divider.gif">
            <img[/img]
            [img]"http://www.clouso.nl/beta/images/divider.gif">
            <img[/img]
            [img]"http://www.clouso.nl/beta/images/divider.gif">            
            <img[/img]
</div>

En nog een punt: de plaatjes zijn in z'n totaal volgens mij te breed voor de site.(op bovenstaande manier dan)

[ Voor 18% gewijzigd door Noork op 07-09-2005 00:13 ]

[Woudloper]

Noork schreef op woensdag 07 september 2005 @ 00:09:
Zoveel CSS heb je hiervoor totaal niet nodig. Waarom niet gewoon zo?

Ik denk dat de TS het juist'em wel in de list wil laten staan ivm de sematiek, maar dat hij daar nog beter wat over kan lezen. Zie dit artikel geschreven door chem...

[Sappie]

float je list items in plaats van je images

code:

#navigation li { float: right; }

verder is het niet nodig deze ul (met id 'navigation') nog in een div te gooien. De css die je nu toepast op de div met id 'top' kun je namelijk net zo goed toepassen op de ul met id 'navigation'. Scheelt je weer wat overbodige markup

[ Voor 8% gewijzigd door Sappie op 07-09-2005 00:15 ]

[crisp]

De plaatjes worden hier gebruikt ter vervanging van tekst, derhalve is het opmaak en hoort het in CSS thuis (als background-images).

[ Voor 10% gewijzigd door crisp op 07-09-2005 00:16 ]

[Verwijderd]

Sappie schreef op woensdag 07 september 2005 @ 00:15:
float je list items in plaats van je images

code:

#navigation li { float: right; }

verder is het niet nodig deze ul (met id 'navigation') nog in een div te gooien. De css die je nu toepast op de div met id 'top' kun je namelijk net zo goed toepassen op de ul met id 'navigation'. Scheelt je weer wat overbodige markup

Helemaal niks laten floaten, en lekker alles inline plaatsen. De dividers sowieso als achtergrondafbeelding van de li elementen, en de teksten als achtergrond van de a elementen. Vervolgens geef je deze zoveel padding-top dat de tekst buiten de regel valt, overflow: hidden; doet de rest.

En uiteraard haal je die div niet weg, maar vervang je die door een map element.

[Verwijderd]

don´t shoot me, i´m a beginner
ik heb het al gedeeltelijk opgelost, de plaatjes waren te breed, en de float overbodig
ik buig me morgen over de rest van jullie suggesties

edit:
zodra ik er uit ben met wie van jullie ik het eens moet zijn

[ Voor 18% gewijzigd door Verwijderd op 07-09-2005 00:20 ]

[Sappie]

Verwijderd schreef op woensdag 07 september 2005 @ 00:18:
[...]

Helemaal niks laten floaten, en lekker alles inline plaatsen. De dividers sowieso als achtergrondafbeelding van de li elementen, en de teksten als achtergrond van de a elementen. Vervolgens geef je deze zoveel padding-top dat de tekst buiten de regel valt, overflow: hidden; doet de rest.

En uiteraard haal je die div niet weg, maar vervang je die door een map element.

Ben niet helemaal helder meer, maar idd beter gewoon van de li's inline elementen maken. De padding-top zou ik persoonlijk niet gebruiken.. zou dit gewoon oplossen met een span die je dmv css onzichtbaar maakt.

Wat je verder met die imagemap wilt is me niet helemaal duidelijk

[Verwijderd]

Sappie schreef op woensdag 07 september 2005 @ 00:25:

Wat je verder met die imagemap wilt is me niet helemaal duidelijk

Daarmee kun je aangeven dat het een navigatie-mechanisme is. Zie de HTML 4.01 en WCAG 1.0 recommendations..

quote: http://www.w3.org/TR/html401/struct/objects.html#h-13.6.1

The MAP element specifies a client-side image map (or other navigation mechanism) that may be associated with another elements (IMG, OBJECT, or INPUT). An image map is associated with an element via the element's usemap attribute. The MAP element may be used without an associated image for general navigation mechanisms.

[Sappie]

Verwijderd schreef op woensdag 07 september 2005 @ 12:02:
Daarmee kun je aangeven dat het een navigatie-mechanisme is. Zie de HTML 4.01 en WCAG 1.0 recommendations..

achso.. weer wat geleerd heb het ook nog nooit op die manier gebruikt zien worden, maar op weg naar dé semantisch meest verantwoorde HTML lijkt me het idd gepast dit te gebruiken.

[Verwijderd]

Ik ben weer even bezig op mijn vrije middag, je doet wat met dit mooie weer

De div is vervangen door een map element, en de dividers zijn ingesteld als achtergrond van de list elementen. Echter, van de rendering klopt nu niets meer In ie klopt de centrering niet, en zowel in ie als in ff worden de dividers niet weergegeven.

Ik wil uiteindelijk toe naar een menu waarbij de images veranderen op :hover en op :active, maar ik zit al een uur te prutsen nu.

Iemand suggesties?

Code is te vinden op http://www.clouso.nl/beta


ARGH
Het spijt me zeer hoor maar die list items willen dus met geen mogelijkheid een background image laden. Als ik van die div een map maak, dan klopt de rendering niet meer, en ik begin semantisch verantwoord bezig zijn al aardig zat te worden.
Gelukkig was ik niet van plan professioneel webdesigner te worden en blijf ik lekker vrijwilliger voor de lol...
Ik ga wel aan de slag met het in elkaar draaien van een foto galerij dingetje op basis van div´s ofzo, heb het ff gehad met dit menu.

[ Voor 38% gewijzigd door Verwijderd op 23-09-2005 15:45 ]

[Verwijderd]

Klein kickje:

Zouden de mensen die mij eerder in dit topic geholpen hebben me nog eens een stapje verder kunnen helpen misschien?
Ik krijg het niet voor mekaar op de manier die jullie me aanbevolen, maar ik wil het best graag netjes en correct semantisch doen, ik kom er alleen niet uit in mn eentje

[Verwijderd]

Nog 1 keer dan, maar als niemand meer zoiets heeft van, ik heb DE goede tip om je probleem op te lossen, dan ga ik lekker onsemantisch verantwoord verder hoor!
Ik doe het echt!

[Sappie]

Ik heb even gekeken naar je html / css (hij rendert het nu in zowel IE als FF tzelfde als ik het goed zie hè?).

- Wanneer je van de div een map maakt lijkt hij deze niet meer in het midden uit te lijnen. Dit los je op door "text-align: center" op de body toe te passen. Uiteraard dien je er rekening mee te houden dat de rest van de elementen dit inherit van de body, wat niet de bedoeling is.
- Om de list items te voorzien van een achtergrond die je daadwerkelijk ziet dien je natuurlijk het list-item groter te maken dan dat hij wordt door er een plaatje in te zetten. Dit doe je uiteraard door middel van het toepassen van padding (in jouw geval wss right) op een li. Vervolgens geef je het achtergrondplaatje op:

code:

#top ul li {
  padding: 0 20px 0 0; /* breedte van het separator plaatje */
  background: url("8ergrondplaatje") no-repeat top right;
}

Denk dat je hiermee wel een eindje moet kunnen komen. Als je er niet uit komt kijk ik nog wel ff mee

Verder heb ik nog een tip: Zoals je hierboven in de code al "#top ul li" ziet staan kun je ook werken. Aangezien je de div (en later dus de map) een id hebt gegeven en het enige daarin een ul element is, is het netter het op deze manier te doen. Je hoeft dan de ul en li's geen id respectievelijk class mee te geven. Dit heeft alles te maken met CSS specificity.

[ Voor 8% gewijzigd door Sappie op 25-09-2005 17:39 ]