Liebe/-r Experte/-in, mein Name ist Martin und ich habe ein Problem mit der Darstellung eines Menüs meiner Seite was ich allen nicht lösen kann. Ich brauche hier einen Profi der mir sagen kann was ich in der css Datei falsch gemacht habe. Auf http://www.usedomonline.de/insel-usedom.php ist das gelbe Menü mitten auf der Seite zu finden. Es wird normalerweise horizontal dargestellt. Auch in firefox und Safari ist alles ok. Leider habe ich bei dem ein oder andern IE schon gesehen das es lang nach unten gezogen wird also vertikal das ganze Aussehen der Seite zerstört. Ich finde den Fehler im css-code nicht. Können Sie sich bitte kurz die Zeit nehmen und drüber sehen? Ich währe dafür sehr Dankbar.
Das Menü wird in die Seite includet <?php include "usedom-auswahl.php";?> und die css für die Auswahl/das Menü findet sich unter http://www.usedomonline.de/style.css
Ich komm nicht weiter und benötige wirklich Hilfe.
Danke im Vorraus das Sie sich die Zeit nehemen.
mfG Martin von der Insel Usedom
Hallo Martin,
ich habe gerade keinen IE zum Testen hier, aber nach einem schnellen Blick in deinen CSS Code, ist mir eine Sache aufgefallen, die vielleicht die Ursache des Problems sein könnte. Hier ist der Code den ich meine (Zeile 851):
ul#NaviOben a, ul#NaviOben span{display:block;padding:0.2em 0.4em;text-decoration:none;color:#242424;}
Hier wird gesagt, das alle a Elemente in dem Menü als Block Element dargestellt werden sollen. (display:block)
Was der IE jedoch normalerweise macht ist, dass Block Elemente mit 100% Breite dargestellt werden.
Da die li Elemente keine feste Breite zugewiesen bekommen haben, werden diese also auch automatisch auf die 100% verbreitert und da nun alle li Elemente 100% breit sind, werden diese alle untereinander dargestellt.
Also wenn du mal testest, das display:block zu entfernen, sollte es vielleicht richtig aussehen.
Wenn nicht, schau ich mir das gerne morgen noch einmal direkt im IE an.
Schöne Grüße aus Hamburg
Mathias
Hallo Martin
also das ist völlig klar
div#ObenRahmen {
background-color: #FFFFBB;
border: 1px solid black;
float: left;
margin: 0;
position: relative;
width: 99%;
z-index: 2;
}
kann keine prozentuale breite haben …weil die - ja left floaten, wäre im IE die maximale breite der längste link …
also ne feste Breite in pixeln einbauen … das sollte das Problem lösen
grüße silvio dubiel
Hallo, ich habe jetzt die prozentuale Breite in eine Feste umgeändert aber leider ist die Darstellung unverändert. IE Version 7.0.5730.13
Ich weiß nicht weiter.
Gruß Martin
Vorher:
div#ObenRahmen {
background-color: #FFFFBB;
border: 1px solid black;
float: left;
margin: 0;
position: relative;
width: 99%;
z-index: 2;
}
nachher:
div#ObenRahmen {
background-color: #FFFFBB;
border: 1px solid black;
float: left;
margin: 0;
position: relative;
width: 620px;
z-index: 2;
}
Hallo, ich habe jetzt die prozentuale Breite in eine Feste umgeändert aber leider ist die Darstellung unverändert. IE Version 7.0.5730.13
Ich weiß nicht weiter.
Gruß Martin
Vorher:
div#ObenRahmen {
background-color: #FFFFBB;
border: 1px solid black;
float: left;
margin: 0;
position: relative;
width: 99%;
z-index: 2;
}
nachher:
div#ObenRahmen {
background-color: #FFFFBB;
border: 1px solid black;
float: left;
margin: 0;
position: relative;
width: 620px;
z-index: 2;
}
Hallo Martin
solche Arbeiten fallen normalerweise nicht in die Gruppe einfach mal schnell helfen, denn wahrscheinlich hast du selber schon stunde um stunde an dem problem gearbeitet…
man hilft ja gern, aber optimierung für alte Internetexplorer kostet mal richtig viel zeit und zeit ist bekanntlich geld
ich hab mir das jetzt nochmal angeschaut und festgestellt, dass du ganz viele sogenannte IE Hacks drin hast … aber die sind auch dein Problem … ich hab das ende deiner styles.css mal so aufgeräumt …
alles raus nach statistik und das dafür rein
DIV#ObenRahmen {
BORDER-RIGHT: black 1px solid;
BORDER-TOP: black 1px solid;
Z-INDEX: 2;
FLOAT: left;
MARGIN: 0em;
BORDER-LEFT: black 1px solid;
WIDTH: 620px;
BORDER-BOTTOM: black 1px solid;
POSITION: relative;
BACKGROUND-COLOR: #ffffbb;
}
UL#NaviOben LI {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FLOAT: left;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none;
POSITION: relative
}
UL#NaviOben LI:hover {
BACKGROUND-COLOR: silver
}
UL#NaviOben LI UL {
BORDER-RIGHT: blue 1px solid;
PADDING-RIGHT: 0px;
BORDER-TOP: blue 1px solid; DISPLAY: none; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 1em; Z-INDEX: 4; LEFT: 4.4em; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: blue 1px solid; WIDTH: 14em; COLOR: black; PADDING-TOP: 0px; BORDER-BOTTOM: blue 1px solid; POSITION: absolute; TOP: -0.4em; BACKGROUND-COLOR: #ffffcc
}
UL#NaviOben LI:hover UL {
DISPLAY: block
}
UL#NaviOben LI UL LI {
float:none; DISPLAY: block; MARGIN-BOTTOM: 0.2em
}
UL#NaviOben LI UL LI A:hover {
BACKGROUND-COLOR: silver
}
UL#NaviOben LI UL SPAN {
FONT-WEIGHT: normal; COLOR: white; BACKGROUND-COLOR: gray
}
UL#NaviOben A {
PADDING-RIGHT: 0.4em; DISPLAY: block; PADDING-LEFT: 0.4em; PADDING-BOTTOM: 0.2em; COLOR: #242424; PADDING-TOP: 0.2em; TEXT-DECORATION: none
}
UL#NaviOben SPAN {
PADDING-RIGHT: 0.4em; DISPLAY: block; PADDING-LEFT: 0.4em; PADDING-BOTTOM: 0.2em; COLOR: #242424; PADDING-TOP: 0.2em; TEXT-DECORATION: none
}
sieht bei mir im IE6 Und im IE7 so aus, wie es aussehen soll …
deine seite ist nicht valide, weil in der iso seite UTF-8 Zeichen drin sind, nur so als Hinweis …
ich hoffe, dass hilft jetzt
gruß silvio dubiel
Hallo Silvio,
habe deine Änderungen vorgenommen und jetzt siht alles perfekt aus. 1000 Dank. (Test auf: http://ipinfo.info/netrenderer/index.php) Die Seite ist nicht valide aber ich habe schon viele Fehler rausgemacht und das hofge ich schaffe ich dann auch noch irgendwann. Google und co ist das egal. Wichtig ist das alles gut dargestellt wird. Und ich hoffe mit deiner Hilfe sind jetzt die gravierensten Fehler auf der Seite verschwunden(Hoffe ich). Also nochmal 1000 Dank für deine Zeit! Ganz lieben Gruß, Martin
Hallo Mathias,
Danke für die Hilfe. Jetzt ist alles Perfekt.
Test auf: http://ipinfo.info/netrenderer/index.php)
mit meiner Seite http://www.usedomonline.de/index.php?site=ferienwohn… und man sieht das Menü ist jetzt perfekt. Ich hoffe damit sind die Größten Fehler von der Seite verschwunden. Sollte dir dennoch was aufgefallen sein währe ich dankbar über einen Tipp. Also vielen Dank nochmal für deine Zeit und ein schönes Wochenende. Liebe Grüße von der Insel Usedom. Martin http://www.usedomonline.de
Sehr schön. 
Den Netrenderer kannte ich noch gar nicht. Sehr parktisch.
Mehr ist mir momentan auch nicht aufgefallen.
Viel Erfolg mit deiner Seite. Vielleicht schau ich dieses Jahr auch mal auf Usedom vorbei.
Mathias