css ie hack für horizontale navigation!

elroberto1337

guten morgen liebe gemeindschaft
ich habe problem mit der "programmierung" meiner homepage. und zwar ist meine navigation bei der IE Explorer Version 5 und 6 sehr weit nach links verschoben. habe schon alles möglich rumgetestet um dieses problem zu beheben. bei den anderen IE versionen und im firefox ist allet schick

gibt es nicht bzw gab es nicht für den ie explorer sogenannte ie css hacks?

http://home.arcor.de/robertfuhrmann/robintoaktuell/test.html

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Physiotherapeut Robin Cronenberg - Berlin </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;
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: 733px;
height: 3px;
background-image: url(line/firstline.jpg);
background-repeat: no-repeat;
margin-left:2px;
}


a {
display: block; 
padding: 0px; 
height: 20px; 
width: 101px;}


.unsichtbar { 
display: none; 
}


#navigation {
width: 714px;
height: 25px;
}


#navi {
width: 714px;
height: 20px;
list-style: none;
padding: 0 0px;
margin: 0;
}


#navi li {
width: 101px;
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: 101px; height: 20px; display: block; background: url(navi/navilinks.jpg) no-repeat;}
#navi li a.navilinks:hover {     background:url(hover/navilinks.jpg) no-repeat; width: 101px; 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: 101px; 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: 101px; 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: 101px; 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: 101px; 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: 101px; height: 20px; }


#navi li a.navirechts:hover {     background-image:url(hover/navirechts.jpg) no-repeat;border: none; width: 101px; height: 20px;}
#navi li a.navirechts:link, li a.navilinks:visited, li a.navilinks:focus, li a.navilinks:active { width: 101px; height: 20px; display: block;border: none; background: url(navi/navirechts.jpg) no-repeat;}


#secondline {
width: 710px;
height: 10px;
background-image: url(line/secondline.jpg);
background-repeat: no-repeat;
margin-top:1px;
}




</style>






</head>


<body>
<center>
<div id="container">


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

    <div id="firstline">
    </div>


    <div id="navigation">
        <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>

    <div id="secondline"></div>








</div>
</center>

Alles anzeigen

vielen dank für eure hilfe im vorraus
grüße robert

Thonixx

Versuch mal ein margin-left einzubauen, dann könnte das gehen.
Dieses margin-left solltest du aber dann per Conditional Comments (http://www.google.ch) einbinden.

sejuma

Ergänze mal noch folgendes:

Code

#navi ul {
margin: 0;
}

Ansonsten bitte Link posten..

elroberto1337

hier der link http://home.arcor.de/robertfuhrmann/robintoaktuell/test.html
steht aber auch oben. komme leider immer noch nicht weiter

elroberto1337

mit den Conditional Comments klappt es leider nicht. die einstellungen ändern sich für alle ie und firefox versionen hat da einer einen guten rat für mich möchte die css halt anpassen.
vielen dank im vorraus

ist diese kommandonzeile richtig für css:
r <!--[if lte IE 6]>
<![endif]>

Thonixx

Zwei Striche vergessen

http://www.quirksmode.org/css/condcom.html

sejuma

Bereinige mal zunächst diese
HTML-Fehler und diese
CSS-Fehler.

Der Center-Tag ist überflüssig wenn du den container so zentrierst:

Code

#container {
margin: 0 auto;
width: 716px;
height: 800px;
border: 1px solid black;
background-color: #FFFFFF;
}

Ob das letztlich für den IE 6 hilft, kann ich jedoch nicht beurteilen, weil ich keinen mehr habe.

elroberto1337

mit

funktioniert es leider immer noch nicht bin langsam am verzweifel
wenn ich dort meinen "extra" geänderten css code reinpacke, ändert sich auch die anschauung für firefox etc. also gehe ich davon aus das es für css nicht der richtige befehl ist
bitte um hilfe
vielen dank

so far el roberto

thilda

Hier mal ein Bsp wie man es machen kann.
Da du ja leider nicht zeigst wie du es einbindest.

Code

<!--[if lte IE 6]>
<style type="text/css">
@import url(iewin-layer.css); /*Stylesheets für den IE-Win*/
</style>
<![endif]-->

elroberto1337

hi vielen dank war zu doof

Code

/* CSS Document */
<!--[if lte IE 6]>
body {


background-color: #666666;


/* background-image:url(bg.jpg);*/ 


/* background-repeat:repeat; */ 


}






#container {


padding: 0 auto;


margin: 0;


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;


}
<![endif]-->

Alles anzeigen

so habe ich es gemacht ???
besteht die möglichkeit das man den "ie hack" auch im direkt css dokument direkt einbinden kann ?

jojo87

und genau so nicht

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Physiotherapeut Robin Cronenberg - Berlin </title>


<style type="text/css">


@charset "utf-8";
/* CSS Document */


normales css
</style>
<!--[if lte IE 6]>
<style type="text/css">
IE-css
</style>
<![endif]-->


</head>


<body>
<center>
<div id="container">


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

    <div id="firstline">
    </div>


    <div id="navigation">
        <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>

    <div id="secondline"></div>








</div>
</center>
</bod>
</html>

Alles anzeigen

Zudem fehlten schliessende body- und html-tags.
Ich habe die mal noch mit ergänzt

elroberto1337

moin erstmal nochmals vielen dank für tipps

problem immer noch das gleich:
im ie explorer version 6 und 5.5 wird die navi nur teilweise dargestelllt.

im dem conditional comments klappt es ja, aber das problem ist, dass ich die css befehle nicht so ändern kann, dass die anvi so wie beim firefox dargestellt werden kann

Thonixx

HTML:

HTML

<!--[if lte IE 6]>
<style type="text/css">
@import url(iewin-layer.css); /*Stylesheets für den IE-Win*/
</style>
<![endif]-->

CSS (iewin-layer.css):

Code

#navigation { margin-top: -20px; }

Versuch das mal.

yeti66

Ich habe erst einmal etwas aufgeräumt und den Code gesäubert und auf (sorry) XHTML - strict (DOCTYPE) umgestellt (reine Gewohnheit).
Im IE 5/5.5 und IE 6 habe ich momentan leider nicht testen könne, da ich nicht an meinen Laptop rankomme. Na ja schau erst mal:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Physiotherapeut Robin Cronenberg - Berlin</title>
<style type="text/css">
@charset "utf-8";
/* CSS Document */
/*reset styles*** thanks to Eric A. and Kathryn S. Meyer *** http://meyerweb.com/eric/thoughts/2007/05/01/*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {    margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;vertical-align: baseline;}
/*reset styles end*/
body {font: 100% Verdana, Arial, Helvetica, sans-serif;text-align: center;background-color: #666666;/* background-image:url(bg.jpg);*//* background-repeat:repeat; */}
#container {margin: 0 auto;width: 716px;height: 800px;border: 1px solid black;padding:0 3px 0px 3px 0;background-color: #fff;}
#header {background: url(http://home.arcor.de/robertfuhrmann/robintoaktuell/header.jpg) no-repeat;width: 710px;height: 138px;margin: 0 auto;}
#firstline {width: 710px;height: 3px;background: url(http://home.arcor.de/robertfuhrmann/robintoaktuell/line/firstline.jpg) no-repeat 0 0;margin: 1px auto;}
a {display: block;padding: 0px;height: 20px;width: 101px;}
.unsichtbar {display: none;}
#navigation {width: 710px;height: 20px;margin: 0 auto;}
#navi {width: 710px;height: 20px;list-style: none;padding: 0;margin: 0;}
#navi li {width: 101px;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: 101px;height: 20px;display: block;background: url(http://home.arcor.de/robertfuhrmann/robintoaktuell/navi/navilinks.jpg) no-repeat;}
#navi li a.navilinks:hover {background:url(http://home.arcor.de/robertfuhrmann/robintoaktuell/hover/navilinks.jpg) no-repeat;width: 101px;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(http://home.arcor.de/robertfuhrmann/robintoaktuell/navi/therapien.jpg) no-repeat;}
#navi li a.therapien:hover {background: url(http://home.arcor.de/robertfuhrmann/robintoaktuell/hover/t.jpg) no-repeat;border: none;width: 101px;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(http://home.arcor.de/robertfuhrmann/robintoaktuell/navi/preise.jpg) no-repeat;}
#navi li a.preise:hover {background: url(http://home.arcor.de/robertfuhrmann/robintoaktuell/hover/p.jpg) no-repeat;border: none;width: 101px;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(http://home.arcor.de/robertfuhrmann/robintoaktuell/navi/guestbook.jpg) no-repeat;}
#navi li a.guestbook:hover {background: url(http://home.arcor.de/robertfuhrmann/robintoaktuell/hover/g.jpg) no-repeat;border: none;width: 101px;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(http://home.arcor.de/robertfuhrmann/robintoaktuell/navi/lebenslauf.jpg) no-repeat;}
#navi li a.lebenslauf:hover {background: url(http://home.arcor.de/robertfuhrmann/robintoaktuell/hover/l.jpg) no-repeat;border: none;width: 101px;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(http://home.arcor.de/robertfuhrmann/robintoaktuell/navi/impressum.jpg) no-repeat;}
#navi li a.impressum:hover {background: url(http://home.arcor.de/robertfuhrmann/robintoaktuell/hover/i.jpg) no-repeat;border: none;width: 101px;height: 20px;}
#navi li a.navirechts:hover {background-image:url(http://home.arcor.de/robertfuhrmann/robintoaktuell/hover/navirechts.jpg) no-repeat;border: none;width: 101px;height: 20px;}
#navi li a.navirechts:link, li a.navilinks:visited, li a.navilinks:focus, li a.navilinks:active {width: 101px;height: 20px;display: block;border: none;background: url(http://home.arcor.de/robertfuhrmann/robintoaktuell/navi/navirechts.jpg) no-repeat;}
#secondline {width: 710px;height: 10px;background: url(http://home.arcor.de/robertfuhrmann/robintoaktuell/line/secondline.jpg) no-repeat 0 0;margin: 1px auto;}
-->
</style>
</head>
<body>
<div id="container">
  <div id="header">&nbsp; </div>
  <div id="firstline">&nbsp;</div>
  <div id="navigation">
    <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>
  <div id="firstline">&nbsp;</div>
  <div id="secondline">&nbsp;</div>
</div>
</body>
</html>

Alles anzeigen

Thonixx

Es ist schlimmer geworden

Du hast jetzt nur noch auf einer Seite den Hintergrund der Navigation und alles ist verschoben:
[Blockierte Grafik: http://www.hid.white-tiger.ch/yeti.jpg]
[Blockierte Grafik: http://hi.white-tiger.ch/yeti.jpg]

yeti66

Schlimmer im IE ?? Na da muß ich doch mal den Laptop ranholen. Ich hatte erst mal nur unter IE7/8, Chrome, Opera und FF getestet.

yeti66

Ach firefox5.0 Du meinst die Onlineseite. Und wie sieht mein Code im Ie aus, wenn Du ihn schon zur Hand hast???

elroberto1337

also komme immer noch nicht mit dem "doofen" ie 5 und 6. bei mir schaut es immer noch so aus wie bei dem hochgeladenen bild von firefox 5.0

yeti66

OK, ich nehme es mir nochmal zur Brust. Bis morgen Abend bekommst Du eine Lösung damit Du am Wochenend weitermachen kannst. Versprochen. Ich muss jetzt zur Feier.

elroberto1337

hi ok vielen vielen vielen dank yeti66 und alle anderen
sehr gutes und nettes forum hier. nur sympatische leute . werde ich auf jedenfall weiterempfehlen......
komme da einfach nicht weiter......
vielen dank yeti66

Tags