Darstellungsunterschiede zwischen IE und Firefox...

_Tobi_ · 23. Sep. 2007

Hallo,
bin gerade am homepage basteln(&nbsp Hotel "Zur Post" Velburg ) und wie so oft bringt mich ein problem langsam zum verzweifeln:
Es betrifft das Javscript Menü, im IE funktioniert die farbänderung bei mouseover wunderbar, im FF ändert sich die farbe bei "Home", "Anfahrt", "Reservierung" und "Kontakt" nicht. Dies betrifft alle Menüpunkte bei denen kein Untermenü aufklappt.
Wäre super wenn mir jemand behilflich sein könnte!

Falls es einfacher ist, ein neues Menü zu integrieren, bin ich auch gern bereit dies zu tun. Es müsste halt aussehen und funktionieren wie das jetzige. Leider kann ich selber keines schreiben, da meine javascript kentnisse zu begrenzt sind...

MfG Tobi

Meine CSS Datei:

Code:

/* CSS Document */
body {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
background-color:#faf2ca;
margin:0px; /*Für dynamischen Iframe*/
}

/*Definiert zentral den Abstand zwischen Elementen(Zeilenabstand)!!! WICHTIG!!!!!!*/
p {
margin-top:1em; 
margin-bottom:1em;}
li {
margin-top:1em; /*Leerraum zwischen Linktext und </a> bringt Listenelemente ganz zusammen*/
margin-bottom:1em;
}
ul {
margin-top:1em; 
margin-bottom:1em; }
/*Definiert zentral den Abstand zwischen Elementen(Zeilenabstand)!!! WICHTIG!!!!!!*/


a:link {text-decoration:underline;color: #FFFFFF;}
a:hover {text-decoration:none; color:#FFFFFF;}
a:visited {color: #FFFFFF; text-decoration:underline;}


#horizontale_liste li
{
display: inline;
list-style-type: none;
padding:0px;
}

#horizontale_liste a:link {text-decoration:none; color:#FFFFFF;}
#horizontale_liste a:hover {text-decoration:none; color:#7e92ad;}
#horizontale_liste a:visited {color: #FFFFFF; text-decoration:none;}

.te_impressum{
font-size:10px;
position:absolute;
color:#666666;
left:400px;
top:597px;
}


.iframe {
width:80%;
position:absolute;
top:140px;
left:200px;
overflow:hidden;
}

.startseite_oben {
position:absolute;
top:0%;
left:0px;
z-index:10;
margin:0px;
}
.startseite_links {
position:absolute;
top:170px;
left:0%;
width:166px;
height:391px;
}
.startseite_adresse {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
text-align:center;
/*Größen- und Positionsangaben*/
position:absolute;
left:3px;
top:155px;
width:140px;
z-index:30;

}

.startseite_menueleiste {
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color:#FFFFFF;
/*Größen- und Positionsangaben*/
position:absolute;
left:120px;
top:95px;
width:700px;
height:25px;
z-index:11;

}
.startseite_sprachenwahl {
position:absolute;
top:0px;
left:820px;
z-index:12;
width:131px;
height:33px;
}

.startseite_ankunft {
background-image:url(../gfx/startseite_ankunft.png);
background-repeat:no-repeat;
background-position:0px 0px;
position:relative;
top:0px;
left:0px;
width:650px;
height:542px;

}
.startseite_schriftzug_post {
position:absolute;
top:97px;
left:288px;
width:51px;
height:25px;
}
.startseite_eselsohr {
position:absolute;
top:464px;
left:647px;
width:158px;
height:158px;
z-index:20;
margin:0px;
}
.startseite_schrift {
position:absolute;
top:90px;
left:0px;
width:600px;
}

.startseite_saele {
position:absolute;
width:118px;
height:234px;
left:686px;
top:130px;
}

ein schlauer · 23. Sep. 2007

du solltest deiner Seite einen DOCTYPE gönnen der den Browser nicht in den Quirksmodus versetzt.

anna55 · 24. Sep. 2007

_Tobi_ schrieb:
Falls es einfacher ist, ein neues Menü zu integrieren, bin ich auch gern bereit dies zu tun.

Es reicht, wenn zusätzlich zu diesen Angaben

Code:

#horizontale_liste a:link {text-decoration:none; color:#FFFFFF;}
#horizontale_liste a:hover {text-decoration:none; color:#7e92ad;}
#horizontale_liste a:visited {color: #FFFFFF; text-decoration:none;}

noch einfügst

Code:

#horizontale_liste li a:hover {text-decoration:none; color:#7e92ad;}

Und schau mal hier drüber.

_Tobi_ · 24. Sep. 2007

@ ein schlauer: browser ist nun im nicht quirk modus!

@ anna55:
wenn ich nur das hover verwende, dann werden die ganzen menülinks weiß unterstrichen. verwende ich hingegen hover und link dann werden im ff "nur" noch home, anfahrt, reservierung und kontakt weiß unterstrichen.

zusammengefasst bin ich jetzt ein stück weiter, sowohl im ie als auch im ff werden die links bei mouseover blau. so wie es der ie darstellt passt alles. ff unterstreicht mir aber home, anfahrt, reservierung und kontakt weiß:icon8:

ein problem ist im ff hinzugekommen:
das seitenende wurde "nach oben verschoben", sprich der impressum link sowie ein teil des eselohrs ist nicht mehr zusehen. Hmm immer wieder ein neues problemchen...
ie stellt es korrekt dar!

CSS:

Code:

/* CSS Document */
body {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
background-color:#faf2ca;
margin:0px; /*Für dynamischen Iframe*/
}

/*Definiert zentral den Abstand zwischen Elementen(Zeilenabstand)!!! WICHTIG!!!!!!*/
p {
margin-top:1em; 
margin-bottom:1em;}
li {
margin-top:1em; /*Leerraum zwischen Linktext und </a> bringt Listenelemente ganz zusammen*/
margin-bottom:1em;
}
ul {
margin-top:1em; 
margin-bottom:1em; }
/*Definiert zentral den Abstand zwischen Elementen(Zeilenabstand)!!! WICHTIG!!!!!!*/


a:link {text-decoration:underline; color: #FFFFFF;}
a:hover {text-decoration:none; color:#FFFFFF;}
a:visited {color: #FFFFFF; text-decoration:underline;}


#horizontale_liste li
{
display: inline;
list-style-type: none;
padding:0px;
}

#horizontale_liste a:link {text-decoration:none; color:#FFFFFF;}
#horizontale_liste a:hover {text-decoration:none; color:#7e92ad;}

.te_impressum{
font-size:10px;
position:absolute;
color:#666666;
left:400px;
top:597px;
}


.iframe {
width:80%;
position:absolute;
top:140px;
left:200px;
overflow:hidden;
}

.startseite_oben {
position:absolute;
top:0%;
left:0px;
z-index:10;
margin:0px;
}
.startseite_links {
position:absolute;
top:170px;
left:0%;
width:166px;
height:391px;
}
.startseite_adresse {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
text-align:center;
/*Größen- und Positionsangaben*/
position:absolute;
left:3px;
top:155px;
width:140px;
z-index:30;

}

.startseite_menueleiste {
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color:#FFFFFF;
/*Größen- und Positionsangaben*/
position:absolute;
left:120px;
top:95px;
width:700px;
height:25px;
z-index:11;

}
.startseite_sprachenwahl {
position:absolute;
top:0px;
left:820px;
z-index:12;
width:131px;
height:33px;
}

.startseite_ankunft {
background-image:url(../gfx/startseite_ankunft.png);
background-repeat:no-repeat;
background-position:0px 0px;
position:relative;
top:0px;
left:0px;
width:650px;
height:542px;

}
.startseite_schriftzug_post {
position:absolute;
top:97px;
left:288px;
width:51px;
height:25px;
}
.startseite_eselsohr {
position:absolute;
top:464px;
left:647px;
width:158px;
height:158px;
z-index:20;
margin:0px;
}
.startseite_schrift {
position:absolute;
top:90px;
left:0px;
width:600px;
}

.startseite_saele {
position:absolute;
width:118px;
height:234px;
left:686px;
top:130px;
}

mfg tobi

anna55 · 24. Sep. 2007

Schreib mal hier

#horizontale_liste a {text-decoration:none; color:#FFFFFF;}

Dann sind schon mal die Unterstriche weg.

Leider hast Du Impressum nicht im Quelltext stehen, sonst hätte ich mal testen können, was z.B. eine größere width-Angabe hier bewirken kann, z.B. 800px statt Deiner 700px.

.startseite_menueleiste {
...
width:700px;
}

Edit: oder einfacher, nimm min-width:700px

Albu · 25. Sep. 2007

_Tobi_ · 25. Sep. 2007

Danke Anna55, die unterstriche sind weg! Das Menüproblem ist somit gelöst :grin:

Leider ist mir etwas unklar was mit "Impressum nicht im Quelltext" meinst?
Nun habe ich mit dem Javascript dass die Höhe des dynamischen iframes berechnet, 13px zugegeben. somit stimmt im firefox alles.
im ie hingegen ist ein 13px breiter rand unter dem eselsohr rechts unten.

Impressum im Quelltext:

HTML:

<p class="te_impressum">© by Tobias Ellert, 2007 | Impressum</p>

Code:

.te_impressum{
font-size:10px;
position:absolute;
color:#666666;
left:400px;
top:597px;
}

Was willst du mit der min-width angabe bezwecken? es geht doch um die seitenhöhe, sprich iframe höhe?
Oder stehe ich gerade am schlauch?

mfg tobi

anna55 · 25. Sep. 2007

_Tobi_ schrieb:
Was willst du mit der min-width angabe bezwecken? es geht doch um die seitenhöhe, sprich iframe höhe?
Oder stehe ich gerade am schlauch?

Ne Tobi, ich hab auf dem Schlauch gestanden. Ich habe gedacht, der Impressum-Link soll oben ins Menü neben Kontakt und passt da nicht mehr hin. Hab erst jetzt gesehen, dass der ja unten steht. :brainless

An der IE-Darstellung sollte man aber auch was machen können....

_Tobi_ · 25. Sep. 2007

An der IE-Darstellung sollte man aber auch was machen können....

hm anna das dürfte wohl stimmen, nur weiß ich leider nicht wie

also im quirks modus stellen beide browser die höhe korrekt da!
evtl. hilft dir diese auskunft weiter...

mfg tobi

anna55 · 25. Sep. 2007

Hi Tobi,

verantwortlich für den Abstand im IE ist Dein Script "anpassen()" im Frame home.html. Verändere da mal die jetzt angegebene Höhe von 13px, dann siehst Du, dass nur der IE darauf reagiert. Kann das nicht wegbleiben?

Gruß Anna

_Tobi_ · 26. Sep. 2007

Hi Anna,

das script anpassen() errechnet die notwendige Höhe des iframes und übergibt das ergebnis an diesen. sonst müsste ich doch die höhe auf der ganzen homepage konstant lassen?

Ich möchte die ganze Homepage mit iframe nach unten scrollen können, nicht nur den iframe. Verstehst du was ich meine?

gruß tobi

anna55 · 26. Sep. 2007

Darin gibst Du 13px dazu, die der IE zum Anlass für den Abstand nimmt. Was passiert denn, wenn Du die Pixelzahl auf 0 setzt? Mach das doch mal, so dass man online das Ergebnis begutachten kann.

_Tobi_ · 26. Sep. 2007

So nun ist die Zugabe bei 0px. Wie man sieht ist im ie nun alles wunderbar. FF hingegen ist um 13px nach oben verschoben, so dass das Impressumm weg ist!

anna55 · 26. Sep. 2007

Bei Styles nutze ich für solche Fälle schon mal conditional comments. Müsste eigentlich auch bei Scripten klappen:
Das in den head:

PHP:

<!--[if gte IE 5]>
<script defer type="text/javascript" src="script-für-ie.js"></script>
<![endif]-->

Dein "anpassen()"-Script mit der Höhe 0px packst Du in eine extra Datei und bindest die wie oben beschrieben in den Frame ein. Dort steht wie bisher die für Firefox optimierte Datei. Der IE sollte sich an der geringeren Höhe orientieren und der FF seine größere Höhe bekommen.

_Tobi_ · 26. Sep. 2007

Weltklasse Anna :grin:

Es funktioniert!

Eine "kleine" Sache wäre da noch:
ff lässt am rechten homepage rand einen etwa 2px breiten rand, während der ie sauber bündig abschließt...

Darstellungsunterschiede zwischen IE und Firefox...

_Tobi_

New member

ein schlauer

Lounge-Member

anna55

Moderator

_Tobi_

New member

anna55

Moderator

Albu

New member

_Tobi_

New member

anna55

Moderator

_Tobi_

New member

anna55

Moderator

_Tobi_

New member

anna55

Moderator

_Tobi_

New member

anna55

Moderator

_Tobi_

New member