nicht angemeldet
Menü-Liste & Safari
Hallo, ich habe ein Problem mit der korrekten Darstellung eines Menüs in Safari - vielleicht kann mir jemand den Grund erklären, warum die Darstellung der Listen Elemente in Safari verschoben werden:
URL:
http://u0063776338.user.hosting-agency.de/index.php?id=19
Screenshot (Safari):
http://img512.imageshack.us/img512/7778/safariym7.jpg
HTML:
<div id="content_list_menu">
<ul>
<li><a href="georgskapelle.htm" title="Georgskapelle">Georgskapelle<span>2007</span></a>
</li>
</ul>
</div>
CSS:
#content_list_menu {
font-size: 12px;
line-height: 12px;
}
#content_list_menu ul {
list-style-type: none;
list-style-position: outside;
}
#content_list_menu li {
margin: 0 0 12px -40px;
}
#content_list_menu a {
display: block;
width: 494px;
padding: 4px 0 8px 24px;
font-size: 12px;
color: #000;
text-decoration: none;
}
/* StarHTML-Hack for correct display in IE6 */
* html #content_list_menu a {
width: 518px;
padding: 4px 0 0 24px;
line-height:12px;
}
#content_list_menu a:hover {
background: #b5b9a4 url(../images/elements/content_list_bg_select.gif);
}
#content_list_menu span {
float: left;
position: relative;
left: 252px;
top: -1em;
}
Über Tips & Ansätze zur Lösung würd' ich mich sehr freuen!
-
Hi,
Über Tips & Ansätze zur Lösung würd' ich mich sehr freuen!
Na denne. Probiers mal etwas andersrum, imho ist Dein Konstrukt etwas um die Ecke gedacht. Beispiel anbei, passt im Safari, FF, IE7 und vermutlich auch IE6, wenn Du die CC ebenso setzt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head><style type="text/css">
div {
width: 400px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
list-style: none;
margin: 0;
padding: 0;
clear: left;
min-height: 1px;
}
ul li a {
display: block;
color: #000;
padding: 3px;
background: #e9e9e9;
text-decoration: none;
}ul li a:hover {
background: #c8c8c8;
}
ul li a span {
float: left;
width: 250px;
}</style>
<!--[if lte IE 6]>
<style>
li {
height: 1px;
}
</style>
<![endif]-->
</head>
<body>
<div>
<ul>
<li><a href="#"><span>Georgskapelle</span> 2007</li>
<li><a href="#"><span>Madonnen 21</span> 2006</li>
<li><a href="#"><span>Zeichnung der Befindlichkeit</span> 2000</li>
<li><a href="#"><span>Verlassen</span> 1999-2000</li>
</ul>
</div>
</body>
</html>Gruesse, Joachim
--
Am Ende wird alles gut.