Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Problem IE Buttons verschoben“

DonUndertaker

Nicht mehr ganz neu hier

Hallo,

ich habe da ein kleines Problem mit dem IE, wie sollte es anders sein.
Folgende Bilder verdeutlichen die verschobenen Buttons:

So soll es sein und ist es auch in allen Browsern (auch IE8)


So ist es mit dem Kompatiblitätsmodus vom IE und sieht einfach nur sch... aus.

html:
HTML:
<div id="page">       <!-- <div id="header">        Header       </div> -->       <div id="main">        <div id="col1">         <img src="Bilder/logo.gif" border="0" align="right" alt="" />         <div id="nav_u1">          <ul>             <li class="button_u1" > 	<a href="index.php?datei=seite&seite=11&nav=10" title="Niederlassungen">Niederlassungen</a> </li><li class="button_u1" > 	<a href="index.php?datei=seite&seite=12&nav=10" title="Unsere Ziele">Unsere Ziele</a> </li><li class="button_u1" > 	<a href="index.php?datei=seite&seite=13&nav=10" title="Unsere Mitarbeiter">Unsere Mitarbeiter</a> </li>         </ul>         </div>        </div>        <!-- <div id="col2">         Col2        </div> -->        <div id="col3">         <div id="head_balken">          <div id="nav">           <ul>             <li class="button"> 	<a href="index.php?datei=seite&seite=9&nav=9" title="Home" >Home</a> </li><li class="button"> 	<a href="index.php?datei=seite&seite=10&nav=10" title="Wir über uns" class="actived">Wir über uns</a> </li>          </ul>          </div>         </div>         <div id="content"> 
        </div>          <div class="clearfix"></div>        </div>       </div>      </div>      <div id="footer">       Footer      </div>

CSS:
Code:
 * {
    margin: 0;
    padding: 0;
}

*:focus {
    outline: none;
}

body {
    background-color: #d3dddb;
    background-image: url();
    background-repeat: repeat-x;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

#page {
    width: 100%;
    text-align: left;
}

#main {
    width: 100%;
    height: 100%;
    display: block;
}

#col1 {
    width: 215px;
    height: 100%;
    float: left;
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    background-image: url(Bilder/SubMenue.jpg);
    background-repeat: no-repeat;
    background-color: #005842;
    border-right: 1px solid #fff;
    z-index: 1;
}

div#nav_u1 {
    list-style-position: inside;
    list-style-image: url(Bilder/submenue_off.gif);
    margin: 0 0 0 10px;
    padding: 140px 0 0 0;
}

div#nav_u1 li {
    height: 40px;
    margin: 10 0 0 0px;
}

div#nav_u1 li:hover {
    list-style-image: url(Bilder/submenue_on.gif);
}

div#nav_u1 a {
    height: 20px;
    margin: 0 0 0 3px;
    color: #005842;
    text-decoration: none;
    text-shadow: white 2px 2px;
    font-size: 12px;
    font-weight: bold;
}

li.actived {
    list-style-image: url(Bilder/submenue_over.gif);
    font-weight: bold;
}

#col2 {
    width: 200px;
    float: right;
    display: block;
}

#col3 {
    width: 600px;
}

#head_balken {
    width: 100%;
    height: 80px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #005843;
    z-index: 0;
}

div#nav {
    height: 39px;
    list-style-position: inside;
    list-style: none;
    background-image: url(Bilder/Menue_tex.gif);
    margin: 40px 0 0 216px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

div#nav li {
    width: 90px;
    height: 39px;
    float: left;
    display: block;
    border-right: 1px solid #fff;
    text-align: center;
    vertical-align: middle;
}

div#nav a {
    height: 39px;
    width: 86px;
    margin: 0 2px 0 2px;
    color: #000;
    display: block;
    font-size: 11px;
    line-height: 39px;
    vertical-align: middle;
    text-decoration: none;
}

div#nav a:hover {
    background-image: url(Bilder/Menue_text_over.jpg);
}

a.actived {
    background-image: url(Bilder/Menue_text_on.jpg);
}

#content {
    width: 500px;
    position: absolute;
    left: 230px;
    top: 100px;
}

Wird sicher irgend ein dummer Fehler sein, denn ich aber nicht finde XD
Es wäre nett, wenn Ihr mir ein paar Tipps geben könnt.

Mfg DonUndertaker
 

DJMeisterDark

Nicht mehr ganz neu hier

AW: Problem IE Buttons verschoben

Es gibt einen Code den kann man Einsetzen, wenn man das Design mit Firefoce Bearbeitet hat heißt wenn im FF geht ohne Probleme
das der IE dies auch erkennt und so anpasst Automatich
 

DonUndertaker

Nicht mehr ganz neu hier

AW: Problem IE Buttons verschoben

doctype ist für die Datei folgender:

<!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" xml:lang="de" lang="de">
 

DJMeisterDark

Nicht mehr ganz neu hier

AW: Problem IE Buttons verschoben

Ne ne anderer Code bin gerade am suchen bei den Design die ich habe!

Habe das nämlich bei einem Angewendet
 

DonUndertaker

Nicht mehr ganz neu hier

AW: Problem IE Buttons verschoben

An welchen Werten das liegen kann könnt Ihr mir nicht sagen oder?
Ich meine so etwas muss doch auch in den alten IEs möglich sein. Hatte ich noch nie,
dass es s nach unten verrutscht.
 

DonUndertaker

Nicht mehr ganz neu hier

AW: Problem IE Buttons verschoben

Ich habe mich noch einige Zeit daran versucht und bitte noch einmal verzweifelt um Hilfe bei der Lösung des Problems, da mich die jetzigen Post leider nicht weiterbringen konnten.

Mfg DonUndertaker
 

DonUndertaker

Nicht mehr ganz neu hier

AW: Problem IE Buttons verschoben

Vielen Dank für deinen Post, aber das hat nicht funktioniert und hat maximal dazu geführt, dass mein a Tag winzig ist und der bg Wechsel beim :hover nicht mehr statgefunden hat.

Mfg DonUndertaker
 

DonUndertaker

Nicht mehr ganz neu hier

AW: Problem IE Buttons verschoben

Ich habe den Teil jetz wie folgt geändert:

#head_balken {
width: 100%;
height: 80px;
position: absolute;
top: 0px;
left: 216px;
background-color: #005843;
z-index: 0;
}

#nav {
height: 39px;
list-style-position: inside;
list-style: none;
background-image: url(Bilder/Menue_tex.gif);
margin: 0px;
padding: 0px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}

#nav ul {
background-color: transparent;
list-style-type: none;
}

#nav ul li {
width: 90px;
height: 39px;
float: left;
display: block;
list-style: none;
margin: 0px;
padding: 0px;
border-right: 1px solid #fff;
text-align: center;
vertical-align: middle;
}

div#nav a {
height: 1%;
width: 86px;
margin: 0px;
padding: 0;
color: #000;
display: block;
font-size: 11px;
line-height: 39px;
vertical-align: middle;
text-decoration: none;
}

#nav a:hover {
height: 1%;
background-image: url(Bilder/Menue_text_over.jpg);
}


Das ist dann mein Ergbnis. Als weiteren Nebeneffekt habe ich, dass die Seite jetzt einen Scrollbalken hat, weil bei header_balken left und dann 100% width.

Die Seite existiert momentan nur auf meiner xampp Installation. Da damit auch ein CMS verbunden ist, kann ich es auch nicht mal eben hochladen.

Mfg DonUndertaker
 

DonUndertaker

Nicht mehr ganz neu hier

AW: Problem IE Buttons verschoben

Leider immer noch nicht.

#head_balken {
width: 100%;
height: 80px;
position: absolute;
top: 0px;
left: 216px;
background-color: #005843;
z-index: 0;
}

#nav {
height: 39px;
list-style-position: inside;
list-style: none;
background-image: url(Bilder/Menue_tex.gif);
margin: 0px;
padding: 0px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}

#nav ul {
background-color: transparent;
list-style-type: none;
}

#nav ul li {
width: 90px;
height: 39px;
float: left;
display: block;
list-style: none;
margin: 0px;
padding: 0px;
border-right: 1px solid #fff;
text-align: center;
vertical-align: middle;
}

#nav ul li a {
height: 1%;
width: 86px;
margin: 0px;
padding: 0;
color: #000;
display: block;
font-size: 11px;
line-height: 39px;
vertical-align: middle;
text-decoration: none;
}

#nav a:hover {
background-image: url(Bilder/Menue_text_over.jpg);
}
 
AW: Problem IE Buttons verschoben

Und auf den zweiten Blick noch...
line-height: 39px weg, oder hast du Links, die mehrzeilig sind und dann auch noch 39px Zeilenhöhe haben sollen?
Und font-size in nur #nav ul angeben.
Und width und height außer dem Holly weg und dafür padding setzen.

ich hätte das alles ein bischen anders gemacht... aber wir schaffen das bestimmt noch :) Fremder Code und dann nur stückweise finde ich immer schwierig.
Hast Du auch was im Quellcode geändert?

Und list-style-position:inside auch weg. Denke das macht nur Sinn, wenn Listenpunkte, die untereinader stehen, eingerückt werden sollen.
Und vertical-align und text-align auch raus.

Oder lade doch mal deine Bilder hoch und schreib mal, welche Menüpunkte du brauchst, und wie hoch und breit das Navi sein soll, dann versuche ich mich mal dran :)
 
Zuletzt bearbeitet:

DonUndertaker

Nicht mehr ganz neu hier

AW: Problem IE Buttons verschoben

Danke für das Angebot die Seite zu machen. Im Prinzip versuche ich savetec.de nachzubauen. Nur leider gelingt es mir wiie man sieht nur bedingt. Hast du da vllt. eine Idee wie man das am Besten machen kann?
Ich hatte mir gedacht zwei Spalten zu machen, bei der linken dann ein float left und feste Breite. Die rechte Seite mit 100% Breite damit es die ganze Seite bedeckt und z-index: 0, so dass man diese erst nach der linken sieht.
Und eigentlich sollte es dann nicht so schwer seine eine dumme horizontale Navigation einzubauen. Hatte das ja auch nicht zum ersten Mal gemacht. Jedoch ist mir der IE hiebei nicht wohlgesonnen^^

Edit: Natürlich wollte ich wie man an meiner ursprünglichen CSS sieht die ganzen Bilder der Navigationen nur mit Text und ein paar kleinen bg Bildern erstellen.
 
Zuletzt bearbeitet:

hubspe

display:schwarzgelb;

AW: Problem IE Buttons verschoben

Und eigentlich sollte es dann nicht so schwer seine eine dumme horizontale Navigation einzubauen. Hatte das ja auch nicht zum ersten Mal gemacht. Jedoch ist mir der IE hiebei nicht wohlgesonnen^^

soo schwer ist es auch nicht. ;)
Horizontale navi mit Text im Bild.
Horizontale Navi mit HG-Bild, Text normal.
Horizontale Navi mit mehrzeiligen Links.
Horizontale Navi mit Tabs und CSS-Sprites.

Ich hatte mir gedacht zwei Spalten zu machen, bei der linken dann ein float left und feste Breite. Die rechte Seite mit 100% Breite damit es die ganze Seite bedeckt und z-index: 0, so dass man diese erst nach der linken sieht.

z-index wirkt nur bei Elementen die ungleich position:static (default-Einstellung) sind.
So ein Layout wie du es vorhast ist in den älteren IE's 6/7 nicht wirklich stabil.
Es ist immer besser beide Spalten zu floaten.

Bei deiner Lösung solltest du dann für die rechte Spalte keine Breite vergeben und ein entsprechendes margin-left.
Dann brauchen IE6/7 aber vorsorglich HasLayout (per Conditional Comment):
PHP:
/* IE6 */
* html #rechte-spalte  {
     zoom:1;
}
/* IE7 */
*+html #rechte-spalte  {
     zoom:1;
}
Auch noch wg. dem Double Margin Bug des IE6 aufpassen.
 

DonUndertaker

Nicht mehr ganz neu hier

AW: Problem IE Buttons verschoben

Vielen Dank für die Posts. Jetzt wo der content drinnen ist rutscht es nicht mehr so wie von mir beschrieben weg. Komische Sache XD
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
175.143
Beiträge
2.581.734
Mitglieder
67.208
Neuestes Mitglied
docschweitzer
Oben