PyroGX
ich bin gerade an nem neuen design bei dem ich das menu über ne liste horizontal anordnen will
das menü soll exakt 24pixel hoch sein, bei mir ist unter und über dem menü aber noch viel zu viel platz (siehe anhang ff.jpg), beim IE7 nur unten (siehe anhang ie.jpg)
außerdem soll beim hover über den menüpunkt die gesamte breite mit nem anderen bild hinterlegt werden
im FF klappts auch wunderbar (siehe anhang ff_a.jpg)
beim IE ist es nur hinter dem link, wie kann ich das auch dort wie beim FF machen (siehe bild ie_a.jpg)
das ganze ist nicht das originaldesign aber ein originalgetreuer nachbau der sich auf das problem beschränkt
wäre super wenn mir da jemand helfen könnte
/edit den code sollte ich euch auchnoch geben
| 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:
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Testdesign</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body {
margin:0px;
}
.menu ul, .menu li {
display:inline;
width:auto;
height:24px;
margin:0px;
padding:0px;
padding-left:4px;
padding-right:4px;
border-left:#0099FF 1px solid;
}
.menu a {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
}
.menu li:hover, .menu a:hover {
background-color:#000000;
color:#CCCCCC;
text-decoration:none;
font-weight:bold;
}
</style>
</head>
<body>
<table style="width:100%;" cellpadding="0" cellspacing="0" border="1">
<tr>
<td colspan="2" style="height:24px; background-color:#333333;" align="right" valign="top" nowrap="nowrap">
<ul class="menu">
<li><a href="#">Testlink 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Testlink 3</a></li><li><a href="#">Testlink 4</a></li><li><a href="#">Testlink 5</a></li>
</ul>
</td>
</tr>
</table>
</body>
</html> |
|
faf4life
Vielleicht habe ich auch was an den Augen, aber zwischen ie_a und ff_a erkenne ich keinen Unterschied, abgesehen von der Höhe.
Was mir aber aufgefallen ist, unter den beiden IE Bildern ist noch ein einzelnes blaues Pixel, warum auch immer...
PyroGX
hm, stimmt, das klappt ja nun tatsächlich auch im IE, kurz bevor ich die screens gemacht habe wars noch anders
aber das andere problem besteht immernoch
PyroGX
jo, habe ich und hat nichts gebracht
PyroGX
ich habe inzwischen nochmal selber dran gebastelt, es ist besser geworden aber immer nochnicht so wie es sein soll
wenn ich ins li-css "float: right;" reinschreibe gehts aber es wird falschrum angezeigt und es ist vertigkal nicht mittig, somit kann es nicht "die lösung" sein, wäre super wenn mir beim neuen code jemand helfen könnte
| 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:
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Testdesign</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
margin:0px;
}
.menu ul {
height:24px;
margin:0px;
}
.menu li {
height:24px;
margin:0px;
display:inline;
width:auto;
}
.menu a {
height:24px;
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
margin: 0px;
padding:0px 5px 0px;
}
.menu li:hover, .menu a:hover {
color:#000000;
background-color:#FFFFFF;
margin:0px;
}
td.menu, div.menu {
height:24px;
background-color:#333333;
text-align:right;
margin:0px;
padding:0px;
}
-->
</style>
</head>
<body>
<br />
<table style="width:100%;" cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="2" class="menu" align="right" valign="middle">
<ul class="menu">
<li><a href="#">Testlink 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Testlink 3</a></li><li><a href="#">Testlink 4</a></li><li><a href="#">Testlink 5</a></li>
</ul></td>
</tr>
</table>
<br />
<div class="menu">
<ul class="menu">
<li><a href="#">Testlink 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Testlink 3</a></li><li><a href="#">Testlink 4</a></li><li><a href="#">Testlink 5</a></li>
</ul>
</div>
</body>
</html> |
|