FF vs. IE.... mal wieder

[thuemmy]

Hallo, wie könnte es wieder anders sein, es geht um Darstellungsunterschiede, zwischen IE (5.01 bis 7.0) und dem FF.

Hier mal das Bild dazu:

Es betrifft sowohl oben die Navigation, als auch unten den Fuß.
IE 5.01- nur der Fuß
IE 5.5 - nur der Fuß
IE 6.0 - Fuß und Navi
IE 7.0 - nur die Navi

Richtig wäre es, wenn die Navigation (obere Zeile) alles rechts an das Logo anschließen würde, und der Fuß sollte natürlich in der Mitte sein. Ich vermute mal, dass es wieder irgendeines Hacks bedarf, den ich aber bis jetzt noch nicht im I-Net gefunden habe :-(

Link zur Seite: DEWA-Schaltechnik GmbH - Ihr Spezialist für Schaltechnik

Vielen Dank schonmal für Eure Hilfe und
Gruß thuemmy

Edit: Das erste Problem (Navigation) habe ich vielleicht gefunden, wird gerade mit browsershots.org überprüft.

 

[prm]

Auf den IE 5 nehme ich persönlich keine Rücksicht mehr.

Ungeprüft könnten die Fehler für den IE 6 hier auftreten:

.bilder_navi
{
margin-left:10px;
margin-right:10px;
display:block;
float:left;
}

.bilder_navi_filler
{
margin-left:10px;
margin-right:10px;
display:block;
float:left;
width:30px;
}

.bilder4
{
display:block;
margin-left:50px;
margin-top:10px;
margin-bottom:20px;
float:left;
}

Ersetze über all das "display: block;" durch

display: inline;

Siehe IE-Doubled-Float-Margin-Bug

 

[thuemmy]

Diese 3 Selektioren, die Du da genannt hast, sind für eine komplett andere Geschichte zuständig, werde das aber nochmal prüfen.

In der oberen Navizeile habe ich das geschafft. ich habe dem <ul>-Tag über CSS einfach die entsprechende Weite mitgeteilt.

Der Fuss ist noch nicht in Ordnung, weiß auch nicht, woran das liegen könnte :-( Und was mir jetzt noch aufgefallen ist, in der unteren Navi-Zeile, das eingekringelte Bildchen, ist runtergerutscht.

Kein Ahnung, woran das wieder liegt.

Gruß thuemmy

Edit: Das eingekringelte ist nur noch im IE 6.0 so. das mit dem Fuß in 5.x und in 6.0

 

[thuemmy]

Das mit der Navi ist erstmal (schlampig) gefixed. Aber der Fuß bereitet mit noch Kopfzerbrechen. Vielleicht hat ja noch jemand eine Lösung.

Gruß thuemmy

 

[neuroleptika]

Footer
Eigentlich sollten Elemente mit position: absolute; ohne Angaben für top und bottom dort angezeigt werden wo sie auch mit position:static; stehen würden.
Im IE5-7 funktioniert das leider nicht so gut.
Gebe #footer auch einen Wert für left:

#footer {
background:#BBBBBB none repeat scroll 0%;
bottom:0;
[COLOR="DarkRed"][B]left:0;[/B][/COLOR]
line-height:1.5em;
position:absolute;
width:100%;
}

Navigation
Ich habe einfach h1 und #menue_oben in einem div zusammengeschlossen.

[B][COLOR="DarkRed"]<div>[/COLOR][/B]
         <h1>DeWa-Schaltechnik GmbH
         <span>&nbsp;</span></h1>
         <ul id="menue_oben">
            <li class="sprache-li"><a href="#" class="sprache-link sprache">ENGLISH</a></li>
            <li class="wir-li"><a href="wir_ueber_uns.php" class="wir-link wir ">WIR &Uuml;BER UNS</a></li>
            <li class="produkte-li"><a href="index.php" class="produkte-link produkte active_o">PRODUKTE</a></li>
            <li><a href="referenzen.php" class="referenzen-link referenzen ">REFERENZEN</a></li>
         </ul>
		    <span class="fueller_links">&nbsp;</span>
[B][COLOR="DarkRed"]</div>[/COLOR][/B]

Das hat für meine Standard-Schriftgröße (IE5-6) gereicht.
Dein Konstrukt ist aber extrem Schriftgrößenabhängig.
Gerade die älteren IE reagieren überdimensional wegen der fehlenden font-size in % für body.

Ideal finde ich die Navigation nicht.

 

[thuemmy]

Hallo neuroleptika,

vielen Dank für die Hilfe. Das mit der oberen Navileiste hatte ich schon gelöst gehabt, indem ich der ul width: (Länge der li-Elemente); mitgegeben habe. Mit dem Footer klappt das nun auch. Bei der unteren Navileiste habe ich nach dem Motto "quick and dirty" ein bisschen getrickst. Muss ich mich morgen nochmal dranbegeben.

Dass alles nicht so ideal ist, kann ich mir vorstellen... aber ich arbeite dran, besser zu werden.

Gruß thuemmy

 

[neuroleptika]

Es funktioniert mit den genannten Einschränkungen.
Wenn du einen Link möchtest lade ich es hoch.

 

[thuemmy]

Darfst Du gerne machen, vielen Dank.

Gruß thuemmy

 

[neuroleptika]

Ich habe body font-size:100% gegeben.
Den a-Elementen overflow: hidden; (Expanding Box Bug IE5-6).
In anderen Browsern wird damit das "Überlaufen" bei größerer Schrift verhindert. Überstehendes wird damit aber abgeschnitten.

noindex

Entweder solltest du für die Links auch die Image Replacement-Methode
wie für h1 anwenden
oder auf height und width verzichten.

 

[thuemmy]

Hallo neuroleptika,

vielen Dank für Deine Mühe. Der Ansatz für die Image Replacement-Methode für die Links, das ist tatsächlich eine gute Idee. Das werde ich dann wohl noch machen, aber heute nicht mehr. Wenigstens ist es erstmal durch Deine Tipps etwas besser geworden.

Gruß thuemmy