[HTML/CSS] Umsetzung Probleme Internet Explorer

[MiD]

Hallo,

ich habe massivste Problem beim umsetzen einer horizontalen Navigation. Im Firefox und Chrome zeigt er mir alles korrekt an, wie ich es mir gewünscht habe, doch der Internet Explorer 8.0 bereitet mir Kopfschmerzen.

So sieht es im Firefox aus: http://www.myimg.de/?img=firefoxef085.png
Und so sieht es im Internet Explorer aus: http://www.myimg.de/?img=ie4cdf4.png
Das rechte Ende ist komplett verschoben. Und es steht in weiß "e 5". Ich habe keinerlei Ahnung woher das kommt. Von "Seite 5"?

Hier ist der CSS Code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
.navigation
{
  width: 100%;
  height: 44px;
}
#navigation_left
{
  background-image: url(images/navi-left.gif);
  background-repeat: no-repeat;
  height: 44px;
  width: 5px;
}
#navigation_right
{
  background-image: url(images/navi-right.gif);
  background-repeat: no-repeat;
  position: relative;
  left:895px;
  top:-44px;
  height: 44px;
  width: 5px;
}

#navcontainer
{
  width: 890px;
  height: 44px;
  position:relative;
  left:5px;
}
a.nav, a.nav:link, a.nav:visited
{
  display: block;
  width: 140px;
  height: 44px;
  background: url(images/navi-verlauf.gif) repeat-x;
  text-align: center;
  text-decoration: none;
  font-family:Verdana;
  font-size: 13px;
  line-height:44px;
  color: #ffffff;
  overflow: hidden;
  float: left;
  width:178px;
}
a.nav:hover
{
  color: #ffffff;
  text-decoration: underline;
}

Und der HTML Code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
<div class="navigation">
  <div id="navigation_left">
    <div id="navcontainer">
      <a class="nav" href="page1.html" title="page 1">Seite 1</a>
      <a class="nav" href="page2.html" title="page 2">Seite 2</a>
      <a class="nav" href="page3.html" title="page 3">Seite 3</a>
      <a class="nav" href="page4.html" title="page 4">Seite 4</a>
      <a class="nav" href="page5.html" title="page 5">Seite 5</a>
    </div>
    
    <div id="navigation_right">
    </div>
  </div>
</div>

Meine Probleme:
- das Bild "images/navi-right.gif" ist um 44px nach unten verschoben.
- es steht in weiß "e 5"

Es wäre super nett, wenn ihr mir helfen könnt
Liebe Grüße

[Kralle93]

Das könnte allsamt an vielem liegen, ich würde Folgendermaßen vorgehen:
1. Breite richtig definiert, sodass die Grafik theoretisch rechts neben die Punkte passt? Es wäre möglich, dass der FireFox einfach die Breite ignoriert, der IE jedoch nicht.
2. Deklaration richtig? Wenn Diese falsch ist, schaltet der IE in den Quirks-Modus und dann läuft so einiges schief.

PS: Mach aus deinen einzelnen Links ein horizontales Menü, ist seofreundlicher.


Lg

[dori]

Baue doch bitte einen Testcase. Das ist relative schwer nachzuvollziehen ohne die passende Hintergrundgrafik etc.

[MiD]

/
Ich habe jetzt weiter umgesetzt und es gibt noch weitere viele Fehler und ich finde keinen Lösungsansatz.
Kralle93, die Links sind doch bereits ein Menü, oder irr ich mich da?

Liebe Grüße

[kbot]

das Problem tritt auch beim IE9 auf, welcher angeblich sehr standardkonform sein soll, desweiteren ist auch im Chrome eine kleine Lücke zu sehen, siehe hier (habe nichts markiert o.ä.)

da die Seite auf Transitional läuft, heißt es, dass der IE in den Quirks-Mode schaltet, da muss man auf das alte IE-Box-Model achten ...

entweder man machts in HTML5 bzw. HTML 4 Strict oder man muss bei Transitional per Conditional Comments ein IE-spezifisches CSS einbauen

[apolle]

In Ermangelung eines IE kann ich nicht "drauflostesten" aaaaaber:

CSS: 'top:-44px;' (bei #navigation_right) sieht ein wenig seltsam aus. Ich alsBrowser würde ein solches Element schon mal gerne um 44 Pixel nach unten verschieben.

HTML: ist der Block beim Einfügen an der richtigen Stelle gelandet? evtl ist er um ein </div> nach "oben" verrutscht, dadurch wird das linke Element nicht vor dem mittleren "beendet" sondern erst nach dem rechten.

das Ganze sollte vermutlich so aussehen

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
<div class="navigation">
   <div id="navigation_left">
      .....
   </div> <!-- einfügen (das linke Element ist ja eigentlich hier schon abgearbeitet...) -->

   <div id="navcontainer">
      .....
   </div>

   <div id="navigation_right">
      .....
   </div>
   </div> <!-- löschen (...nicht erst hier) -->
</div>

verschachtelte Formatierung bleibt halt ein Glücksspiel bei dem immer der Browser gewinnt...


jede Menge Beispiele gibts in der "HTML-Bibel"
http://de.selfhtml.org/
http://de.selfhtml.org/html/text/listen.htm
http://de.selfhtml.org/css/eigenscha...andabstand.htm

[Kralle93]

Kralle93, die Links sind doch bereits ein Menü, oder irr ich mich da?

Du hast einzelne a-Elemente nur nebeneinnander gesetzt, ein Menü besteht aus ul und li.

Als Deklaration benutze diesen Code, anschließend solltest du natürlich auch mit xHTML arbeiten, ist sowieso besser x)

<!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">


-------------

Das Problem mit deiner Grafik würde ich folgendermaßen lösen:
Die 3 Divs "navigation_left", "navcontainer" und"navigation_right" mit float: left nebeneinnander setzen und den restlichen Krims-Krams wie Position rausnehmen.

PS: Wenn du mit "top" und "left" arbeiten möchtest, musst du position: absolute verwenden, nicht relative.

[MiD]

Den Fehler bei Chrome und Firefox mit der 1px breiten weißen Fläche in der Navigation habe ich abgelöst, dass ich einen Link um einen Pixel verlängert habe.
Ah ich hatte mir <ul> immer als Liste gemerkt und nie unter dem Begriff Menü. Habe ich nun angepasst
Verschachtelungen der Divs sind auch nach meinem Ermessen gelöst.
Um top und left zu nutzen, kann ich sehr wohl relative benutzen s. http://www.css4you.de/position.html
Wenn ich navigation_right "float:left" gebe, verrutscht es aus dem Bild, deshalb habe ich position: relative verwendet.
Ich habe nun auch als Deklaration deines verwendet:
<!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">
Damit wurde das Problem des IE gelöst.

Wie testet ihr eure Webseiten? Habt ihr alle gängigen Browser auf dem Computer und schaut euch sie an?
Findet ihr noch Fehler oder Verbesserungsvorschläge? /
Sollte alles gelöst sein, oder nicht?

[kbot]

Zitat von MiD

Ich habe nun auch als Deklaration deines verwendet:
<!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">
Damit wurde das Problem des IE gelöst.

womits also am IE-Box-Model im Quirks-Mode lag ^^

Zitat von MiD

Wie testet ihr eure Webseiten? Habt ihr alle gängigen Browser auf dem Computer und schaut euch sie an?

http://browsershots.org/ ist eine nette Seite, bei der man erstmal alle möglichen Browser rein optisch durchchecken lassen kann, mit dem IE-Tester kann man dann die spezifischen IEs genauer durchgehen, ansonsten halt die üblichen anderen Browser installieren, falls es Probleme irgendwo gibt ...