css menu im Netscape

CyKingTJ · 04.02.2005, 09:14

Hallo Leute,

hab da ein Darstellungsproblem im Netsape. Ich hab ne Seite gebastelt mit css menu. Im Internet Explorer zeigt er die Höhe der Navi richtig an, im Netscape jedoch ist die Navi nur so hoch wie der Schriftgrad.

Hier ist das css meiner Navi.

Code:

#menu ul {list-style-type: none;  background: #5F7666; white-space: nowrap;  border: 1px solid White;                                }
#menu li { width:100; text-align: center; DISPLAY: INLINE;  padding-bottom: 0px;  padding-top: 0px;  border-left: 1px solid #5F7666;  border-right: 1px solid #5F7666;          }
#menu a {text-decoration: none;  width: 100px; padding-top:24px; padding-bottom: 24px;    color: White;  border-left: 1px solid #5F7666;  border-right: 1px solid #5F7666;         }
#menu a:hover {color: #637A6A;background: #BDCAC1; width: 100px;  padding-top: 24px; padding-bottom: 24px;  border-right: 1px solid White;  border-left: 1px solid White;           }
#menua:active {color: #637A6A;background: #BDCAC1;  margin: 0px 0px 0px 0px;   }

Hat einer ne Ahnung was davon der Netscape nicht schluckt?

Danke für die Hilfe,

CyKingTJ

Boris · 04.02.2005, 11:55

Welcher Netscape? Netscape 4? 6? 7?

Zudem wär eine Version online besser zu beurteilen

hero-master · 04.02.2005, 12:05

Hi CyKingTJ

,
erstmal was allgemeines:
Was du mit a definiert hast, musst du nicht mehr mit a:hover, etc definieren

zu deinem Problem:
Lass das mit padding und arbeite mit display:block

CyKingTJ · 04.02.2005, 12:28

Ich meine Netscape 7. Wo soll ich denn padding gegen display: block; austauschen und wie kriege ich dann noch meine exakten Höhen hin?

CyKingTJ

Boris · 04.02.2005, 12:45

Wenn du dem a-Tag ein display:block verpasst, ist es ein Blockelement und Du kannst ihm eine Größe mit width und height verpassen

hero-master · 04.02.2005, 13:30

Hi nochmal,
schau mal, ob es so klappt:

HTML-Code:

<style type="text/css">
#menu ul {list-style-type: none;  /*background: #5F7666;*/ /*white-space: nowrap;*/  border: 1px solid White; padding:0; margin:0}
#menu li {background:#5F7666; width:100px; text-align: center; DISPLAY: INLINE;  padding-bottom: 0px;  padding-top: 0px;*/  border-left: 1px solid #5F7666;  border-right: 1px solid #5F7666; float:left /*Das muss du per clear:left wieder rückgängig machen, nach der Liste*/}
#menu li a {text-decoration: none;  width: 100px; /*padding-top:24px; padding-bottom: 24px;*/  color: White;  border-left: 1px solid #5F7666;  border-right: 1px solid #5F7666; display:block; line-height:48px}
#menu li a:hover {color: #637A6A; background: #BDCAC1; /*width: 100px;  padding-top: 24px; padding-bottom: 24px;*/  border-right: 1px solid White;  border-left: 1px solid White}
#menu li a:active {color: #637A6A; background: #BDCAC1;  margin: 0px 0px 0px 0px /*Kurzform dafür: margin:0*/}
</style>

CyKingTJ · 04.02.2005, 17:48

Super Sache, vielen Dank für Deine Hilfe, habs jetzt so hinbekommen für den netscape wie es sein soll.

TJ

CyKingTJ · 05.02.2005, 16:28

Das haut leider doch noch nicht hin wie es soll, zumindest nicht mit dem Rand. Kann sich jemand mein Werk nochmal angucken und mir sagen warum es im internet explorer noch anders aussieht als im Netscape?

Hier das Menu. www.e-schop.de/vgruna/menu/menu.htm

Hier die css-datei dazu www.e-schop.de/vgruna/menu/menu.css

Danke für die Hilfe,

TJ

CyKingTJ · 07.02.2005, 08:57

He, kann mir denn niemand helfen? Ich denke für einen Experten ist es ein Kinderspiel einen Rahmen um die Navi zu legen ohne Abstände und den man dann auch im Netscape sehen kann.

Bitte bitte Hilfe !!

TJ

Boris · 07.02.2005, 09:34

Da hier keiner wirklich weiß, wie die Navigation nun wirklich im Endeffekt aussehen soll (bei mir sieht es im IE auch komisch aus), hab ich sie mal grundlegend umgebaut. Du hast bei Dir im übrigen einen validen DOCTYPE vergessen, und viel Krams eingebaut, der da nicht hin gehört.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
		<title>Tabletest</title>
		<meta http-equiv="content-type" content="text/html; iso-8859-1">
<style type="text/css" media="screen,projection">
*
{
	margin: 0;
	padding: 0;
}
body
{
	background: #506757;
}

#menu
{
	margin: 0 0 0 20px;
	text-align: center;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	border: #fff 1px solid;
}

#menu ul
{
	list-style-type: none;
}

#menu li
{
	float: left;
	background:#5F7666;
	width:100px;
	text-align: center;
}

#menu li a
{
	border-right: 1px solid #506757;
	border-left: 1px solid #506757;
	display: block;
	text-decoration: none;
	width: 100px;
	color: #fff;
	line-height: 66px;
}

#menu li a:hover
{
	color: #637A6A;
	background: #BDCAC1;
	width: 100px;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
}

#menu li a:active
{
	color: #637A6A;
	background: #BDCAC1;
}
</style>
</head>
<body>

<div id="menu">
	<ul>
		<li><a href="#">Help</a></li>
		<li><a href="#">Entertainment</a></li>
		<li><a href="#">test</a></li>
		<li><a href="#">test</a></li>
		<li><a href="#">test</a></li>
	</ul>
	<p style="clear: left" /></p>
</div>



</body>
</html>

hero-master · 07.02.2005, 09:35

Hi cyKingTJ,
sorry für die "längere" Wartezeit

Gib dem li mal die Breite von 102px

HTML-Code:

#menu ul {list-style-type:none; border:1px solid white; height:66px; padding:0; margin:0}
#menu li {background:#5F7666; width:102px; text-align:center; float:left}
#menu li a {text-decoration:none; width:100px; color:white; display:block; line-height:66px}
#menu li a:hover {color:#637A6A; background:#BDCAC1; border-right:1px solid #fff; border-left:1px solid #fff}
#menu li a:active {color:#637A6A; background:#BDCAC1}

[edit]
Man sollte nicht erst was schreiben, dann essen gehen und dann abschicken..zu spät

CyKingTJ · 07.02.2005, 11:22

Hey Nico,

schön dass Du mir hilfst, bin Dir echt dankbar.

Hab jetzt das von Dir mal eingebaut und das sieht so aus

www.e-schop.de/vgruna/menu/menu.htm

Gucke nochmal. Ist schon fast gut nur der rechte weiße Rand soll auch noch genau ran, dann ist es richtig.

TJ

Boris · 07.02.2005, 12:01

Mein Code hat Dich wohl nicht interessiert?

CyKingTJ · 07.02.2005, 12:14

Sorry, den hab ich gerade erst ausprobiert. Wenn ich den nehme dann ist rechts auch ein großer Rand. Kannst mal gucken unter http://www.e-schop.de/vgruna/menu/menu1.htm

Und ein Rand zwischen den Schaltflächen soll auch nicht sein.

Dir auch nochmal ein riesen Dank für Deine Hilfe.

TJ

321 · 07.02.2005, 12:20

Zitat:

Zitat von CyKingTJ

Ist schon fast gut nur der rechte weiße Rand soll auch noch genau ran, dann ist es richtig.

Ich seh da links (bei Help) einen (Doppel-) Rand der nicht hingehört. Bei Adagios Version war es noch sauber.