Hi,
Habe ein Problem mit dem sogenannten 3px Textsprung. Im IE7 rutscht die Navigation ein paar Pixel runter obwohl ich den Holy Hack anwende. Hier mal der Code, vielleicht habe ich das ganze irgendwie auch falsch interpretiert.
Habe ein Problem mit dem sogenannten 3px Textsprung. Im IE7 rutscht die Navigation ein paar Pixel runter obwohl ich den Holy Hack anwende. Hier mal der Code, vielleicht habe ich das ganze irgendwie auch falsch interpretiert.
Code:
body, html {
height:100%;
margin : 0;
padding : 0;
background-image : url(../img/background1.jpg);
background-repeat : repeat-x;
}
/* hide hack from Mac-IE5 \*/
* html .container {
height: 1%;
}
/* end hiding */
/*navigation*/
#menu_tab {
width : 1000px;
height : 50px;
background-color : #fff;
}
ul.menu {
font-family : Arial, Helvetica, sans-serif;
list-style-type : none;
float : left;
display : block;
width : 1000px;
margin : 0;
padding : 0;
background : url(../img/menu_bg.gif) repeat-x;
}
ul.menu li {
display : inline;
font-size : 11px;
font-weight : bold;
line-height : 50px;
}
ul.menu li.line {
display : inline;
width : 2px;
height : 50px;
float : left;
background : url(../img/menu_line.gif) no-repeat center;
}
a.nav1:link, a.nav1:visited {
display : block;
float : left;
padding : 0 8px 0 22px;
margin : 0 14px 0 14px;
height : 50px;
text-decoration : none;
background : url(../img/home.png) no-repeat left;
color : #676d77;
}
a.nav2:link, a.nav2:visited {
display : block;
float : left;
padding : 0 8px 0 22px;
margin : 0 14px 0 14px;
height : 50px;
text-decoration : none;
background : url(../img/produkte.png) no-repeat left;
color : #676d77;
}
a.nav3:link, a.nav3:visited {
display : block;
float : left;
padding : 0 8px 0 22px;
margin : 0 14px 0 14px;
height : 50px;
text-decoration : none;
background : url(../img/referenzen.png) no-repeat left;
color : #676d77;
}
a.nav4:link, a.nav4:visited {
display : block;
float : left;
padding : 0 8px 0 22px;
margin : 0 14px 0 14px;
height : 50px;
text-decoration : none;
background : url(../img/carhifi.png) no-repeat left;
color : #676d77;
}
a.nav5:link, a.nav5:visited {
display : block;
float : left;
padding : 0 8px 0 22px;
margin : 0 14px 0 14px;
height : 50px;
text-decoration : none;
background : url(../img/kontakt.png) no-repeat left;
color : #676d77;
}
a.nav6:link, a.nav6:visited {
display : block;
float : left;
padding : 0 8px 0 22px;
margin : 0 14px 0 14px;
height : 50px;
text-decoration : none;
background : url(../img/impressum.png) no-repeat left;
color : #676d77;
}
a.nav1:hover, a.nav2:hover, a.nav3:hover, a.nav4:hover, a.nav5:hover, a.nav6:hover {
color : #333333;
text-decoration : overline;
}
/*end navigation*/
div#container {
position : relative;
margin : 0 auto;
width : 1000px;
background-color:#FFF;
min-height : 100%;
height : auto !important;
height : 100%;
}
#p {
margin: 50px;
width : 900px;
text-align : justify;
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>
<body><div id="container">
<img src="img/header1.jpg" width="1000" height="197" alt="header" />
<ul class="menu">
<li><a href="index.html" class="nav1">Home</a></li>
<li class="line"> </li>
<li><a href="#" class="nav2">Leistung</a></li>
<li class="line"> </li>
<li><a href="#" class="nav3">Referenzen</a></li>
<li class="line"> </li>
<li><a href="#" class="nav4">Car Hifi</a></li>
<li class="line"> </li>
<li><a href="#" class="nav5">Kontakt</a></li>
<li class="line"> </li>
<li><a href="impressum.html" class="nav6">Impressum</a></li>
<li class="line"> </li>
</ul>
<div id="p"><p>TEXT<br />
</p></div></div>
</body>
</html>
