Netscape und CSS Einstellungen

[amethyst]

Hallo,
und noch einmal ich, weil das ein anderes Thema ist ;-))

Auf meiner Seite gibt es Menüs und Untermenüs, die in einem externen CSS festgelegt sind.

1. Bei den Untermenüs macht der Netscape Probleme und bringt den Menüeintrag nicht richtig in die Grafik.

2. Außerdem macht der Netscape zwischen den Menüpunkten wesentlich größere Abstände, was die Seite total auseinander zieht.

Hier die betreffenden CSS-Einträge

QUELLTEXT

#menu a {

display:block;

width:150px;height:40px;

background: url("../grafik/schaltflaeche_amethyst_1.JPG") top left no-repeat;

padding:10px 0 0 15px;

font: bold 12px verdana,arial,sans-serif;

color:#afafaf;

text-decoration: none;

}



#menu a:hover {

background-image: url("../grafik/schaltflaeche_amethyst_2.jpg");

color:#ffffff;

}



#menu a:active {

background-image: url("../grafik/schaltflaeche_amethyst_3.jpg");

color:#ffffff;

}



#umenu a {

display:block;

width:150px;height:30px;

background: url("../grafik/schaltflaeche_amethyst_1_klein.JPG") top right no-repeat;

padding:6px 0 0 40px;

font: bold 10px verdana,arial,sans-serif;

color:#afafaf;

text-decoration: none;

}



#umenu a:hover {

background-image: url("../grafik/schaltflaeche_amethyst_2_klein.jpg");

color:#ffffff;

}



#umenu a:active {

background-image: url("../grafik/schaltflaeche_amethyst_3_klein.jpg");

color:#ffffff;

}

Wäre schön, wenn mir da jemand weiterhelfen könnte.

Sicherheitshalber der Link:

www.amethyst-edv.de

Gruß Amethyst[/url]

[Auge]

Hi,
ich meine da wirst Du mit leben müßen, denn IE geht mit 'padding' anders um als Mozilla.
Der Punkt ab wo IE die angegebenen Pixelzahl berechnet ist ein anderer als bei Mozilla

Der Standard, an den sich der Mozilla hält, sagt, daß Margin, border
und padding in die Breite mit einfließen. MSIE zählt nur padding mit.

Man kann aber, unter Benutzung von Mechanismen, mit denen MSIE
nicht umgehen kann, für Mozilla und Opera, die dies können, andere
Werte eintragen. Beispiel:

HTML:

QUELLTEXT

<p id="bla">Viel Text<p>

CSS:

QUELLTEXT

#bla {
width:600px;
background-color:#FF4;
color:#006;
}

#bla[id] {
width:400px;
background-color:#4FB;
color:#600;
}

Der MSIE wird den Absatz mit der Breite von 600 Pixeln, der Schriftfarbe
dunkelblau und der Hintergrundfarbe gelb darstellen.
Mozilla und Opera nehmen stattdessen die Werte 400 Pixel Breite,
Schriftfarbe dunkelrot und Hintergrundfarbe (blaustichiges) grün.

Dazu benutzen sie einen Attributselektor, in diesem Falle [id].
Man könnte genausogut class oder ein anderes Attribut benutzen.

Wenn ich mich nicht irre, kann man sogar den Wert des Attributs mit
angeben, um so verschiedenen Klassen verschiedene Werte zuzuweisen.
Das habe ich aber selbst noch nicht probiert.

Tschö, Auge

Der Beitrag wurde von Auge bearbeitet: 19.04.2004 - 22:23