Gegen Bilderklau - Das Original | Druckvorschau: Untermenü wird im IE falsch angezeigt

Geschrieben von Elincia am 04.02.2012 um 16:14:

Untermenü wird im IE falsch angezeigt

Hallo ihr Lieben,

ich bin momentan dabei die Homepage meiner Mutter zu überarbeiten und möchte sie sowohl für den Internet Explorer als auch für Mozilla Firefox optimieren. Aus Erfahrung weiß ich, dass dies letztendlich gar nicht 100%ig möglich ist, deshalb möchte ich einfach nur erreichen, dass die Seite in beiden Browsern einigermaßen fehlerfrei betrachtet werden kann (d.h. die Frames werden richtig positioniert und der Text ist lesbar - mehr will ich nicht).

Bisher klappt auch alles gut. Ich habe für die Frames jeweils den Bereich des Designs ausgeschnitten und als Hintergrundbild eingefügt, um auch in FF den richtigen HG und nicht nur eine Farbe im Frame zu haben.

Mein Problem liegt beim Untermenü. Ich habe ein Imagemap-Design mit einem Untermenübalken darunter.
Im Firefox wird das Untermenü auch so angezeigt, wie ich es haben wollte. Lediglich die Schrift sollte etwas höher, das ist bereits das erste Problem - wie mache ich das, ohne dass ich das Frame höher setzen muss?
So siehts im FF aus:

Und so im Internet Explorer:

Ich verstehe nicht, warum die Schrift im IE so weit nach unten gezogen wird und warum Times New Roman anstatt von Tahoma verwendet wird...

Code meiner index-Datei:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:

<html>
<head>
<title>Tierdialog-Netzwerk</title>
<style>body {
	scrollbar-face-color: #AD3844;
	scrollbar-highlight-color: #C6656F;
	scrollbar-3dlight-color: #DD7F89;
	scrollbar-darkshadow-color: #7F3840;
	scrollbar-shadow-color: #A42D38;
	scrollbar-arrow-color: #000000;
	scrollbar-track-color: #B2404C;
	background-image:url(Grafiken/hintergrundtierdialognetzwerk.gif);</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head> 
<body>
<img src="Grafiken/tierdialognetzwerk.png" usemap="#TK" border="0">
<div id="Layer1" style="position: absolute;  left: 90px; top: 142px;">
  <iframe src="untermenu.html" name="untermenu" width="568" height="28" frameborder=0 scrolling="no" noresize style="border: 0px" style="FILTER: chroma (color=#e7e7e7); background-image:url(Grafiken/HGmenuframe.png); background-repeat:no-repeat" ;>
  </iframe>
</div>

<div id="Layer2" style="position: absolute;  left: 15px; top: 180px;">
  <iframe src="NeueSeiten/main.html" name="main" width="630" height="425" frameborder=0 scrolling="auto" noresize style="border: 0px" style="FILTER: chroma (color=#e7e7e7); background-image:url(Grafiken/HGmainframe.png); background-repeat:no-repeat" ;>
  </iframe>
</div>
<map name="TK">
<area shape=rect (rect,circle,polygon) coords="16,70,190,125" href="untermenu1.html" target="untermenu">
<area shape=rect (rect,circle,polygon) coords="193,70,353,125" href="untermenu2.html" target="untermenu">
<area shape=rect (rect,circle,polygon) coords="355,70,500,125" href="untermenu3.html" target="untermenu">
<area shape=rect (rect,circle,polygon) coords="502,70,638,125" href="untermenu4.html" target="untermenu">
</map>



</body>
</html>

Code der css-Datei für's Menü:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:

body, input, textarea {
        font-size:12px;
        color: #5D0710;
        font:Tahoma;
        background-image:url(../Grafiken/HGmenuframe.png);
		background-attachment:fixed;
		background-repeat:no-repeat;
        text-align: left;
}

body {
color: #5D0710;
	scrollbar-face-color: #e7e7e7;
	scrollbar-highlight-color: #e7e7e7;
	scrollbar-3dlight-color: #e7e7e7;
	scrollbar-darkshadow-color: #e7e7e7;
	scrollbar-shadow-color: #aa6963;
	scrollbar-arrow-color: #aa6963;
	scrollbar-track-color: #e7e7e7;
}

p, li, td {
        font-size:12px;
}

h3 {
        font-size: 14px;
        margin: 0px;
        padding: 0px;
        font-weight: bold;
		letter-spacing: 1px;
		text-transform: uppercase;
		text-align: center;
		border-bottom: 2px dotted #000000;
}

a {
        color:#5D0710;
}
A:link {text-decoration: none; }
A:visited {text-decoration: none; }
A:hover {text-decoration: underline 1px dotted; }
A:active {text-decoration: none; }

.MENUE {
width: 560px;
border: 0px;
}

Code der Template-Datei für's Menü:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- TemplateBeginEditable name="doctitle" -->
<title>-</title>
<!-- TemplateEndEditable --><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->

<link href="../css/menuevorlage.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="MENUE"><!-- TemplateBeginEditable name="Inhalt" -->
    -
    <!-- TemplateEndEditable --></div>
</body>
</html>

Code der ersten Untermenü-Seite (untermenu1.html)

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:

<html><!-- InstanceBegin template="/Templates/VorlageMenue.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- InstanceBeginEditable name="doctitle" -->
<title>-</title>
<!-- InstanceEndEditable --><!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->

<link href="css/menuevorlage.css" rel="stylesheet" type="text/css">
</head>
<body>
<table class="MENUE">
  <tr>
    <td><!-- InstanceBeginEditable name="Inhalt" --><a href="NeueSeiten/main.html" target="main">Startseite</a>&nbsp;&nbsp;&nbsp;<strong>~</strong>&nbsp;&nbsp;&nbsp;<a href="NeueSeiten/impressum.html" target="main">Impressum</a>&nbsp;&nbsp;&nbsp;<strong>~</strong>&nbsp;&nbsp;&nbsp;<a href="NeueSeiten/bildnachweis.html" target="main">Bildnachweis</a>&nbsp;&nbsp;&nbsp;<strong>~</strong>&nbsp;&nbsp;&nbsp;Links&nbsp;&nbsp;&nbsp;<strong>~</strong>&nbsp;&nbsp;&nbsp;Forum&nbsp;&nbsp;&nbsp;<strong>~</strong>&nbsp;&nbsp;&nbsp;Gästebuch&nbsp;&nbsp;&nbsp;<strong>~</strong>&nbsp;&nbsp;&nbsp;Chat
    <!-- InstanceEndEditable --></td>
  </tr>
</table>
</body>
<!-- InstanceEnd --></html>

Kann mir jemand helfen, wie ich es hinbekomme, dass das Menü im IE richtig angezeigt wird?!

Geschrieben von bolop am 04.02.2012 um 19:00:

Gibts evtl. eine Live-Vorschau?

Geschrieben von Elincia am 04.02.2012 um 19:48:

http://www.tierdialog-netzwerk.de/index4.html

Wie gesagt, im Firefox stimmt es bisher soweit, nur im IE ist es falsch.
Habe das nun auch von mehreren Leuten ausprobieren lassen und es ist bei jedem so, liegt also nicht speziell an meinem Laptop (hatte ich zuerst gedacht).

Geschrieben von bolop am 04.02.2012 um 22:57:

Komisch, bei mir ohne Probleme.

und

Geschrieben von Elincia am 05.02.2012 um 09:46:

Mh, aber wie gesagt - die Schrift sollte bei beiden Tahoma sein, nicht Times New Roman.
Außerdem ist die Schrift an sich etwas weit unten. Wenn man genau hinsieht sind nämlich Buchstaben wie "g" oder "p" abgeschnitten.
Das ist mein Problem. =/
Vermutlich liegt es auch etwas an der Auflösung, aber kann ja auch irgendwie nicht sein, dass in dem einen Browser kaum ne Schrift erkennbar ist und beim anderen ist es einigermaßen normal.

Geschrieben von Ileina am 05.02.2012 um 11:06:

Bei mir siehts gleich aus wie bei bolop.

Probier vllt. mal auch bei .MENUE die Schriftart zu definieren. (Bzw. im td)

php:
1: 2: 3: 4: 5:	.MENUE { width: 560px; border: 0px; font:Tahoma; }

und/oder:

php:
1: 2: 3: 4:	p, li, td { font-size:12px; font:Tahoma }

Geschrieben von Elincia am 05.02.2012 um 11:40:

Oh man, manchmal ist die einfachste Lösung echt die beste.
Ich habs jetzt einfach auf jeder einzelnen Menüseite mit <font face="Tahoma"></font> festgelegt und siehe da - es geht.
Warum das jetzt mit den css-Dateien nicht funktioniert, weiß ich zwar noch immer nicht, aber ist mir nun auch egal. großes Grinsen

Danke für eure Hilfe.