CSS positionierung

[DadyCool]

Hi,

ich bekomme die Positionierung einfach nicht hin. Im IE ist es ok aber im Firefox ist es verschoben. Mache ich es im Firefox richtig passt es im IE nicht.


und dort um das Submenü. Das Manmenü ist im IE und im Firefox richtig, aber warum geht das nicht auch so mit dem Submenü ?

hier ist mein CSS

html {
	
	background-image:url(images/background.jpg); background-repeat:repeat-x; background-color:#C3C1FD;
	color: #000000;
	font-size: 12px;	
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
a:link { text-decoration:none; font-weight:normal; color:#ffffff; font-size:12px; font-family:Arial, Helvetica, sans-serif; }
a:visited { text-decoration:none; font-weight:normal; color:#ffffff; font-size:12px; font-family:Arial, Helvetica, sans-serif;}
a:hover { text-decoration:none; font-weight:normal; color:#000000; font-size:12px; font-family:Arial, Helvetica, sans-serif;}
a:active { text-decoration:none; font-weight:normal; color:#ffffff; font-size:12px; font-family:Arial, Helvetica, sans-serif;}
a:focus { text-decoration:none; font-weight:normal; color:#ffffff; font-size:12px; font-family:Arial, Helvetica, sans-serif;}

img {
	border: 0px none;
}

#main {
	
	width: 800px;
	margin:auto;
}

#head {
	background: url(images/banner.gif);
	height: 200px;
}

ul.nav{
display: block;
margin: 0;
padding-top: 160px;
padding-left: 5px;
list-style-type: none;
}

li.navs {
position: relative;
display: inline;
float: left;
display: block;
width: 99px;
text-align:center; 
}

ul.nav-secondary {
display: block;
margin: 0;
padding-top: 9px;
padding-left: 5px;
list-style-type: none;
}

li.last {
position: relative;
display: inline;
float: left;
display: block;
width: 99px;
text-align:center;
}
li.last:hover {
background: #666666;
} 

#content {
background:#ffffff;
border-left: 1px solid black;
border-right: 1px solid black; 
}

#content-txt {
    display: block; 
	padding-right: 50px;
	padding-left: 50px;
	padding-bottom: 20px;
	padding-top: 20px;
	text-align:justify; 

}

#footer {
	height: 35px;
	text-align:center; 
	padding-top: 15px;
	background:#474747;
	border-left: 1px solid black;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
}

Schonmal Danke um Vorraus

DadyCool

 

[chrissel]

Der IE hat ein anderen Boxenmodell wie der FF, glaube daran liegt es.
Du könntest eine Browserweiche verwenden, also du machst den Abstand nach oben ganz normal vom FF aus und dadrunter machst du dann

* html ul.nav-secondary {
  padding-top: 9px;
}

 

[ZeroCCC]

Der IE hat ein anderen Boxenmodell wie der FF, glaube daran liegt es.
Du könntest eine Browserweiche verwenden, also du machst den Abstand nach oben ganz normal vom FF aus und dadrunter machst du dann

* html ul.nav-secondary {
  padding-top: 9px;
}

Nein das liegt nicht am Boxenmodell. Das leigt daran das man sich hier auf Standardwerte vom Browser verläst. Gibt man den beiden Listen eine Höhe ist das Problem gegessen.

 

[DadyCool]

Hey, schonmal danke!
Ich habe den Li mal eine Höhe gegeben, leider funktioniert das noch nicht ganz

html {
	
	background-image:url(images/background.jpg); background-repeat:repeat-x; background-color:#C3C1FD;
	color: #000000;
	font-size: 12px;	
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
a:link { text-decoration:none; font-weight:normal; color:#ffffff; font-size:12px; font-family:Arial, Helvetica, sans-serif; }
a:visited { text-decoration:none; font-weight:normal; color:#ffffff; font-size:12px; font-family:Arial, Helvetica, sans-serif;}
a:hover { text-decoration:none; font-weight:normal; color:#000000; font-size:12px; font-family:Arial, Helvetica, sans-serif;}
a:active { text-decoration:none; font-weight:normal; color:#ffffff; font-size:12px; font-family:Arial, Helvetica, sans-serif;}
a:focus { text-decoration:none; font-weight:normal; color:#ffffff; font-size:12px; font-family:Arial, Helvetica, sans-serif;}

img {
	border: 0px none;
}

#main {
	
	width: 800px;
	margin:auto;
}

#head {
	background: url(images/banner.gif);
	height: 200px;
}

ul.nav{
display: block;
margin: 0;
padding-top: 160px;
padding-left: 5px;
list-style-type: none;
}

li.navs {
position: relative;
display: inline;
float: left;
display: block;
width: 99px;
[B]height:23px;[/B]
text-align:center; 
}

ul.nav-secondary {
display: block;
margin: 0;
padding-top: 9px;
padding-left: 5px;
list-style-type: none;
}

li.last {
position: relative;
display: inline;
float: left;
display: block;
width: 99px;
height:15px;
text-align:center;
}
li.last:hover {
background: #666666;
} 

#content {
background:#ffffff;
border-left: 1px solid black;
border-right: 1px solid black; 
}

#content-txt {
    display: block; 
	padding-right: 50px;
	padding-left: 50px;
	padding-bottom: 20px;
	padding-top: 20px;
	text-align:justify; 

}

#footer {
	height: 35px;
	text-align:center; 
	padding-top: 15px;
	background:#474747;
	border-left: 1px solid black;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	
}

#footer-link {
font-size:10px;
}

#footer-link a{
font-size:10px;
}

 

[ZeroCCC]

So haut es hin:

#head {
    background: url(banner.gif);
    height: 200px;
    overflow: hidden;
}

ul.nav {
	margin: 145px 0 0 0;
	
	height: 20px;

	display: block;
	padding-left: 5px;
	list-style-type: none;
}

ul.nav li{
	position: relative;
	display: inline;
	float: left;
	display: block;
	width: 99px;
	text-align:center; 
}


ul.nav-secondary {
	display: block;
	margin: 5px 0 0 0;
	padding-left: 5px;
	list-style-type: none;
	height: 20px;
}

ul.nav-secondary li {
	position: relative;
	display: inline;
	float: left;
	display: block;
	width: 99px;
	text-align:center;
}

ul.nav-secondary li:hover {
	background: #666666;
}

musst aber noch folgendes abändern:

<div id="head">
                             
                             <ul class="nav">

 

[DadyCool]

Super DANKE! Funktioniert!

Wenn du noch die Zeit und Lust findest, könntest du vielleicht ein paar Sätze dazu sagen, was du gemacht hast. Damit ich das beim nächsten mal selber hin bekomme

DANKE

DadyCool