HTML-Editor phase 5 Support > Netscape und CSS

HTML-Editor phase 5 Support > Fragen, Lösungen zu HTML-Problemen bzw. Webdesign-Fragen - Talk > HTML

amethyst

03.04.2004 - 13:25

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]

Conny

03.04.2004 - 19:49

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 -oder so ähnlich- (Hab' da mal was gelesen, weiß es aber nicht mehr so genau... :cry: )

Conny

amethyst

03.04.2004 - 23:35

Danke Conny, ist zwar nicht schön, aber dann leb ich halt damit, bis jemandem was besseres einfällt ;-))

Gruß Amethyst

Auge

04.04.2004 - 0:15

ZITAT

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

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

amethyst

04.04.2004 - 0:26

Danke Auge, ich weiß zwar noch nicht, wie ich das umsetzen soll, aber das ist zumindest ein Ansatz ;-))

Vielleicht ist es jetzt einfach zu spät, um noch zu begreifen, was da steht, ich les das morgen noch mal in Ruhe ;-))

Und sollte ich ne Lösung finden und der Netscape (den Mozilla muss ich jetzt endlich auch mal installieren) zickt nicht mehr rum, dann werde ich es Euch wissen lassen ;-))

Gute Nacht Amethyst

amethyst

04.04.2004 - 11:43

So er zickt nicht mehr ;-)) allerdings nur bei der Schrift, die Lösung für die Abstände hab ich noch nicht gefunden ;-))

Noch mal danke Auge, für den richtigen Lösungsansatz. Ich hab daraufhin mal ein bißchen probiert, bei Stefan Münz gelesen usw. Irgendwie ging das alles nicht.

Und dann hab ich mich an den Thread von Andreas und das "Gestrüpp" erinnert und da steckte die Lösung. Ich hatte im Code direkt am Anfang einen Fehler, den der IE zwar ingoriert (Opera auch) aber eben Netscape nicht.

Hier der falsche Code

QUELLTEXT

#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;

}

und hier der bessere Code, richtig ist der sicher auch noch nicht:

QUELLTEXT

#menu a {

display:block;

width:150px;height:40px;

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

padding:10px 0 0 15px;

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

color:#afafaf;

text-decoration: none;

}

Danke für Eure Mithilfe

Gruß Amethyst

Auge

04.04.2004 - 23:54

ZITAT

Vielleicht ist es jetzt einfach zu spät, um noch zu begreifen, was da steht, ich les das morgen noch mal in Ruhe

)

An einem Sonntagmorgen um halb eins ist das keine Schande. :-)

ZITAT

Und sollte ich ne Lösung finden und der Netscape (den Mozilla muss ich jetzt endlich auch mal installieren) zickt nicht mehr rum, dann werde ich es Euch wissen lassen

)

Der NS 7.1 ist von der Renderengine mit dem Mozilla identisch. Du brauchst
also nicht beide Browser installieren. Zumal, es gab (gibt ?) das Problem,
daß die Benutzung desselben Profils in Mozilla und NS 7.x zu Anzeigeproblemen
führt(e).

Wenn es nur um das Testen der Seiten geht, würde ich Mozilla oder Firefox
bevorzugen, da sie diverse kommerzielle Komponenten des NS 7.x
nicht mitbringen, und somit weniger RAM belegen.
Beim Festplattenplatz siegt natürlich der Firefox, da er nur die Browserkomponente
des Mozilla beinhaltet.

Tschö, Auge

Dieses ist eine vereinfachte Darstellung unseres Foreninhaltes. Um die detaillierte Vollansicht mit Formatierung und Bildern zu betrachten, bitte hier klicken.