Hilfe mit Navigations CSS - IE klappt, Firefox/Opera nicht

vandura

Hallo,

bin etwas am verzweifeln. habe ein Seitenlayout per css definiert. Die bunten Kästen sollen dann mit Inhalt gefüllt werden.

Ich habe auch zwei Boxen angelegt, die die Haupt- bzw. Unternavigation aufnehmen sollen. Unter IE sieht das ganze sehr vernünftig aus, jedoch unter Firefox/Opera werden die Naviagtionspunkte versetzt angezeigt und auhc das Rollover ist nicht zu sehen.

Kann mal jemand einen Blick drauf werfen und mir weiterhelfen bitte?

Hier geht es zur Seite

Weiss nicht ob das hilft, aber ich schreib hier mal die css-Datei rein:

body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
margin: 0px;
}

/* Kopfbereich fuer Logo */
#header {
height: 101px;
padding: 0px;
background-color: #38ff03;
}

/* Container fuer die Hauptnavigation */
#hNavContainer {
height: 23px;
padding: 0px;
background-color: #FF0000;
}

/* Container fuer die Unternavigation */
#uNavContainer {
height: 20px;
padding: 0px;
background-color: #ff8003;
}

/* Bereich rechts fuer Newsbox etc */
#right {
background-color: #c30dff;
width: 141px;
min-height: 100px;
float: right;
margin-left: -3px;
}

/* Container fuer Seiteninhalt */
#content {
background-color:#ffeb0d;
width: 579px;
height: 600px;
float: left;
}

/* Container fuer Seitenfuss */
#footer {
background-color: #0dfff6;
height: 32px;
font-size: 1px;
}

/* Hauptnavigation */
#hNav ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#hNav ul li {
display: inline;
background-color: #e6e6e6;
}

#hNav ul li a {
text-decoration: none;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
height: 23px;
padding: .3em .6em;
color: #3d4695;
background-color: #e6e6e6;
border: 0px solid #FF0000;
}

#hNav ul li a:hover {
color: #3d4695;
background-color: #e6e6e6;
background-image: url(hNavRollover.jpg);
background-repeat: no-repeat;
}

GREEndestiny

Code

#hNav ul li a:hover { 
    background: url(hNavRoll.jpg) no-repeat; 
}

vandura

Danke für die Antwort. Leider behebt das keines meiner Probleme. Im IE sieht es noch wie vor ok aus, aber weder der Versatz der hNav-Elemete wird behoben, noch zeigt Firefox/Opera das Rollover-Bild korrekt an.

Hat noch jemand eine Idee??

ad3nau

ich denke das das problem bei ie liegt, weil er ie (soeit ich weiß) höhenangaben von links annimmt, was aber kein anderer browser macht, und das ist glaub ich auch nicht valide. du müsstest nur bei deinen linksdisplay: block angeben. also deine links warn glaub ich #hnav,also würde das dann so aussehen:

Code

#hNav ul li a {
text-decoration: none;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
height: 23px;
padding: .3em .6em;
color: #3d4695;
background-color: #e6e6e6;
display: block;
}

Alles anzeigen

hoffe das ist richtig was ich hier gesagt habe ..

mfg

//edit: leider funtzt das nicht so wie ich es gehofft hatte, deswegen musst du wahrscheinlich jeden link ein class zuweißen, und nicht mit id für den ganzen nav bereich arbeiten. dabei musst du wieder display: block einfügen, bei den class.

mfg

vandura

Uih...bin doch ein Noob. Kannst Du das etwas genauer erklären, wie Du das mit den class für jeden Link meinst?

Danke sehr :)))

ad3nau

hmm, also war ich mit meinem display block eig völlig flasch, weil er damit alles untereinander anzeigt, ich habe jetzt mal was probiert, doch es ist genauso wie du es haben möchtest ..

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" href="css/standard.css" type="text/css" />
<style type="text/css">
<!--
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
margin: 0px;
}


/* Kopfbereich fuer Logo */
#header {
height: 101px;
padding: 0px;
background-color: #38ff03;
}


/* Container fuer die Hauptnavigation */
#hNavContainer {
height: 23px;
padding: 0px;
background-color: #FF0000;
}


/* Container fuer die Unternavigation */
#uNavContainer {
height: 20px;
padding: 0px;
background-color: #ff8003;
}


/* Bereich rechts fuer Newsbox etc */
#right {
background-color: #c30dff;
width: 141px;
min-height: 100px;
float: right;
margin-left: -3px;
}


/* Container fuer Seiteninhalt */
#content {
background-color:#ffeb0d;
width: 579px;
height: 600px;
float: left;
}


/* Container fuer Seitenfuss */
#footer {
background-color: #0dfff6;
height: 32px;
font-size: 1px;
}






#hNav{
display: run-in;
background-color: #e6e6e6;
height: 23px;
}




a.link {
text-decoration: none;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
height: 23px;
padding: .3em .6em;
color: #3d4695;
background-color: #e6e6e6;
border: 0px solid #FF0000;
display: run-in;
}


a.link:hover {


color: #3d4695;
background-color: #e6e6e6;
background-image: url(hNavRollover.jpg);
background-repeat: no-repeat;
height: 23px;
display: run-in;
}
-->
</style>






</head>


<body>


<div style="width:760px;margin:0px auto;text-align:left;background-color:#bdbec6;border:1px solid #000000;">


	<div id="header"></div>
	<div id="hNavContainer">


 		<div id="hNav">


			[url='#']Unternehmen[/url]
			[url='#']Dienstleistungen[/url]
			[url='#']Kontakt[/url]


			[url='#']Informationen[/url]
			[url='#']Partner[/url]
			[url='#']Links[/url]
			[url='#']Referenzen[/url]
			[url='#']Jobs[/url]
			[url='#']Impressum[/url]




		</div>


	</div>
	<div id="uNavContainer"></div>
	<div id="content"></div>
	<div id="right"></div>


	<br style="clear:both;" />


	<div id="footer"></div>




</div>


</body>
</html>

Alles anzeigen

vlt kannste damit weiterarbeiten. aber wie gesagt, so wie du das haben wolltest hab ich das net hinbekommen

mfg

vandura

Danke schonmal für Deine Mühe,

im IE sieht es nach wie vor gut aus.

Der Firefox verschiebt die Hyperlinks irgendwie immer noch 1 oder 2 Pixel nach oben. Sehr seltsam.

Und komischerweise macht der Opera aus Deinem Sytlesheet eine Liste untereinander.

Noch eine Idee?

ad3nau

ich hätte nur noch die idee die ganze navi leiste grau zu machen, und das rot rauszunehmen. mehr würde mir aber auch nicht einfallen, sry

mfg

Tags