[css] uitlijning menu probleem

[NeORay]

Hallo allemaal,

Op het moment ben ik bezig met het maken van een menu dat dynamisch gevuld wordt. De opmaak hiervan wordt verzorgd door een css file.
Na behoorlijk lang tobben heb ik het nu helemaal voor elkaar. In Internet Explorer tenminste..
In Firefox maakt 'ie er nog een zootje van.
Hieronder een plaatje met het verschil tussen IE en FF.
Links zie je alleen het hoofdmenu. Rechts (na een mouseover op het hoofdmenu) met het submenu ernaast.




En hier de CSS code:

Cascading Stylesheet:

#menu {
    width: 100px;
    position:absolute;
    left:0px;
    top:203px;
    float:left;
    height: 35px;
}

#menu ul {
    list-style: none;
    margin:0;
    padding: 0;
}

#menu a, #menu h6 {
    font: bold 13px arial, helvetica, sans-serif;
    display: block;
    margin: 2;
    background-image:none;

}

#menu h6 {
    color: #FFFFFF;
}

#menu a {
    color: #FFFFFF;
    width:231px;
    text-align:left;
    text-decoration: none;
    border:none;
    padding-top: 8px;
    padding-bottom: 9px;
    padding-left: 70px;
    padding-right: 4px;
    background-image:url(images/button_14.gif);
}

#menu a:hover {
    color: #000000;
    border:none;
    background-image:url(images/buttonpush_11.gif);
}

#menu li {
    position:relative;
    float: left;
    text-align:center;
    width:0% !;
}

#menu li li {
    position:relative;
    left: 235px;
    top:-35px;
    text-align:left;
    border-left:1px solid #FFFFFF;
    border-bottom:1px solid #FFFFFF;
    border-right:1px solid #FFFFFF;
    background:#000000;
    filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;
    background-repeat: repeat-x;
    background-position: left top;
    padding: 0px;
    width: 130px;
    margin: 0px;
}

#menu li li a {
    font-weight:normal;
    border-bottom:0px dotted #FFFFFF;
    font-size: 11px;
    background-image: url(images/arrowsub3.gif);
    background-repeat: no-repeat;
    background-position: left center;
    margin-left: 5px;
}

#menu li li a:visited {
    font-weight:normal;
    border-bottom:0px dotted #FFFFFF;   
    font-size: 11px;
}
#menu li li a:hover {
    color: #ff0000;
    border-top:0px dotted #FFFFFF;
    border-bottom:0px dotted #FFFFFF;
    border-left: 0px solid #FFFFFF;
    background:none;
}

#menu ul ul {
    position: absolute;
  z-index: 500;
  width: 1px; 
}

#menu ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
}

#menu ul ul {
    display: none;
}

#menu ul ul, #menu ul li:hover ul ul, #menu ul ul li:hover ul ul {
    display: none;
}

#menu ul li:hover ul, #menu ul ul li:hover ul, #menu ul ul ul li:hover ul {
    display: block;

}

Ik heb zelf al een beetje zitten zoeken. Ik ben er al wel achter dat het probleem hoogst waarschijnlijk ligt bij padding-left: 70px bij menu a.
Ik heb deze echter wel nodig om de tekst 70px van de linkerkant te laten uitlijnen..
Misschien dat ik dat ander moet doen?

Nou hoe dan ook. Ik hoop dat ik het probleem een beetje helder heb neergezet en natuurlijk dat jullie me 'n beetje verder kunnen helpen!

BVD!

[BtM909]

Kan je je probleem een beetje isoleren. Je gaat mij niet wijsmaken dat je 117 regels CSS code nodig hebt voor een simpel menuutje. Een relevante testcase is ook handig (die eventueel online staat). Daarnaast zijn we ook heel nieuwsgierig naar hetgeen wat je zelf al hebt zitten zoeken. Simpelweg vermelden is niet voldoende

Daarnaast kan je code tussen [code=css][/] blokken plaatsen; zie ook: Overzicht van UBB-codes #tag_code

[Rekcor]

<knip>

[ Voor 99% gewijzigd door Rekcor op 14-03-2007 11:07 . Reden: Was gezeur ]

[NeORay]

BtM909 schreef op woensdag 14 maart 2007 @ 10:00:
Kan je je probleem een beetje isoleren. Je gaat mij niet wijsmaken dat je 117 regels CSS code nodig hebt voor een simpel menuutje. Een relevante testcase is ook handig (die eventueel online staat). Daarnaast zijn we ook heel nieuwsgierig naar hetgeen wat je zelf al hebt zitten zoeken. Simpelweg vermelden is niet voldoende

Daarnaast kan je code tussen [code=css][/] blokken plaatsen; zie ook: Overzicht van UBB-codes #tag_code

Al deze code is toch echt voor dat menu'tje..
Maar met zoeken bedoelde ik dat ik gewoon veel in de code heb zitten proberen en rommelen. Ik heb toen ondekt dat die padding left van 70px in ieder geval het probleem veroorzaakt in FF.
Deze padding is te vinden bij #menu a {}
Het is een menu met Mouseover bij de menu-items. Deze mouseover betreft een verandering van de tekstkleur en het verschijnen van een submenu zoals te zien op de rechterkant van de afbeelding.
Ik hoop eigenlijk dat jullie aan de afbeelding genoeg hebben want een testcase online zetten is nog even lastig.

[NeORay]

Rekcor schreef op woensdag 14 maart 2007 @ 10:05:
[...]


http://gathering.tweakers...9/topics?data%5Bpage%5D=1

Bovendien vind ik het wel prettig als wij ook wat vaker van jouw kennis mogen profiteren (of begin ik een ouwe zeur te worden? )

toevallig had ik net zitten zoeken of ik ook ergens iemand kon helpen nu ik hier toch op GOT hang.
maar helaas kon ik niet echt iets vinden waar ik iemand echt mee verder kon helpen..
maar ik zal m'n best doen voortaan wat meer van toegevoegde waarde te zijn op GOT.

[ Voor 7% gewijzigd door NeORay op 14-03-2007 10:19 ]

[BtM909]

NeORay schreef op woensdag 14 maart 2007 @ 10:10:
[...]


Al deze code is toch echt voor dat menu'tje..

Dan is er wat mis met je menu en / of je code

Maar met zoeken bedoelde ik dat ik gewoon veel in de code heb zitten proberen en rommelen. Ik heb toen ondekt dat die padding left van 70px in ieder geval het probleem veroorzaakt in FF.
Deze padding is te vinden bij #menu a {}
Het is een menu met Mouseover bij de menu-items. Deze mouseover betreft een verandering van de tekstkleur en het verschijnen van een submenu zoals te zien op de rechterkant van de afbeelding.

Meldt dat dat ook voortaan in je startpost, maakt het voor ons een stukje makkelijker ipv steeds maar te gissen naar wat je misschien ooit hebt geprobeerd

Ik hoop eigenlijk dat jullie aan de afbeelding genoeg hebben want een testcase online zetten is nog even lastig.

Het feit dat online zetten lastig wordt, geeft eigenlijk al dat je probleem niet goed genoeg is geisoleerd (tenzij je probleem met hosting zelf hebt )

---

En let even op het feit dat als je als laatste reageert dat je de gebruikt ipv steeds een nieuwe reply. Je weet hopelijk ook dat door middel van je voorkeur Toon laatste berichten? je voorgaande berichten ziet bij het reageren en dus direct meerdere berichten kan quoten?

[ Voor 14% gewijzigd door BtM909 op 14-03-2007 10:40 ]

[NeORay]

BtM909 schreef op woensdag 14 maart 2007 @ 10:38:

[...]

Meldt dat dat ook voortaan in je startpost, maakt het voor ons een stukje makkelijker ipv steeds maar te gissen naar wat je misschien ooit hebt geprobeerd


[...]

Het feit dat online zetten lastig wordt, geeft eigenlijk al dat je probleem niet goed genoeg is geisoleerd (tenzij je probleem met hosting zelf hebt )

dat had ik al gedaan. Blijkbaar niet duidelijk genoeg alleen:

NeORay schreef op woensdag 14 maart 2007 @ 09:38:
Ik ben er al wel achter dat het probleem hoogst waarschijnlijk ligt bij padding-left: 70px bij menu a.
Ik heb deze echter wel nodig om de tekst 70px van de linkerkant te laten uitlijnen..
Misschien dat ik dat ander moet doen?

BtM909 schreef op woensdag 14 maart 2007 @ 10:38:

[...]

Het feit dat online zetten lastig wordt, geeft eigenlijk al dat je probleem niet goed genoeg is geisoleerd (tenzij je probleem met hosting zelf hebt )

Dat ik het niet online kan zetten komt doordat ik nog zit te wachten op serverruimte die ook van buitenaf te benaderen is. Nu kan ik er alleen intern bij. Het is een systeem met CMS dus dat kun je niet zomaar even op elke host neerknallen.

[ Voor 26% gewijzigd door NeORay op 14-03-2007 10:59 ]

[BtM909]

Het is een systeem met CMS dus dat kun je niet zomaar even op elke host neerknallen.

De code is uiteindelijk toch echt client-side spul, dus dat ergens online zetten (en dus je probleem isoleren ) heeft niks met je CMS te maken

[NeORay]

BtM909 schreef op woensdag 14 maart 2007 @ 11:01:
[...]


De code is uiteindelijk toch echt client-side spul, dus dat ergens online zetten (en dus je probleem isoleren ) heeft niks met je CMS te maken

ja, maar dan is er geen menu content..
Het probleem lijkt me toch opzich wel duidelijk op de afbeelding??

[BtM909]

Probleem is duidelijk, maar verwacht je van ons dat wij je plaatje gaan aanpassen, zodat je een oplossing hebt?

[NeORay]

BtM909 schreef op woensdag 14 maart 2007 @ 12:01:
Probleem is duidelijk, maar verwacht je van ons dat wij je plaatje gaan aanpassen, zodat je een oplossing hebt?

Als het online staat kunnen jullie het toch ook niet aanpassen?
Het gaat me er om hoe ik voorkom dat de uitlijning in Firefox helemaal misloopt met css.
Misschien is er een andere manier dan die ik gebruik om de tekst 70px van links, links uit te lijnen?

[BtM909]

NeORay schreef op woensdag 14 maart 2007 @ 12:07:
[...]


Als het online staat kunnen jullie het toch ook niet aanpassen?

Ja hoor*

* dmv: Firebug, EditCSS, Firebug lite, downloaden en lokaal testen

[NeORay]

voorbeeldje online gekregen:
http://83.149.84.130/~c3494aeb/bdi/index.php?section=1

[moozzuzz]

NeORay schreef op woensdag 14 maart 2007 @ 12:07:
[...]
Misschien is er een andere manier dan die ik gebruik om de tekst 70px van links, links uit te lijnen?

Ik gebruik al een tijdje suckerfish als menu en dat loopt als een trein :^)

[NeORay]

moozzuzz schreef op woensdag 14 maart 2007 @ 18:12:
[...]

Ik gebruik al een tijdje suckerfish als menu en dat loopt als een trein :^)

ja, maar ik heb geen idee hoe ik dat dan dynamisch kan koppelen aan het CMS.

[Pendaco]

Je zou eerst eens kunnen beginnen om een volledige doctype op te geven;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

of

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

In plaats van

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

[Abomination]

Maak images/button_14.gif eens 1 pixel breed

in: "#menu a {" vloeken "width:231px;" en "padding-left: 70px;" een beetje met mekaar.
Jouw probleem zit denk ik in de "padding-left: 70px;".
Verander de waarde ervan
OF
haal "width:231px;" uit de "#menu a" en plaats m ergens anders. bijvoorbeeld in in: "#menu {" (in plaats van de "width: 100px;".

verder zitten er in het stijl bestand (klik) een paar dingen dubbelop, waardoor dit problemen kan opleveren bij renderen. (Mischien is dat een fout van Exponent CMS)

[NeORay]

hallo allemaal,

Vandaag heb ik weer verder zitten zoeken/proberen.
Dit keer met reultaat. Het probleem doet zich nu niet meer voor. (d.w.z. ik heb wel wat kleine concessies moeten doen m.b.t. de breedte van het submenu, maar dat mag de pret niet drukken:P)
Ik wilde jullie de uiteindelijke oplossing niet onthouden.
Hierbij de nieuwe css.

bedankt voor jullie reacties in ieder geval!

Cascading Stylesheet:

#menu {
    width: 233px;
    position:absolute;
    left:0px;
    top:203px;
    float:left;
    height: 35px;
}

#menu ul {
    list-style: none;
    margin:0;
    padding: 0;
}

#menu a, #menu h6 {
    font: bold 13px arial, helvetica, sans-serif;
    display: block;
    margin: 0;
    background-image:none;

}

#menu h6 {
    color: #FFFFFF;
}

#menu a {
    color: #FFFFFF;
    width:233px;
    text-align:left;
    text-decoration: none;
    border:none;
    padding-top: 8px;
    padding-bottom: 9px;
    padding-left: 70px;
    padding-right: 0px;
    margin-right: 10px;
    background-image:url(images/button_14.gif);
    background-repeat:no-repeat;
}

#menu a:hover {
    color: #000000;
    border:none;
    background-image:url(images/buttonpush_11.gif);
    background-repeat:no-repeat;
}

#menu li {
    position:relative;
    float: left;
    text-align:center;
    width:0% !;
}

#menu li li {
    position:relative;
    left: 235px;
    top:-35px;
    text-align:left;
    border-top:1px solid #FFFFFF;
    border-left:1px solid #FFFFFF;
    border-bottom:1px solid #FFFFFF;
    border-right:1px solid #FFFFFF;
    background:#000000;
    filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;
    background-repeat: repeat-x;
    background-position: left top;
    padding: 0px;
    width: 175px;
    margin: 0px;
}

#menu li li a {
    font-weight:normal;
    border-bottom:0px dotted #FFFFFF;
    font-size: 11px;
    background-image: url(images/arrowsub3.gif);
    background-repeat: no-repeat;
    background-position: left center;
    margin-left: 5px;
}

#menu li li a:visited {
    font-weight:normal;
    border-bottom:0px dotted #FFFFFF;   
    font-size: 11px;
}
#menu li li a:hover {
    color: #ff0000;
    border-top:0px dotted #FFFFFF;
    border-bottom:0px dotted #FFFFFF;
    border-left: 0px solid #FFFFFF;
    background:none;
}

#menu ul ul {
    position: absolute;
  z-index: 500;
  width: 1px; 
}

#menu ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
}

#menu ul ul {
    display: none;
}

#menu ul ul, #menu ul li:hover ul ul, #menu ul ul li:hover ul ul {
    display: none;
}

#menu ul li:hover ul, #menu ul ul li:hover ul, #menu ul ul ul li:hover ul {
    display: block;

}