Internetexploerer Version 5 und 6 CSS Hack für Navi gesucht!
0 0 
molily
Internetexploerer Version 5 und 6 CSS Hack für Navi gesucht!
hi liebe Gemeindschaft,
und zwar habe ich folgendes Problem: Meine horizontale Navigation wird bei IE Version 5 und 6 sehr stark nach links verschoben :/
gibt es davor einen geeigneten CSS Hack ?
lg
und danke für eure Hilfe im vorraus
<!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>
<style type="text/css">
@charset "utf-8";
/* CSS Document */
body {
background-color:#666666;
/* background-image:url(bg.jpg);*/
/* background-repeat:repeat; */
}
#container {
padding:0 auto;
margin:0 auto;
width:716px;
height:800px;
border:1px solid black;
background-color:#FFFFFF;
}
#header {
background-image:url(header.jpg);
background-repeat:no-repeat;
width: 710px;
height: 140px;
}
#firstline {
width:714px;
height:3px;
background-image:url(firstline.jpg);
background-repeat:no-repeat;
float:left;
}
a{display:block; padding:1px; height:20px; width:102px;}
.unsichtbar { display: none; }
#navi {
width: 714px;
padding: 0 0px;
background: url(navibg) no-repeat;
list-style: none;
margin:0px 48px 0px -50px;
}
#navi li {
width: 102px;
float: left;
}
#navi li:hover ul, #navi li.over ul {
display: block;
}
#navi li a.navilinks:link, li a.navilinks:visited, li a.navilinks:focus, li a.navilinks:active { width: 102px; height: 20px; display: block; border: none; background: url(navi/navilinks.jpg) no-repeat;}
#navi li a.navilinks:hover { background:url(hover/navilinks.jpg) no-repeat;border: none; width: 102px; height: 20px; }
#navi li a.therapien:link, li a.therapien:visited, li a.therapien:focus, li a.therapien:active { width: 101px; height: 20px; display: block; border: none; background: url(navi/therapien.jpg) no-repeat;}
#navi li a.therapien:hover { background: url(hover/t.jpg) no-repeat;border: none; width: 102px; height: 20px; }
#navi li a.preise:link, li a.preise:visited, li a.preise:focus, li a.preise:active { width: 101px; height: 20px; display: block; border: none; background: url(navi/preise.jpg) no-repeat;}
#navi li a.preise:hover { background: url(hover/p.jpg) no-repeat;border: none; width: 102px; height: 20px; }
#navi li a.guestbook:link, li a.guestbook:visited, li a.guestbook:focus, li a.guestbook:active { width: 101px; height: 20px; display: block; border: none; background: url(navi/guestbook.jpg) no-repeat;}
#navi li a.guestbook:hover { background: url(hover/g.jpg) no-repeat;border: none; width: 102px; height: 20px; }
#navi li a.lebenslauf:link, li a.lebenslauf:visited, li a.lebenslauf:focus, li alebenslauf:active { width: 101px; height: 20px; display: block; border: none; background: url(navi/lebenslauf.jpg) no-repeat;}
#navi li a.lebenslauf:hover { background: url(hover/l.jpg) no-repeat;border: none; width: 102px; height: 20px; }
#navi li a.impressum:link, li a.impressum:visited, li a.impressum:focus, li a.impressum:active { width: 101px; height: 20px; display: block; border: none; background: url(navi/impressum.jpg) no-repeat;}
#navi li a.impressum:hover { background: url(hover/i.jpg) no-repeat;border: none; width: 102px; height: 20px; }
#navi li a.navirechts:hover { background-image:url(hover/navirechts.jpg) no-repeat;border: none; width: 102px; height: 20px;}
#navi li a.navirechts:link, li a.navilinks:visited, li a.navilinks:focus, li a.navilinks:active { width: 102px; height: 20px; display: block;border: none; background: url(navi/navirechts.jpg) no-repeat;}
</style>
</head>
<body>
<center>
<div id="container">
<div id="header">
</div>
<div id="firstline">
</div>
<ul id="navi">
<li><a href="#1" class="navilinks"><span class="unsichtbar">links</span></a></li>
<li><a href="#2" class="therapien" title="Therapien"><span class="unsichtbar">therapienweg</span></a></li>
<li><a href="#3" class="preise" title="Preise"><span class="unsichtbar">preiseweg</span></a></li>
<li><a href="#4" class="guestbook" title="Guestbook"><span class="unsichtbar">guestbookweg</span></a></li>
<li><a href="#5" class="lebenslauf" title="Lebenslauf"><span class="unsichtbar">lebenslaufweg</span></a></li>
<li><a href="#6" class="impressum" title="Impressum"><span class="unsichtbar">impressumweg</span></a></li>
<li><a href="#7" class="navirechts"><span class="unsichtbar">rechts</span></a></li>
</ul>
</div>
</center>
</body>
</html>
link zur Seite: [link](file:///C:/Dokumente%20und%20Einstellungen/roberto/Desktop/robin/test.html)
-
Hi,
und zwar habe ich folgendes Problem: Meine horizontale Navigation wird bei IE Version 5 und 6 sehr stark nach links verschoben :/
gibt es davor einen geeigneten CSS Hack ?Sowas kannst du auch durch eigene Suchbemühungen sicher finden, dafür brauchst du nicht hier zu fragen, und erst recht nicht so viel Quellcode posten.
http://de.selfhtml.org/css/layouts/browserweichen.htm
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak. -
hi liebe Gemeindschaft,
und zwar habe ich folgendes Problem: Meine horizontale Navigation wird bei IE Version 5 und 6 sehr stark nach links verschoben :/In IE 8 auch.
Warum machst du denn diesen seltsamen Kniff:
margin:0px 48px 0px -50px;
Wenn du die Navigation um 50px nach links herausschiebst ... dann ist sie um 50px nach links herausgeschoben. Die Browser streiten sich nur darum, was dann mit den floatenden li-Elementen passiert.
Warum vergibst du hier nicht einfach margin:0?
link zur Seite: [link](file:///C:/Dokumente%20und%20Einstellungen/roberto/Desktop/robin/test.html)
Mit einem Link auf deine Festplatte können wir leider wenig anfangen.
Mathias
-
»» hi liebe Gemeindschaft,
Mit einem Link auf deine Festplatte können wir leider wenig anfangen.
hier der richtige link, war gestern schon spät
richtige link
bitte um hilfe ;) -
»» hi liebe Gemeindschaft,
»» und zwar habe ich folgendes Problem: Meine horizontale Navigation wird bei IE Version 5 und 6 sehr stark nach links verschoben :/In IE 8 auch.
Warum machst du denn diesen seltsamen Kniff:
»» margin:0px 48px 0px -50px;
Wenn du die Navigation um 50px nach links herausschiebst ... dann ist sie um 50px nach links herausgeschoben. Die Browser streiten sich nur darum, was dann mit den floatenden li-Elementen passiert.
Warum vergibst du hier nicht einfach margin:0?
ich habe den margin:0px 48px 0px -50px; (schwachsinnig) rausgenommen. hatte anfansgs nur das problem das die navi nicht unter dem header direkt war. mit margin:0 klappt es bei den ie 5 und 6 immer noch nicht :/ . muss einfach mal rumtesten......... es sei denn einer hätte noch eine idee
link zur aktuellen seite : http://home.arcor.de/robertfuhrmann/robintoaktuell/index.html
Mathias
-