CSS - Menü - margin IE vs. FF

schelm

hallo liebe helfer,

mein menü wird im IE wesentlich höher dargestellt als im FF - ich kapier nach langem ausprobieren und nachdenken immer noch nicht wieso....

css-teil fürs menü:

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

#sidebar li {
margin: 0;
}

#sidebar a
{
display: block;
padding: 1px 0;
color: black;
font-weight: bold;
background-color: white;
text-decoration: none;
}

#sidebar a:hover
{
color: white;
font-weight: bold;
background-color: silver;
text-decoration: none;
}

#sidebar ul ul li {
margin: 0;
}

#sidebar ul ul a
{
display: block;
padding: 1px 1px 1px 20px;
color: black;
font-weight: normal;
background-color: white;
text-decoration: none;
}

#sidebar ul ul a:hover
{
color: white;
font-weight: normal;
background-color: silver;
text-decoration: none;
}

erkennt jemand mögliche fehler? oder kennt jemand einen trick, wie ich die nicht erwünschte darstellung im IE umgehe?

danke danke danke!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Monika

kenne ich alles,
aber es liegt sicher an anderen Teilen des css
eine url wäre gut, meine Glaskugeln sind (endlich) voller Schnee :???:

Jeriko

Zitat

eine url wäre gut, meine Glaskugeln sind (endlich) voller Schnee

Was sie dann zu einer Schneekugel macht? :mrgreen: Spaß beiseite, da steht eine URL ;-)

Gruß Jeriko

schelm

land in sicht?

hallo monika,

"kenne ich alles" klingt vielversprechend :-)

aber woran solls sonst liegen?

jeriko hat übrigens recht, domain stand da:

xxx

vielen dank & grüße aus dem verschneiten KA

Monika

in der Art und Weise wie das ganze CSS aufgebaut ist,

kannst Du entweder mit der erhöhten Darstellung leben,
ich seh sie gerade und es sieht eigentlich gut aus ;)

oder Du machst in der header.php
eine *Weiche nur für die IE*

betroffen ist diese Angabe

#sidebar

alles zuschreiben wie in der normalen style.css auch aber eben weniger margin Werte oder mehr oder sogar Minus

öffne die header.php und auf alle Fälle VOR /head gehört

HTML

<!--[if IE]>
<style type="text/css">
#sidebar {....}
 
</style>


<![endif]-->

lg

spickzettel

Bei

Code

#sidebar ul ul a

fehlt eine Angabe zu height. Näheres dazu hier

schelm

klingt logisch....

hi,
supi, vielen dank. klingt eigentlich logisch. werd ich heut abend zuhause ausprobieren.
grüße
daniel

schelm

lösung

folgendermaßen funktionierts:

#sidebar ul ul a
{
display: block;
padding: 1px 1px 1px 20px;
color: black;
font-weight: normal;
background-color: white;
text-decoration: none;
height: 16px;
}

danke nochmal!

schelm

doch noch was falsch?!?

wie oben beschrieben funktioniert das menü jetzt auf irgendeine domain.de genau so wie ich es will auf dem IE als auch auf dem FF.

ich habe das gleiche menü noch auf nochnedomain.de im einsatz. dort hat das allerdings zu zwei unerwünschten veränderungen im IE geführt:

1. unter linktipps verrutscht beim hover-effekt die gesamte linkliste um eine zeile nach unten

2. zwischen oberkategorien ergibt sich jetzt prinzipiell eine leerzeile. zwischen ober- und unterkategorie stimmt der abstand im FF und IE wie gewünscht überein.

kann mir nochmal jemand helfen?

Monika

Zitat von schelm

wie oben beschrieben funktioniert das menü jetzt auf http://www.hauber-fliesen.de genau so wie ich es will auf dem IE als auch auf dem FF.
ich habe das gleiche menü noch auf http://www.tooorwart.de im einsatz. dort hat das allerdings zu zwei unerwünschten veränderungen im IE geführt:
1. unter linktipps verrutscht beim hover-effekt die gesamte linkliste um eine zeile nach unten
2. zwischen oberkategorien ergibt sich jetzt prinzipiell eine leerzeile. zwischen ober- und unterkategorie stimmt der abstand im FF und IE wie gewünscht überein.
kann mir nochmal jemand helfen?

HTML

#right a


{


display: block;


padding: 1px 0;


color: black;


font-weight: bold;


background-color: white;


text-decoration: none;


}






#right a:hover


{


color: white;


font-weight: bold;


background-color: black;


text-decoration: none;


}






#right ul ul li { 


margin: 0; 


}






#right ul ul a


{


display: block;


padding: 1px 1px 1px 20px;


color: black;


font-weight: normal;


background-color: white;


text-decoration: none;


height: 16px;


}






#right ul ul a:hover


{


color: white;


font-weight: normal;


background-color: black;


text-decoration: none;


}

Alles anzeigen

wenn ul ul a ein height hat dann mag es ul ul a:hover auch

sonst *springts vor Ärger* ;)

lg

schelm

danke - mal wieder ;-)

aber es tut leider nicht.....

schelm

notizzettel

hallo (monika),

habe
height: 16px;
bei
ul ul a:hover
eingefügt.

im IE springts trotzdem noch..... andere Idee?

danke & grüße

spickzettel

Das mit dem Springen kann ich nicht nachvollziehen. Aber für den Rest bitte noch mal eine Angabe für height einfügen bei

Code

#right a

schelm

problem nur im IE

danke spickzettel,

daran liegts auch nicht....

ich beschreibs nochmal: also nur im IE rutscht beim drüberfahren die linkliste in der mittleren spalte um eine zeile nach unten. da bleibt sie dann auch....

nochmal dank an alle geduldigen helfer!!!!

spickzettel

Zitat

daran liegts auch nicht....

Doch, das beseitigt zumindest die Leerzeile vor den fetten Menüpunkten rechts...

spickzettel

Das Springen liegt an der leeren Überschrift:

HTML

<h2></h2>

Helfen tut bei mir ein:

Code

#mitte h2{margin:0;}

Ist aber nur eine gefrickelte Notlösung. Besser wäre es, die leeren Tags rauszunehmen. So wie ich das im Moment sehe, wird das aber von WP bei Linklisten immer mit ausgegeben.

schelm

gelöst

du hast recht, es funktioniert. dein hinweis, woran es vermutlich liegt, darauf wäre ich nie gekommen. vielen dank!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

CSS - Menü - margin IE vs. FF

Jetzt mitmachen!