IE hält sich nicht an margin-top
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
beispiel
bild
browser
button
code
dank
display
effekt
einziger nachteil
gesamte navigation
image
internet
jemand
packen
problem
tip
url
werden
zukunft
zweite bild
-
Hallo!
Kann mir bitte jemand erklären wieso sich der Internet Explorer als einziger nicht an margin-top hält und was man dagegen tun kann? Habs auch schon mit padding-top versucht, läuft aber aufs gleiche hinaus. Komischerweise funktioniert es in jedem anderen Browser (zumindest Firefox, Opera, Chrome und Safari). Eigentlich sollte es ja auch im IE funktionieren...
Wenns was hilft, hier der Code:
<a href="index.html" rel="follow" onmouseover="Bildwechsel1(0, Highlight1)" onmouseout="Bildwechsel1(0, Normal1)"><img src="img/homebutton1.gif" style="margin-left: 6px; margin-top: 0px;" border="0"></a> <a href="music.html" rel="follow" onmouseover="Bildwechsel2(1, Highlight2)" onmouseout="Bildwechsel2(1, Normal2)"><img src="img/musicbutton1.gif" style="margin-left: 6px; margin-top: 4px;" border="0"></a> <a href="lyrix.html" rel="follow" onmouseover="Bildwechsel3(2, Highlight3)" onmouseout="Bildwechsel3(2, Normal3)"><img src="img/lyricsbutton1.gif" style="margin-left: 6px; margin-top: 4px;" border="0"></a> <a href="news.html" rel="follow" onmouseover="Bildwechsel4(3, Highlight4)" onmouseout="Bildwechsel4(3, Normal4)"><img src="img/newsbutton1.gif" style="margin-left: 6px; margin-top: 4px;" border="0"></a> <a href="about.html" rel="follow" onmouseover="Bildwechsel5(4, Highlight5)" onmouseout="Bildwechsel5(4, Normal5)"><img src="img/aboutbutton1.gif" style="margin-left: 6px; margin-top: 4px;" border="0"></a> <a href="pics.html" rel="follow" onmouseover="Bildwechsel6(5, Highlight6)" onmouseout="Bildwechsel6(5, Normal6)"><img src="img/picsbutton1.gif" style="margin-left: 6px; margin-top: 4px;" border="0"></a> <a href="downloads.html" rel="follow" onmouseover="Bildwechsel7(6, Highlight7)" onmouseout="Bildwechsel7(6, Normal7)"><img src="img/downloadsbutton1.gif" style="margin-left: 6px; margin-top: 4px;" border="0"></a> <a href="store.html" rel="follow" onmouseover="Bildwechsel8(7, Highlight8)" onmouseout="Bildwechsel8(7, Normal8)"><img src="img/storebutton1.gif" style="margin-left: 6px; margin-top: 4px;" border="0"></a> <a href="links.html" rel="follow" onmouseover="Bildwechsel9(8, Highlight9)" onmouseout="Bildwechsel9(8, Normal9)"><img src="img/linksbutton1.gif" style="margin-left: 6px; margin-top: 4px;" border="0"></a>
Danke im Voraus! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Der Code von dir ist sehr aufgebläht: du solltest lieber dazu übergehen die Links mit einer Klasse zu versehen, und dann die Infos in ein externes Stylesheet packen. Vllt hilft das dem IE(Welcher ist es überhaupt? IE9?)
Außerdem was sollen die Javascript Bildwechsel, den :hover effekt kennste, oder? -
imho schrieb:
Der Code von dir ist sehr aufgebläht: du solltest lieber dazu übergehen die Links mit einer Klasse zu versehen, und dann die Infos in ein externes Stylesheet packen. Vllt hilft das dem IE(Welcher ist es überhaupt? IE9?)
Außerdem was sollen die Javascript Bildwechsel, den :hover effekt kennste, oder?
Hallo!
Danke für die schnelle Antwort.
Hab es jetzt einmal so versucht und es funktioniert tatsächlich. Hätt ich nicht gedacht. Danke!
Ja ich kenn den :hover effekt, hab aber bis jetzt nicht gewusst, dass das auch mit Bildern funktioniert. Hab immer gedacht, das das nur für Text gedacht ist. Aber funktioniert das auch wenn man mehrere verschiedene Buttons ohne Text untereinander hat? Das schaut mir auf den ersten Blick ein Bisschen kompliziert aus. Aber ich werd es einmal versuchen. An sich wäre es ja super da auf JS verzichten z können. Danke für den Tipp!
Edit:
Hab es jetzt mal versucht. Das große Problem ist, dass bei dieser Methode das zweite Bild erst geladen wird wenn man mit der Mouse drüber fährt. Und das dauert dann zu lange. Bei der Methode mit JS werden die Bilder sofort am Anfang geladen. Auf diese Weise entsteht nur ein Nachteil für die die JS in ihrem Browser deaktiviert haben. Sonst für alle (deren Internet nicht sehr schnell ist).
Es kann aber natürlich auch sein dass ich da wieder mal irgendwas falsch gemacht habe... Aber da es sonst ja funktioniert glaube ich mal nicht..
Edit2:
Problem gelöst!
Hab einfach an die Stelle an der normal die Bilder im Quelltext waren jeweils das zweite Bild eingefügt und auf display:none gesetzt.
Beitrag zuletzt geändert: 26.4.2012 3:16:05 von yorecords -
yorecords schrieb:
Hab einfach an die Stelle an der normal die Bilder im Quelltext waren jeweils das zweite Bild eingefügt und auf display:none gesetzt.
Du hättest auch einen Image Pre-Loader in Javascript schreiben können. In dem du alle Bilder der Seite lädst aber nicht anzeigtst. Ein Beispiel findest du auf der folgenden Seite: http://www.web-toolbox.net/webtoolbox/bilder/images-vorladen.htm. Dort findest auch weitere Möglichkeiten mit HTML und CSS.
Das ist nur als Tipp und für alle die das Problem in Zukunft auch haben.
Gruß S.Brosch -
software-brosch schrieb:
Du hättest auch einen Image Pre-Loader in Javascript schreiben können. In dem du alle Bilder der Seite lädst aber nicht anzeigtst.
Das ist nur als Tipp und für alle die das Problem in Zukunft auch haben.
Gruß S.Brosch
Ja aber wenn ich das so machen würde hätte ich es gleich so lassen können wie es war. Der Sinn dahinter ist es ja das ganze ohne JS zu lösen. Ich finde das ist so die beste Lösung. Außer es gibt mit display:none irgendwelche Kompatiblitätsprobleme.. Dazu hab ich leider keine eindeutigen Informationen finden können.. Aber ich hab es jedenfalls schon in den jeweils neuesten Versionen von IE, Firefox, Opera, Chrome und Safari getestet, und da funktioniert es perfekt.
Leider hab ich generell keine eindeutigen Infos bezüglich des kompletten :hover-Effekts im Bezug auf die Browserkompatiblität und eventuelle Nachteile finden können.. Aber dazu eröffne ich mal lieber einen neuen Thread..
software-brosch schrieb:
Ein Beispiel findest du auf der folgenden Seite: http://www.web-toolbox.net/webtoolbox/bilder/images-vorladen.htm. Dort findest auch weitere Möglichkeiten mit HTML und CSS.
Gruß S.Brosch
Die Seite hab ich auch gefunden, daher hab ich auch die Idee mit display:none. Wie gesagt halte ich das eh für die beste Methode, da man es so ohne JS und auch ohne 1px große Bilder irgendwo am Rand löst. -
Einziger nachteil des Hovereffekts ist, dass er auf touchscreens nicht funktioniert... Sonst unterstützt sogar der IE6 diesen Effekt wenn acuh nur für Links, ab IE7 gibts den Effekt vollständig
-
imho schrieb:
Einziger nachteil des Hovereffekts ist, dass er auf touchscreens nicht funktioniert... Sonst unterstützt sogar der IE6 diesen Effekt wenn acuh nur für Links, ab IE7 gibts den Effekt vollständig
Oh.. Das ist schlecht.. Das heißt wenn jemand mit z.B. IE6 auf meine Seite geht fehlt die gesamte Navigation? Ich hab ja Buttons als Links. -
yorecords schrieb:
Oh.. Das ist schlecht.. Das heißt wenn jemand mit z.B. IE6 auf meine Seite geht fehlt die gesamte Navigation? Ich hab ja Buttons als Links.
Nein, einzig der Bildwechsel funktiniert nicht, die oben vewendeten <a> tags sind aber Links, zum Beispiel li:hover geht im IE nicht, aber das ist zu vernachlässigen, der IE 6 liegt inzwischen bei 1,4% in Deutschland, diejenigen die den noch verwenden werdens schon noch lernen wenn sie auf immer mehr Webseiten kommen die im IE6 nicht bedienbar sind. Der unterstützt ja nicht mal png transparenz -
imho schrieb:
yorecords schrieb:
Oh.. Das ist schlecht.. Das heißt wenn jemand mit z.B. IE6 auf meine Seite geht fehlt die gesamte Navigation? Ich hab ja Buttons als Links.
Nein, einzig der Bildwechsel funktiniert nicht, die oben vewendeten <a> tags sind aber Links, zum Beispiel li:hover geht im IE nicht, aber das ist zu vernachlässigen, der IE 6 liegt inzwischen bei 1,4% in Deutschland, diejenigen die den noch verwenden werdens schon noch lernen wenn sie auf immer mehr Webseiten kommen die im IE6 nicht bedienbar sind. Der unterstützt ja nicht mal png transparenz
Ok.. Und sonst funktioniert es in jedem Browser? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
