border mit IE 5.0

[Jeena Paradies]

Hallo ,

Ich habe da ein Problem, und zwar mit dem IE 5.0

Irgendwie macht er mir keinen Rahmen um meine Links rum. Außerdem ignoriert er da auch das padding. Normalerweise würde es mir ja nichts machen, aber der für den ich die Seite mache benutzt ausgerechnet diesen Browser. Kommt blöd, wenn ich da erst einmal anfange einen anderen Browser zu installieren, vor allem, da er nur ein Modem hat. Woran liegt es dass gerade der IE 5.0 das so blöd macht? Die nachfolgenden Versionen machen es so wie ich das haben will.

Hier ist der Link zum Screenshot, die ich mit browsercam.com machen lassen habe. Er liegt auf meinem Rechner, könnte also auch langsam gehen.

So sieht es mit dem IE 5.0 aus:
<img src="http://jeenaparadies.servebeer.com/open/Webs/gut-ie50.jpg" border="0" alt="">
Und so loll es aussehen:
<img src="http://jeenaparadies.servebeer.com/open/Webs/gut-ie55.jpg" border="0" alt="">
Und hier der Link:
http://jeenaparadies.servebeer.com/open/Webs/gutgesell2/index.htm

Grüße
Jeena Paradies

[Thomas J.S.]

Hallo,

Ich habe da ein Problem, und zwar mit dem IE 5.0

Irgendwie macht er mir keinen Rahmen um meine Links rum. Außerdem ignoriert er da auch das padding.

Der IE 5 nimmt padding nur dann bei inline-Elementen an, wenn entweder ein width oder ein height auch gibt.
Wir hatten unlängst einen Thread genau zu diesem Thema (padding + IE 5)

Gebe deinen Links eine Höhe (z.B. die Schrifarthöhe) dann sollte das gehen.

Grüße
Thomas

[Jeena Paradies]

Hallo ,

Der IE 5 nimmt padding nur dann bei inline-Elementen an, wenn entweder ein width oder ein height auch gibt.
Wir hatten unlängst einen Thread genau zu diesem Thema (padding + IE 5)
Gebe deinen Links eine Höhe (z.B. die Schrifarthöhe) dann sollte das gehen.

Dena habe ich jetzt auch gefunden, doch auf meiner seite weiß ich ja nicht wi hoch ich das machen soll. Die Schriftgröße habe ich auf 1em gesetzt, aber wie hoch das ist, da habe ich echt keine Ahnung.

Grüße
Jeena Paradies

[Thomas J.S.]

Hallo,

Dena habe ich jetzt auch gefunden, doch auf meiner seite weiß ich ja nicht wi hoch ich das machen soll. Die Schriftgröße habe ich auf 1em gesetzt, aber wie hoch das ist, da habe ich echt keine Ahnung.

Dann setzt du die Höhe auch auf 1em: a { height:1em; } ;-)

Grüße
Thomas

[Jeena Paradies]

Hallo ,

Dann setzt du die Höhe auch auf 1em: a { height:1em; } ;-)

Das wird warscheinlich nicht ganz klappen, da ja 1em die Breite eines m ist. Wenn das m sagen wir mal 10px Breite hat, dann hat aber ein Ö ja bestimmt mehr als 10px. Und wenn dahinter noch ein g also Ög kommt, dann ist die Höhe eigentlich noch ganz anders.

Grüße
Jeena Paradies

[Thomas J.S.]

Hallo,

Dann setzt du die Höhe auch auf 1em: a { height:1em; } ;-)
Das wird warscheinlich nicht ganz klappen,

Du könnst immerhin damit etwas experimentiern height:100% height:1.75em; etc. etc. (nicht aber height:inherit; !)
So viel eigeninitiavite müsste doch noch drinn sein.

Grüße
Thomas

[Jeena Paradies]

Hallo ,

So viel eigeninitiavite müsste doch noch drinn sein.

klar

Grüße
Jeena Paradies

[Ingo]

Hi,

auf meiner seite weiß ich ja nicht wi hoch ich das machen soll. Die Schriftgröße habe ich auf 1em gesetzt, aber wie hoch das ist, da habe ich echt keine Ahnung.

die zeilenhöhe sollte dann je nach browser zwischen 1.2em und 1.3em liegen. mit 1.3em dürftest du allen browsern gerecht werden. du könntest natürlich, um unterschiedliche darstellungen innerhalb des textes zu vermeiden, generell eine zeilenhöhe angeben.
freundliche Grüße
Ingo

[oggy]

oh ja, den thread kenne ich zu gut, macht wirklich sinn die postings besser zu durchsuchen, die lösung gibt es schon...

greez oggy...

[Jeena Paradies]

Hallo ,

Also ich bin immer noch an diesem Problem dran. Das mit dem Padding hat sich dank Ingo gelöst (Danke Ingo) dafür habe ich jetzt superviele andere Probleme.

Hier mal ein paar Screenshots:

IE 5.5 Win (so soll es eigentlich aussehen!)
<img src="http://home.arcor.de/maedchen.schluckt.net/selfbilder/gutgesell/ie55.jpg" border="0" alt="">
IE 5.0 Win
<img src="http://home.arcor.de/maedchen.schluckt.net/selfbilder/gutgesell/ie50.jpg" border="0" alt="">
NS 6.2
<img src="http://home.arcor.de/maedchen.schluckt.net/selfbilder/gutgesell/ns6.2.jpg" border="0" alt="">
Opera 6.05 Win
<img src="http://home.arcor.de/maedchen.schluckt.net/selfbilder/gutgesell/o6.05.jpg" border="0" alt="">
Opera 6.0 Mac
<img src="http://home.arcor.de/maedchen.schluckt.net/selfbilder/gutgesell/o6.0mac.jpg" border="0" alt="">

Also was mich am meisten Stört sind die Sachen beim IE 5 und NS 6.2, denn genau so etwas tritt bei allen anderen Browsern auch auf, wenn ich die Schrift vergrößere.

Hier der Link zu der derzeitigen Datei: http://home.arcor.de/maedchen.schluckt.net/gutgesell/index.htm

Und jetzt zu meiner Frage; Wie kriege ich es ohne Tabelle, aber mit CSS hin, dass ich eine Linkleiste wie die oben hin, in der ich bei neueren Browsern zumindest einmal mit hover die Hintergrundfarbe verändern kann, und den Link auf der Seite man sich gerade befindet, wie oben zu sehen, farblich (Hintergrund) hervorheben kann? Schön wäre es auch, wenn ich trotzdem noch diese Schwarzen Rahmen hätte. Es soll also so funktionieren, wie jetzt schon in den Browsern Opera 7.x Mozilla 1.4 und IE 5.5+6.

Grüße
Jeena Paradies

[Jeena Paradies]

Hallo ,

Jetzt habe ich noch was vergessen. Wegen XHTML 1.1 strict verwende ich keine name attribute mehr. Jetzt habe ich aus verschiedenen Howtos über JavsScript eine Funktion in JS zusammengebastelt, die auch super funktioniert, und mir bei onmousemove mittels document.images[tausch_bild_name].src die Bilder austauscht. Aber so weit ich das jetzt mitgekriegt habe kann der NS 4.x nichts mit id anfangen oder so, auf jeden fall funktioniert sie mir beim NS 4.7 nicht, was ja eigentlich schade ist, da ja der JS eigentlich doch ganz gut kann. Wie kann ich das lösen? Irgendwie weiß ich nicht so recht nach was ich suchen soll, und von JavaScript an sich habe ich eigentlcih fast keine Ahnung.

Das ist der Aufruf:
<a onmousemove="change('thmb','team.png')" onmouseout="change('thmb','schlange.jpg')"href="team.htm">Team</a>

Und hier die Funktion:
function change(tausch_bild_name,neues_bild_name) {
 document.images[tausch_bild_name].src = "img/thumb/"+neues_bild_name;
}

Grüße
Jeena Paradies

[at]

Hallo.

<a onmousemove="change('thmb','team.png')" onmouseout="change('thmb','schlange.jpg')"href="team.htm">Team</a>
function change(tausch_bild_name,neues_bild_name) {
 document.images[tausch_bild_name].src = "img/thumb/"+neues_bild_name;
}

Warum verwendest du kein CSS? Wie Pseudoklassen funktionieren, weißt du doch.
MfG, at

[Jeena Paradies]

Hallo ,

Warum verwendest du kein CSS? Wie Pseudoklassen funktionieren, weißt du doch.

Nun ja, das Bild was ich tauschen will ist erstens ganz wo anders, und zweitens muss ich gleichzeitig auch den Hintergrund ändern, das mache ich ja schon mit CSS. Aber es ist mir nicht bekannt, wie ich zwei Sachen auf einmal mittels CSS machen kann.
Grüße
Jeena Paradies

[at]

Hallo.

Nun ja, das Bild was ich tauschen will ist erstens ganz wo anders, und zweitens muss ich gleichzeitig auch den Hintergrund ändern, das mache ich ja schon mit CSS. Aber es ist mir nicht bekannt, wie ich zwei Sachen auf einmal mittels CSS machen kann.

Indem du die Eigenschaften mit einem Semikolon trennst? Ich nehme an, dass ich dich nicht richtig verstanden habe, weswegen du bitte noch einmal beschreiben solltest, was du vorhast. Feststehen dürfte nur, dass du kein JavaScript benötigst, da CSS-Pseudoklassen ein adäquates Mittel hierfür darstellen.
MfG, at

[Jeena Paradies]

Hallo ,

Indem du die Eigenschaften mit einem Semikolon trennst? Ich nehme an, dass ich dich nicht richtig verstanden habe, weswegen du bitte noch einmal beschreiben solltest, was du vorhast. Feststehen dürfte nur, dass du kein JavaScript benötigst, da CSS-Pseudoklassen ein adäquates Mittel hierfür darstellen.

Guck dir doch bitte diesen Link an:
http://home.arcor.de/maedchen.schluckt.net/gutgesell/index.htm

Wenn man über die Navigation fährt, und gleichzeitig JavaScript an hat, verändert sich das Bild mit der Schlange zu einem anderen, was halt so gerade zu dem Link der überfahren wird dazu passt. Wie soll das denn ohne JavaScript gehen? Es ist auch nicht weiter schlimm, wenn es nicht geht, ist nur so ein Design Ding.

Das Andere Problem habe ich zwar schon fast im Griff, doch ein was will noch nicht.

<ul id="menue">
 <li><a>bla1</a></li>
 <li...
 ...
 <li><a class="hier">hier bin ich</a></li>
 ...
</ul>

Irgendwas passt an meinem Code noch nicht, da kein Browser mir das "hier" formatieren will. Ich will da eine andere Hintergrundfarbe haben, doch seit dem ich von class="menue" auf id="menue" umgestiegen bin, will es nicht mehr funktionieren. Ist das so nicht erlaubt? Kann eigentlich nicht sein, da ja auch der Validator sagt alles OK. Oder hat das irgendwas mit Vererbungen oder sonst was zu tun?

id Nehme ich wegen dem IE weil ich da was anderes für die richtige Anzeige brauche. ul#menu[id] Hast du irgendeine Vermutung?

Grüße
Jeena Paradies

[at]

Hallo.

Wenn man über die Navigation fährt, und gleichzeitig JavaScript an hat, verändert sich das Bild mit der Schlange zu einem anderen, was halt so gerade zu dem Link der überfahren wird dazu passt. Wie soll das denn ohne JavaScript gehen? Es ist auch nicht weiter schlimm, wenn es nicht geht, ist nur so ein Design Ding.

[http://www.meyerweb.com/eric/css/edge/popups/demo2.html] beschreibt diese Technik in CSS.

Das Andere Problem habe ich zwar schon fast im Griff, doch ein was will noch nicht.

Irgendwas passt an meinem Code noch nicht, da kein Browser mir das "hier" formatieren will. Ich will da eine andere Hintergrundfarbe haben, doch seit dem ich von class="menue" auf id="menue" umgestiegen bin, will es nicht mehr funktionieren. Ist das so nicht erlaubt? Kann eigentlich nicht sein, da ja auch der Validator sagt alles OK. Oder hat das irgendwas mit Vererbungen oder sonst was zu tun?

id Nehme ich wegen dem IE weil ich da was anderes für die richtige Anzeige brauche. ul#menu[id] Hast du irgendeine Vermutung?

Die einzigen Auffälligkeiten:

• Du hast bei der ersten Stylesheet-Angabe den Medientyp nicht angegeben.
• Du hast keine "repeat"-Angabe für die Klasse/ID gemacht.
  Außerdem verwendest du keine Klasse, sondern eine ID, was aber sicher kein Problem ist.
  Hast du schon einmal ein "li a span {...}"-Konstrukt ausprobiert?
  MfG, at

[at]

Hallo.

[http://www.meyerweb.com/eric/css/edge/popups/demo2.html] beschreibt diese Technik in CSS.

Und http://www.meyerweb.com/eric/css/edge/popups/demo2.html ist sogar per Klick zu erreichen ;-)
MfG, at

[Jeena Paradies]

Hallo ,

Und http://www.meyerweb.com/eric/css/edge/popups/demo2.html ist sogar per Klick zu erreichen ;-)

Das Problem dabei ist die absolute Positionierung. Hast du mal geguckt, wie es aussieht wenn du die Schrift im Mozilla oder IE vergrößerst? Die Seite an der Ich arbeite ist für einen Arzt, und ich kann mir vorstellen, dass etliche der alten Leute, die zu ihm gehen auch eine größere Schrift eingestellt haben.

Grüße
Jeena Paradies

[at]

Hallo.

Das Problem dabei ist die absolute Positionierung. Hast du mal geguckt, wie es aussieht wenn du die Schrift im Mozilla oder IE vergrößerst? Die Seite an der Ich arbeite ist für einen Arzt, und ich kann mir vorstellen, dass etliche der alten Leute, die zu ihm gehen auch eine größere Schrift eingestellt haben.

Ich sehe dein Problem, ja, aber ich bin mir sicher, dass du eine Lösung dafür finden kannst :-)
MfG, at

[Jeena Paradies]

Hallo ,

Ich sehe dein Problem, ja, aber ich bin mir sicher, dass du eine Lösung dafür finden kannst :-)

Du bist so gut zu mir, du baust mich immer so auf ;-)

Grüße
Jeena Paradies

[Jeena Paradies]

Hallo ,

Das Problem dabei ist die absolute Positionierung. Hast du mal geguckt, wie es aussieht wenn du die Schrift im Mozilla oder IE vergrößerst?

Aber ich habe jetzt ein wenig darüber nachgedacht, und das wäre gar nicht so verkehrt, da ja mein Text sowieso untendrunter ist, und da ist es egal, wie groß der Text ist. Ich muss eigentlich nur herausfinden, wie ich das Bild genau da hin positioniere wo ich es haben will. Da ich ja margin-left: 5% habe könnte ich das ja auch für die Positionierung auch mit Prozent machen. Dann fehlt nur noch der Abstand von oben, den kann ich ja dann auch noch fest machen. Mal gucken, ob es dann im IE auch so funktioniert.

Grüße
Jeena Paradies

[at]

Hallo.
Ich bin noch einmal.

Außerdem verwendest du keine Klasse, sondern eine ID, was aber sicher kein Problem ist.

http://www.w3.org/TR/REC-CSS2/cascade.html#important-rules entstammt einem anderen Thread und behandelt die Prioritäten innerhalb von CSS. Wie du dem Text entnehmen kannst, hat "id" eine höhrere Priorität als "class", könnte also maßgeblich sein.
MfG, at

[Cyx23]

Hallo ,

<a onmousemove="change('thmb','team.png')" onmouseout="change('thmb','schlange.jpg')"href="team.htm">Team</a>

der Netscape 4 benötigt hier onmouseover statt onmousemove, und hast du schonmal im Archiv nachgeschaut bzgl. ID usw.?

Grüsse

Cyx23