✔ IE6 listnavi Problem

Taft · 22. Januar 2009

Guten Morgen zusammen.

Ich glaube ich dreh hier noch durch. Bin seit einer Stunde am googeln und suche eine Lösung für meine Navigation

.

Es sieht so aus als würde der IE6 irgendwie ein problem mit meinem CSS haben.
Schaut doch einfach mal rein und gebt euer bestes

HTML code

HTML:

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

</head>

<body>  

<div id="logo"><img src="../images/logo_immobilien.gif" alt="Dr.Meyer Immobilien AG, Bern" width="176" height="108"></div>
<div id="container"> 

<div id="navcontainer">
<ul id="navlist">
		<li><a href="../unternehmung.html">Unternehmung</a></li>
		<li><a href="../projekte.html">Projekte</a></li>
		<li><a href="../kontakt.html">Kontakt</a></li>
		<li><a href="../partner.html">Partner</a></li>
</ul>
</div>

  <div id="zweitezeile"></div>
  <div id="drittezeile"></div>
  <div id="contentwrapper"> 
    <div id="content"></div>
    <div id="contenttitle"></div>
  </div>
</div>
<div id="webdesign"></div>
</body>
</html>

und der CSS code

Code:

html { height:100%; }

body { 
    height:                 100%;
    background-color:       #ffffff;
	background-image:		url(images/bg.gif);
	background-repeat: 		repeat-x;
    margin:                 0px;
	padding:				0px;
}

.titel {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
}

.untertitel {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px; font-weight: bold;
}

#container {
	position: 				relative;
	top:					50px;
	left:					32px;
    text-align:             left;
    margin:                 0px;
    padding:                0px;
    width:                  780px;
    height:                 600px;
}

#contentwrapper {
	position: 				absolute;
	background-image:		url(images/bg_content.gif);
	background-repeat:		repeat-x;
    text-align:             left;
    margin:                 0px auto;
    padding:                0 auto;
	top:					175px;
	left:					134px;
    width:                  700px;
    height:                 565px;
	border:					1px solid #333333;
}
#content td {
	color: 					#333333; 
	font-size: 				11px;
	font-family: 			Arial, Helvetica, sans-serif;
	line-height:			16px;
	}

#contenttitle{
	position: 				absolute;
    text-align:             left;
    margin:                 0px auto;
	top:					2px;
	left:					14px;
    width:                  700px;
    height:                 15px;
	color: 					#333333; 
	font-size: 				13px;
	font-family: 			Arial, Helvetica, sans-serif;
}

#content{
	float:left;
	position: 				absolute;
    text-align:             left;
    margin:                 0px auto;
    padding:                10px auto;
	top:					32px;
	left:					15px;
    width:                  700px;
    height:                 565px;
	color: 					#333333; 
	font-size: 				11px;
	font-family: 			Arial, Helvetica, sans-serif;
	line-height:			16px;
}
#content a:link, #content a:visited 
{
	color:  				#333333;
	font-size: 				11px; 
	font-family: 			Arial, Helvetica, sans-serif;
	}
	
#content a:active, #content a:hover 
{
	color:  				#000000;
	font-size: 				11px; 
	font-family: 			Arial, Helvetica, sans-serif;
	text-decoration:		none;
	}

#logo {
	position: 				absolute;
    text-align:             left;
    margin:                 0px auto;
    padding:                0px auto;
	left:					16px;
	top:					16px;
    width:                  200px;
    height:                	80px
}

#zweitezeile td {
	color:					#333333;
	font-size: 				12px; 
	font-family: 			Arial, Helvetica, sans-serif;

}

#drittezeile {
	position:				absolute;
	font-size: 				9px; 
	font-family: 			Arial, Helvetica, sans-serif;
	top:					138px; 
	left: 					153px;
	width: 					100%;
	color: 					#333333; 
}

.partnertext {
	font-size: 				9px; 
	font-family: 			Arial, Helvetica, sans-serif;
	}
	
a.partner:link, a.partner:visited 
{
	color:  #333333;
	font-size: 				9px; 
	font-family: 			Arial, Helvetica, sans-serif;
	}
	
a.partner:active, a.partner:hover 
{
	color:  #000000;
	font-size: 				9px; 
	font-family: 			Arial, Helvetica, sans-serif;
	text-decoration:		none;
	}

#webdesign {
			position: 	absolute;
			left: 		-2000px;
			top: 		-2000px;
			width: 		1px;
			height: 	1px;
			}
			
/* ul navi */
#navcontainer
{
position: 				absolute;
top:					89px; 
left: 					132px; 
}
#navcontainer ul
{



font-size: 				12px; 
font-weight: 			bold;
font-family: 			Arial, Helvetica, sans-serif;
padding-left: 0;
margin-left: 0;
color:#FFFFFF;
float: left;
width: 100%;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
padding: 1px 1em;
background-image:url(images/bg_nav.gif);
color: ffffff;
text-decoration: none;
float: left;

}

#navcontainer ul li a:hover
{
background-image:url(images/bg_nav_mo.gif);
color:#000000;
}
#navcontainer ul li a:visited
{
text-decoration: none;
}

danke Jungs...

Maik · 22. Januar 2009

Hi,

kannst du vielleicht auch näher erläutern, welches Problem der IE6 deiner Meinung nach mit deinem CSS für das Listenmenü haben soll?

Ich kann da nämlich in ihm soweit keinen Darstellungsunterschied zu den übrigen Browsern feststellen.

Code:

#navcontainer ul li a
{
padding: 1px 1em;
background-image:url(images/bg_nav.gif);
color: #ffffff; /* hier fehlt das Rautenzeichen */
text-decoration: none;
float: left;

}

mfg Maik

MarkoHimmel · 22. Januar 2009

Was soll das denn für ein Problem sein ?

Auf der schnelle ist mir folgendes aufgefallen:

#navcontainer ul li a
{
padding: 1px 1em;
background-image:url(images/bg_nav.gif);
color: ffffff;
text-decoration: none;
float: left;

}

also nicht fffff sondern #fff... Farbe ändern und vielleicht eine andere Farbe als weiß mit weißem Hintergrund...z.B. #000;

P.S.: da war jemand schneller

Taft · 22. Januar 2009

danke erstmals für die schnelle Hilfe und das mit dem "#"

also bei mir sieht das so aus...

Maik · 22. Januar 2009

Analog zu den linken Polsterungseigenschaften (margin-left,padding-left) des ul-Listenelements müssen ebenfalls die Oberen (margin-top,padding-top) auf null zurückgesetzt werden, da sie in den Browsern unterschiedliche Initialwerte besitzen, was derzeit zu der diskrepanten vertikalen Ausrichtung des Elements führt; dementsprechend muß für das DIV #navcontainer seine Startposition von oben korrigiert werden:

Code:

#navcontainer
{
position:                                 absolute;
top:                                        89px; /* muß korrigiert werden */
left:                                         132px;
}
#navcontainer ul
{
font-size:                                 12px;
font-weight:                         bold;
font-family:                         Arial, Helvetica, sans-serif;
padding-top: 0;
padding-left: 0;
margin-top: 0;
margin-left: 0;
color:#FFFFFF;
float: left;
width: 100%;
}

mfg Maik

Taft · 22. Januar 2009

Danke Maik

Jetzt funktionierts.
Du bist ein Gott

✔ IE6 listnavi Problem

Taft

Mitglied

Maik

MarkoHimmel

Grünschnabel

Taft

Mitglied

Anhänge

Maik

Taft

Mitglied

Neue Beiträge