[fetterhund]

Hallo allerseits,

ich habe eine Webseite, bei der ich eine Navleiste "millimetergenau" eingepasst habe, damit keine Lücke zwischen Header und Leiste ist.
Ich selbst nutze Ubuntu, wobei der Firefox und Chromium die Seite richtig anzeigen - unabhängig von der Bildschirmeinstellung (Auflösung).

Auf Windows-Computern habe ich beobachtet, dass der Firefox und Chrome die Seite richtig anzeigen, aber der Internet Explorer nicht.
Und beim IE ist es das Problem, dass je nach Bildschirmeinstellung (Auflösung) der Abstand Header-Navleiste unterschiedlich groß ist. Die Navleiste verschiebt sich also je nach Bildschirmeinstellung.

Welche zusätzlichen Zeilen muss ich schreiben, damit ich eigens für den IE die Anpassung/ Einbindung der Navleiste habe. Also ein Code, den nur der IE beachtet, nicht aber FF oder Chrome.
(Natürlich sollen FF und Chrome nur den bisherigen Code laden, da diese Browser die Navleiste ja an die richtige Stelle setzen.)

(Hinweis: mit IE meine ich den IE 10, die früheren Versionen zerschießen das Design komplett, das zum Teil sowieso durch Typo3 in HTML vorgegeben ist.
Mit Apple habe ich mir die Seite nicht angeschaut, nutze ich nicht.)

Kann mir jemand bei meinem Problem helfen?
Danke!

[NetWebs]

Also, erstens hat das nicht mit dem Betriebssystem zu tun sondern mit der Web engine.

Zweitens kann man dir da nicht wirklich helfen. Du verwendest eben Elemente, die nur bestimmte Browser unterstützen oderdein MMarkup ist eben fehlerhaft...

Ich sehen dein Markup hier auch nicht daher kann man nur raten...

[fetterhund]

Hallo,

den Code hätte ich in der Tat direkt mitgeben können:

Konkret geht es um diese Angabe, mit Hilfe der ich die Vorgabe so verschoben habe, dass die Navleiste "ul" an der von mir gewünschten Stelle sitzt:

#head ul {
  clear:both;
  float:right;
  margin:-960px;
  margin-bottom:10;
  margin-top:16.75%;
  margin-right:290px;
  padding:0;
  text-align:right;
  list-style:none;
  z-index:1;
     position:relative;
}

Der z-Index musste sein, weil aus irgendeinem blöden Grund der div-Container mit dem Seiteninhalt die Navleiste überlappt.
Sicherlich ist es seltsam, einmal eine %-Angabe, einmal in Pixel. Doch war ich froh, als die Navleiste da war, wo sie hinsollte.

Die sich in Gesamtcode befindet:

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

html {
  background-color:#DDD;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}
body {
  background-repeat:repeat-x;
  margin:0;
  padding:0;
  height:100%;
}
p, li, h1, h2, h3, h4, h5, h6 {
  font-family:Verdana, Geneva, sans-serif;
  font-size:12px;
 }

p {
  margin-left:3%;
 }

.csc-textpic-text {width:auto; }
.csc-textpic-intext-left .csc-textpic-text{float:left; width:55%;}
#content .csc-textpic-text p.bodytext{float:none; width:auto;}
#outer {
  margin:0 auto;
  padding:0;
  width:960px;
  height:100%;
}
#wrapper {
  margin:0;
  padding:0;
  background-color:#fff;
  width:960px;
  height:auto;
  float:left;
}
#head {
  width:100%;
   height:100px;
   position:relative;
}


#head img {
  margin-top: 1%;
  margin-left: 2%;
  margin-bottom:-5px;
}


#head p {
  float:right;
  width:407px;
}

#head p a {
  color:#000;
  text-decoration:none;
}

#head ul {
  clear:both;
  float:right;
  margin:-960px;
  margin-bottom:10;
  margin-top:16.75%;
  margin-right:290px;
  padding:0;
  text-align:right;
  list-style:none;
  z-index:1;
     position:relative;
}

#head ul li {
  float:left;
}

#head ul li.active a{
  background-image:url(img/menu-aktiv.jpg);
  float:right;
  color:white;
}

#head ul li a {
  background-image:url(img/menu.jpg);
  width:110px;
  height:38px;
  float:left;
  text-decoration:none;
  color:#DDD;
  margin:0px;
  text-align:center;
  text-vertical-align:bottom;
  border-radius:0px;
  padding-top:0px;
  box-shadow: 0px 0px 0px 0px #D06D24;
}

#head ul li a {
  display:block;
  float:left;
}
#head ul li a:hover {
  background-image:url(img/menu-hover.jpg);
  width:110px;
  height:38px;
  float:left;
  text-decoration:none;
  color:#fff;
  margin:0px;
  text-align:center;
  border-radius:0px;
  padding-top:0px;
  box-shadow: 0px 0px 0px 0px #FF8000;
}
#head ul li a:active {
  color:#D06E27;
}

#orange {
  width:100%;
  position:relative;
}
#content {
  width:100%;
  clear:both;  
  padding:0 10px;
  margin-top:5px;
}
#content p {
  width:75%;
  position:relative;
  float:left;
}
#content ul {
  float:left;
  width:75%;
}
#content li {
  padding:5px;
  margin-left:3%
}
#content img {
  float:right;
  margin:20px;
  }
#footer {
  background-image:url(img/footer_background.jpg);
  width:100%;
  clear:both;
  float:left;
}
#footer div p {
  font-size:9px;
  margin:3px;
  padding:3px;
}
#footer div {
  margin-left:5%;
  margin-right:5%;
}
#footer {  
}
.left {
   float:left;
}
.left p a {
  color:#000;
  text-decoration:none;
}
.right {
  float:right;
}

Vielleicht hilft dies nun etwas weiter.

[Safer]

Grundsätzlich mal ein paar Gedanken zu deinem Projekt:


Erstmal sieht es nicht schlecht aus was man sieht. Ich bau lieber untereinander im CSS ist Geschmackssache.

 margin:-960px;
  margin-bottom:10;
  margin-top:16.75%;
  margin-right:290px;
  padding:0;

Da komme ich jetzt grade nicht mit.
Also du setzt einmal -960px und dann Top 16.75% und rechts 290px. Für was dann die margin definition am Anfang?

Das der IE damit Probleme hat ist "normal" es gibt die möglichkeit mit [ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ] bzw [ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ] zu arbeiten.
Die beheben einige der Fehler. Dann gäbe es noch die max-width und die max-height als Tags die du verarbeiten kannst um dem Teil seine max Größe zu verpassen.

Für IE der Version unter 10 hab ich den hier im Head bereich stehen.

  <!-- IE6-8 support of HTML5 elements --> <!--[if lt IE 9]>

    <s***** src="//html5shim.googlecode.com/svn/trunk/html5.js"></s*****>

Jetzt zu deiner Ursprungsfrage

Wenn ich dich jetzt richtig verstanden habe möchtest du das je nach Browser ein anderes CSS File geladen wird oder? Dann guck mal [ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ].

[fetterhund]

Den eigentlichen HTML-Code habe ich nicht geschrieben. Der wurde mir mit dem Template vorgegeben.
Der erste "margin" (-960px) verschiebt den Header nach links oder rechts.
Alles darunter verschiebt die Navigationsleiste - daran habe ich rumgespielt, bis die Leiste die gewünschte Position hat.
Ist es, damit die Webseite bei möglichst vielen Bildschirmeinstellungen (Auflösungen) richtig angezeigt wird, besser eine relative Angabe (%) zu machen oder mit Pixeln (px) zu arbeiten?

Vielen Dank für deinen Beitrag. Ich werde am Wochenende mal schauen, ob ich die Präfixe umsetzen kann oder den Kommentar für den IE.