Hallo
bin noch ziemlich neu in Sachen Html und CSS aber ich hab ein problem mit dem IE 7 und ich weis nicht woran das liegen könnte.
Ich habe schon in Google geschaut aber nichts gefunden was mir helfen könnte.
Hab auch mal bei "validator.w3.org" die Seite überprüfen lassen und es wurden Fehler angezeigt aber das hilft mir auch nicht wirklich weil die fehler die angezeigt werden nicht im HTML-Code von mir auftauchen
bis auf eines.
Darum frage ich einfach mal hier nach hilfe
Das Problem ist folgendes:
Ich habe 2 Link- Navigationen, eine oben und eine Links. Im Fire Fox sehen die 2 Navigationsleisten richtig aus d.h. es sitzt alles da wo es sein sollte.
Im IE allerdings sind Navigationen "verschoben" d.h. die obere Navigationsleiste ist wie eine Treppe angeordnet (von links oben nach rechts unten) und
bei der Navigation Links sind Links "nur" nach untenhin auseinander gezogen.
Wie gesagt habe ich die Seite ja überprüfen lassen und mir wurde gesagt das dieser Code vor dem <head> Abschnitt fehlt:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
Nachdem ich den Code eingefügt habe seh es im IE schon anders aus: Die Links Oben werden zwar immernoch wie eine Treppe angeordnet nur das der Content-Bereich nicht nach untengeschoben wurde
und die Links auf der linken Seite sind diesmal NICHT nach unten verzerrt.
Ich habe Screenshots angehängt: (Weil die Bilder sehr groß sind füge ich sie mal als Link ein)
HP im Fire Fox
HP im IE mit Code
HP im IE ohne Code
Mein HTML-Code:
HTML-Code:
<html>
<head>
<title>"EvSeMa"</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="config.css" rel="stylesheet" type="text/css" media="all">
</head>
<body style="text-align:center;">
<div id="Page">
<div id="Header"> </div>
<div id="Navi-Oben">
<ul id="Nav-Oben">
<li><a href="Layout.html" id="current">EvSeMa</a></li>
<li><a href="Gallerie.html">Angebot</a></li>
<li><a href="#">Preise</a></li>
<li><a href="#">Buchung</a></li>
<li><a href="#">Referenz</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>
<div id="Navi-Links">
<ul id="Nav-Links">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
<li><a href="#">Link6</a></li>
<li><a href="#">Link7</a></li>
<li><a href="#">Link8</a></li>
<li><a href="#">Link9</a></li>
<li><a href="#">Link10</a></li>
</ul>
</div>
<div id="Content">
<div id="Text">
<ul>
<li>Hallo ich bin eine testpage!</li>
<li>hhjk </li>
</ul>
</div>
</div>
<div id="Footer">
</div>
</div>
</body>
</html>
Und mein CSS-Code:
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
| #Page {
background-image:url(Bilder/Background.png);
background-repeat:repeat-x;
background-color:#1c3855;
width:1024px;
height:1090px;
position:relative;
margin:0px auto;
text-align:left;
}
#Header {
background-image:url(Bilder/Header.png);
width:974px;
height:160px;
float:left;
position:relative;
left:25px;
top:25px;
}
#Navi-Oben {
background-image:url(Bilder/Navi-Oben.png);
background-repeat:no-repeat;
width:924px;
height:25px;
float:left;
position:relative;
left:50px;
top:40px;
}
#Navi-Links {
background-image:url(Bilder/Navi-Links.png);
background-repeat:no-repeat;
width:150px;
height:300px;
float:left;
position:relative;
left:25px;
top:55px;
}
#Content {
background-image:url(Bilder/Content.png);
width:809px;
height:710px;
float:left;
position:relative;
left:40px;
top:55px;
}
#Text{
width:779px;
height:635px;
position:absolute;
left: 15px;
top: 50px;
}
#Footer {
background-image:url(Bilder/Footer.png);
width:974px;
height:100px;
float:left;
position:relative;
left:25px;
top:70px;
}
ul#Nav-Oben{
margin:2px;
padding:0px;
list-style:none;
}
ul#Nav-Links{
Margin:0px;
padding:0px;
list-style:none;
}
ul#Nav-Oben a{
float:left;
text-decoration:none;
text-align:center;
display:block;
margin: 0px 0px 0px 0px;
font: bold .8em verdana, "sans serif";
color:#FFFFFF;
}
ul#Nav-Links a{
float:left;
text-decoration:none;
text-align:center;
display:block;
margin: 25px 0px -25px 0px;
font: bold .8em verdana, "sans serif";
color:#FFFFFF;
}
ul#Nav-Oben li a:link, ul#Nav-Oben li a:visited{
width:115px;
line-height:21px;
}
ul#Nav-Oben li a:hover{
background-image:url(Bilder/Link_Oben-Hover.png);
background-repeat:no-repeat;
}
ul#Nav-Oben li a:active, ul#Nav-Oben li a#current{
background-image:url(Bilder/Link_Oben-Hover.png);
background-repeat:no-repeat;
}
ul#Nav-Links li a:link, ul#Nav-Links li a:visited{
width:150px;
line-height:25px;
}
ul#Nav-Links li a:hover{
background-image:url(Bilder/Link_Links-Hover.png);
background-repeat:no-repeat;
}
ul#Nav-Links li a:active, ul#Nav-Links li a#current{
background-image:url(Bilder/Link_Links-Hover.png);
background-repeat:no-repeat;
} |
Hier noch der Link zu meiner HP:
http://valhallaempire.va.funpic.de/evsema/Layout.html
Würde mich freuen wenn ihr mir helfen könnt
MfG
Ph4Z3r
1Danke
Zitat von Ph4Z3r
Zitieren
Login
