css menu probleem - Softwareontwikkeling

maandag 3 juli 2006 12:10

Acties:

Verwijderd

Topicstarter

Hallo,

heb een klein probleem met mijn css menu. alles netjes opgemaakt met UL tag. in firefox ziet deze er goed uit, maar in IE (hoe kan het ook anders) lukt het niet om het goed weer te geven.

daar heb ik een extra streep onder onze service. (zie afbeelding hieronder)
Afbeeldingslocatie: http://www.yourpreview.nl/lex_prive/afbeelding.gif

Afbeeldingslocatie: http://www.yourpreview.nl/lex_prive/afbeelding.gif

nu heb ik al diverse css sites bezicht en staar ik al uren naar hetzelfde probleem, maar kom er niet uit. dus hoop ik dat een van jullie weet waar het probleem ligt.

kunnen jullie me wellicht helpen? alle hulp is welkom.
hieronder nog de xhtml en css erbij ..

alvast bedankt.
Lex

code:

<ul id="menu"> 
         <li id="b_home"><a href="#">Home</a></li> 
         <li id="b_producten"><a href="#">Onze producten</a></li>
            <ul class="submenu"> 
               <li id="item2_1"><a href="#">Item 1</a></li> 
               <li id="item2_2"><a href="#">Item 2</a></li> 
               <li id="item2_3"><a href="#">Item 3</a></li> 
               <li id="item2_4"><a href="#">Item 4</a></li> 
            </ul> 
         <li id="b_service"><a href="#">Onze service</a></li> 
         <li id="b_medewerkers"><a href="#">Onze medewerkers</a></li>
            <ul class="submenu"> 
               <li id="item4_1"><a href="#">Vacatures</a></li> 
               <li id="item4_2"><a href="#">Even voorstellen</a></li> 
               <li id="item4_3"><a href="#">Item 3</a></li> 
               <li id="item4_4"><a href="#">Item 4</a></li> 
            </ul>
         <li id="b_nieuws"><a href="#">Nieuws</a></li> 
         <li id="b_contact"><a href="#">Contact</a></li> 
         <li id="empty">&nbsp;</li> 
</ul>

en de css

code:

#menu {
    font: normal 1.20em Arial, Verdana sans-serif;
    width: 158px;
    list-style-type: none;
    margin: 29px 0 0 0;
}

#menu li {
    padding: 6px 0;
    background: transparent url(../images/line-horizontal.gif) no-repeat top left;
}

#menu li a:link,
#menu li a:visited {
    color: #8c1029;
    text-decoration: none;
    background: transparent url(../images/arrow-normal.gif) no-repeat 2px 3px;
    padding: 0 0 0 14px;
    display: block;
}

#menu li a:hover,
#menu li a:active {
    color: #8c1029;
    font-weight: bold;
    text-decoration: none;
    display: block;
}

#container #menu .submenu {
    xbackground: transparent url(../images/line-horizontal.gif) no-repeat top left;
    margin: 0 !important; margin: 6px 0 -6px 0;
    padding: 6px 0 !important; padding: 6px 0;
}

#container #menu .submenu li {
    padding: 1px 0 1px 10px;
    list-style-type: none;
    background: none;
}

#container #menu .submenu li a:link,
#container #menu .submenu li a:visited {
    background: url(../images/rode-lijn.gif) no-repeat 6px 8px;
    display: block;
}

#container #menu .submenu li a:hover,
#container #menu .submenu li a:active {
    color: #8c1029;
    font-weight: bold;
    text-decoration: none;
    display: block;
}

#container #menu #empty {

}

maandag 3 juli 2006 12:34

Acties:

crisp

Devver

Pixelated

Valideer je HTML eens want die is niet helemaal correct

Intentionally left blank

maandag 3 juli 2006 12:37

Acties:

Verwijderd

Topicstarter

crisp schreef op maandag 03 juli 2006 @ 12:34:
Valideer je HTML eens want die is niet helemaal correct

ik heb mijn submenu ook al genest in de LI, maar dat werkte ook al niet.

dus zo:

code:

<ul>
<li>item 1</li>
<li>item 2
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
</ul>
</li>
<li>item 3</li>
<li>item 4</li>
</ul>

maar ook dat werkte niet ..

maar ik zal het iig weer terugzetten zodat het valideert.
iemand anders nog suggesties?

maandag 3 juli 2006 12:39

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

code:

<ul> 
         <li>Home</li> 
         <li>Onze producten</li>
            <ul class="submenu"> 
               <li>Item 1</li> 
               <li>Item 2</li> 
               <li>Item 3</li> 
               <li>Item 4</li> 
            </ul> 
         <li>Onze service</li>

een versimpelde versie van de HTML-code waar het misgaat ...

zoals je ziet, bij de eerste LI waarin de submenu staat [d]sluit je de LI niet af (iets wat an sich mag in HTML4.01), maar de volgende LI sluit je weer wél af ....
Daarin ligt hoogstwaarschijnlijk de fout[/s]

ah, ik zie nu dat je eerst de LI afsluit en dan de nieuwe UL van het submenu opent ... dat is natuurlijk helemáál niet goed, tussen een afsluitende LI en het volgende Listitem opentag mag geen andere tags staan.

[ Voor 17% gewijzigd door RM-rf op 03-07-2006 12:41 ]

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

maandag 3 juli 2006 12:45

Acties:

Verwijderd

Topicstarter

code:

<ul id="menu"> 
         <li id="b_home"><a href="#">Home</a></li> 
         <li id="b_producten"><a href="#">Onze producten</a>
            <ul class="submenu"> 
               <li id="item2_1"><a href="#">Item 1</a></li> 
               <li id="item2_2"><a href="#">Item 2</a></li> 
               <li id="item2_3"><a href="#">Item 3</a></li> 
               <li id="item2_4"><a href="#">Item 4</a></li> 
            </ul> 
         </li>
         <li id="b_service"><a href="#">Onze service</a></li> 
         <li id="b_medewerkers"><a href="#">Onze medewerkers</a>
            <ul class="submenu"> 
               <li id="item4_1"><a href="#">Vacatures</a></li> 
               <li id="item4_2"><a href="#">Even voorstellen</a></li> 
               <li id="item4_3"><a href="#">Item 3</a></li> 
               <li id="item4_4"><a href="#">Item 4</a></li> 
            </ul>
         </li>
         <li id="b_nieuws"><a href="#">Nieuws</a></li> 
         <li id="b_contact"><a href="#">Contact</a></li> 
         <li id="empty">&nbsp;</li> 
    </ul>

heb de xhtml nu als volgt .. en dit valideert wel (net gecheckt)
dus neem aan dat de html code nu goed is. echter probleem blijft bestaan.
en daar snap ik echt geen hout van.

sommige woorden komen nu naar boven geborreld wat ik graag over IE wil zeggen, maar goed laat ik dat maar niet doen .. hahah

als er nog andere guru's zijn ..
ik houd me aanbevolen.

iig hartelijk dank voor alle input tot zover.

maandag 3 juli 2006 12:45

Acties:

hamsteg

Species 5618

Heb je al gekeken of de css code correct is? Alles lijkt goed gedisplayed te worden bij mij in IE maar als ik met firefox --> tools --> javascript console bekijk staat daar:

code:

1
2
3

Error: Unknown property 'xbackground'.  Declaration dropped.
Source File: file://localhost/d:/test.html
Line: 38

Persoonlijk vind ik het wel erg veel CSS code voor zoiets simpels en vind ik het helemaal vreemd dat je het submenu ineens met classes gaat werken terwijl daarvoor alles op basis van ID's is. Het container ID snap ik ook niet. Maak twee classes; menu en submenu. vang alle a:xxx onder 1 noemer en niet voor elk ID opnieuw definieren, huidige implementatie maakt onderhoud en fouten zoeken alleen maar moeilijker.

Su6 !

[ Voor 11% gewijzigd door hamsteg op 03-07-2006 12:49 ]

Niet quoten, zorgvuldige reacties volgens de regels worden zo weggewerkt: *knip*, reactie op geknipte reactie.

maandag 3 juli 2006 12:47

Acties:

mithras

offtopic:
hier stond onzin

[ Voor 86% gewijzigd door mithras op 03-07-2006 12:48 ]

maandag 3 juli 2006 12:58

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

hamsteggot schreef op maandag 03 juli 2006 @ 12:45:

Persoonlijk vind ik het wel erg veel CSS code voor zoiets simpels en vind ik het helemaal vreemd dat je het submenu ineens met classes gaat werken terwijl daarvoor alles op basis van ID's is. Het container ID snap ik ook niet. Maak twee classes; menu en submenu. vang alle a:xxx onder 1 noemer en niet voor elk ID opnieuw definieren, huidige implementatie maakt onderhoud en fouten zoeken alleen maar moeilijker.

Dat is volgens mij absoluut correct.... het menu is natuurlijk uniek en dan kun je gewoon met ID werken en vervolgens voor child-elementen met classes omdat die elementen meermaals voorkomen...

de IDs aan LI's gekoppeld zullen wel voor eventuele scripting zijn, de CSS gebruikt die verder niet (en terecht, dat moet je idd niet doen, dan moet je werken met classes en eventuele tags)..
Hooguit vind ik een CSS met twee ID-selectors een beetje 'overdone': (#container #menu dat is overbodig, aangezien er sowieso geen andere #menu kàn bestaan ... maar dat zijn kleine details die de fout niet kunnen veroorzaken)...

Om dit probleem te debuggen moet je volgens mij uitvinden welk element die extra lijn genereert..
meestal doe ik dat zelf door borders om alle elementen te genereren (Firefox dev-tools heeft daar een speciale snelle optie voor; voor msie zul je dat handmatig moeten doen)..
mogelijk kan het ook komen doordat een background 'tiled' (alhoewel hier alles op no-repeat lijkt te staan )..
Een andere mogelijk heid is dat de negatieve margin problemen oplever (die margin: -6px;... met negatieve margisn heb ik ook wel vaker gedonder gehad)

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

maandag 3 juli 2006 13:07

Acties:

Verwijderd

Topicstarter

Om dit probleem te debuggen moet je volgens mij uitvinden welk element die extra lijn genereert..
meestal doe ik dat zelf door borders om alle elementen te genereren (Firefox dev-tools heeft daar een speciale snelle optie voor; voor msie zul je dat handmatig moeten doen)..
mogelijk kan het ook komen doordat een background 'tiled' (alhoewel hier alles op no-repeat lijkt te staan )..
Een andere mogelijk heid is dat de negatieve margin problemen oplever (die margin: -6px;... met negatieve margisn heb ik ook wel vaker gedonder gehad)

dat was 'm .. super de super bedankt....

alle id's in de LI's zijn inderdaad voor de programmeurs. Dit menu wordt straks namelijk helemaal dynamisch. Voor iedere bezoeker een ander menu. De reden dat ik een Id heb gebruikt voor mijn menu en CLASS voor mijn submenu is simpelweg omdat het submenu steeds weer terugkomt en de andere elementen niet.

zoals het hoort geloof ik :-)

ten slotte .. die twee selectors #container #menu heb ik puur alleen neergezet omdat het in eerste instantie niet goed werkte en om zo alle opmaak van parents op children te ondervangen.

dat gaat er straks weer uit.

in ieder geval hartelijk dank voor het meedenken. superbedankt allemaal

maandag 3 juli 2006 13:26

Acties:

hamsteg

Species 5618

RM-rf schreef op maandag 03 juli 2006 @ 12:58:
Dat is volgens mij absoluut correct.... het menu is natuurlijk uniek en dan kun je gewoon met ID werken en vervolgens voor child-elementen met classes omdat die elementen meermaals voorkomen...

de IDs aan LI's gekoppeld zullen wel voor eventuele scripting zijn,

Ik heb geen moment gezegd dat het fout was ... nog steeds ben ik echter van mening dat het hebben van twee classes beter is. Programmeertechnisch hebt je gewoon twee groupjes van LI's. Dat het menu in dit voorbeeld toevallig 1 maal gebruikt wordt hoeft niet altijd zo te zijn. De essentie van classes is dat je een specifieke definitie maakt voor bepaalde elementen. Met IDs kun je ze dan uniek maken maar styling blijft gelijk. Ik vind het inconsequent om de ene keer met ID te werken en de andere eerst op basis van de class, dat is gewoon mijn beperkte ik.

Het gebruik van IDs vind ik hoofdzakelijk voor JS gebruik. Natuurlijk zijn er soms specifieke opmaak elementen die je op ID basis moet stylen maar voor mij is dat een uitzondering.

Niet quoten, zorgvuldige reacties volgens de regels worden zo weggewerkt: *knip*, reactie op geknipte reactie.

maandag 3 juli 2006 13:46

Acties:

Verwijderd

Topicstarter

OK .. nu snap ik wat je zegt. Is eigenlijk best zinnig

Zal het eens proberen zo om te bouwen. Kan idd wel veel code schelen.

Trouwens .. in mijn huidige code heb ik een lege LI (onderaan) moeten zetten om het
onderste streepje daar te krijgen. Is daar ook een andere manier voor met li:before of li:after (methode) in de CSS?

Bedankt voor de input allemaal .. jullie hebben me echt onwijs geholpen.
Waardeer ik zeer.

maandag 3 juli 2006 14:02

Acties:

hamsteg

Species 5618

Ik vind dit een mooie oplossing, een lege regel. Je kunt verschillende uitzonderingen maken, speciale classes of op basis van ID maar bij dit soort dingen is dat altijd geknutsel. Even commentaartje erbij omdat je aangaf dat meerdere mensen dit gingen gebruiken en klaar ...

Niet quoten, zorgvuldige reacties volgens de regels worden zo weggewerkt: *knip*, reactie op geknipte reactie.

maandag 3 juli 2006 14:05

Acties:

Verwijderd

Topicstarter

Duidelijk ... bedankt

$_/-\o_$