Hi Leute,
hoffe ihr könnt mir bei meinem Problem helfen. Ich habe ein kleines CSS-Menü bzw. eine Sidebar die im Firefox problemlos angezeigt wird.
Unten könnt ihr sehen wie das ganze im Internetexplorer aussieht und wie das im Firefox aussieht. Leider sieht es im Internet Explorer doch etwas verbuggt aus.
Hier noch der HTML Code mit CSS:
html: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
117
118
119
120
121
122
123
124
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css" media="screen">
body
{
margin: 0;
padding: 0;
font: arial, hevetica, sans-serif;
background: url(bg-main-x.gif) bottom left repeat-x fixed;
}
#container
{
margin: 1em auto;
width: 799px;
background-color: #FFFFFF;
border: solid;
border-width: 1px;
}
#header
{
height: 230px;
background-image: url(thomas.jpg);
}
#mainnav
{
background-color: green;
}
#menu
{
float: right;
width: 200px;
height: 100px;
}
#menu ul
{
text-align: left;
margin-left: 0;
padding-left: 0;
padding-bottom: 0;
padding-top: 0;
margin-botttom: 0;
margin-top: 0;
list-style-type: none;
background: url(navi-mid.png) top left repeat-y;
}
#menu li
{
padding: 0;
margin: 0;
}
#content
{
margin-right: 250px;
margin-left: 20px;
height: 500px;
background-color: aqua;
}
#footer
{
height: 20px;
background-color:#CCCC66;
}
#menu li a {
display:block;
padding: 0px 0px 7px 30px;
background-image: url(navi-mid.png);
background-repeat: repeat-x;
font: normal normal .9em/1.5 Verdana, Arial, Helvetica, sans-serif;
/* letter-spacing: .04em;*/
}
#menu li a:hover {
padding: 0px 0px 7px 30px
background-position:top left;
background:url(navi-mid-hover.png) 0 100% no-repeat;
font-weight: bold;
text-decoration: none;
color:#6D4B38;
cursor:default;
border-bottom: 1px dashed #000000;
border-left: 1px dashed #000000;
border-top: 1px dashed #000000;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="mainnav">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
<div id="menu">
<img src="navi-top.png" />
<ul>
<li><a href="#">modern</a></li>
<li><a href="#">modern</a></li>
<li><a href="#">modern</a></li>
<li><a href="#">modern</a></li>
<li><a href="#">modern</a></li>
<img src="navi-bot.png" />
</ul>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html> |
Nicht wundern wegen der komischen farben. Ist noch im Aufbau hab einfach mal ein paar farben genommen, damit ich die einzelnen Boxen gut erkennen kann.
Falls sonst noch etwas negatives am Code auffallen sollte bitte sagen, bin relativ ungeübt in css und bin deshalb um jede Hilfe dankbar :)
So hier noch die Screenshots:
zuerst der Internetexplorer:
Und so soll es aussehen (wie hier im Firefox)
mfg
Stefan Litzel
Forum: Website & Webprogrammierung 
Mitglieder gesamt: 68138 
