FF-IE Problem mit margin

[PaulePopstar]

Hallo,

ich konnte mit der Flut der angebotenen Threads aus der Forensuche nichts passendes finden - daher der neue Thread.

Ich habe ein Layout-Problem mit CSS.
Im Firefox, Opera, Chrome wird folgendes richtig angezeigt...

#contact{
    height: 22px;
    width: auto;
    /*Textrotation*/
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    /*Textrotation*/
    padding-top: 4px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 300px;
    margin-left: -58px;
    position: relative;
    background-color: #fbcc4c;
    border-top: #000 1px solid;
    border-right: #000 1 px solid;
    border-bottom: #000 1px solid;
    float:left;
    font: Verdana;
    font-size:14px;
    z-index:-1;
}

Im IE (ich nutze zum Testen die Version 9) ist der Container überhaupt nicht sichtbar.
Wenn ich aber

    margin-left: -58px;

in

    margin-left: 0px;

ändere oder die Anweisung rausnehme, zeigt de IE es "richtig" an, dafür die anderen Browser nicht mehr.

Ich habe schon von Browserweichen gehört und ein bisserl damit rumgespielt (ausgegebener Text nur mit IE 7,8 und 9) - bekomme aber ein alternatives CSS nicht zum laufen.

Ich bin für jede Anregung Dankbar, ich möchte gern ein browserübergreifendes CSS anbieten können.

Liebe Grüße

 

[marcmaroc]

AW: FF-IE Problem mit margin

Versuche doch mal es mit Important, das benutze ich auch wenn es nur um eine Anweisung geht.
Also:

margin-left: -58px !important;
margin-left: 0px;

Ich kann leider nicht testen ob es mit IE9 funktioniert.

 

[PaulePopstar]

AW: FF-IE Problem mit margin

Danke für die Antwort.
Funktioniert leider immer noch net...

Ich glaube, ich muss mir die Nummer mit den Browserweichen noch genauer angucken. Darin ist wohl iwo die Lösung

LG

Edit: Ich glaube, ich habe die Lösung für mein Problem gefunden.
Im Head-Bereich meiner index habe ich eine Browserweiche eingesetzt...

<!--[if IE]> <style type="text/css">@import url(ie.css);</style> <![endif]-->

Damit lädt der Browser das für ihn gedachte Stylesheet.

Danke für's lesen

 

[Myhar]

AW: FF-IE Problem mit margin

Erstens: Kannst du mal einen Screenshot posten, mich würde interessieren, wie dein Design aussieht, dass du unbedingt negative margins benötigst. Diese bringen meistens nur Probleme und sind auch oft nicht notwendig. Sie werden meist nur verwendet, weil der Ersteller der Webseite wenig Ahnung von dem hat, was er tut.
Auch ist es nicht ratsam, einfach einen [if IE] einzubauen. Das würde nämlich alle IE Versionen (von Version 1 bis 9) betreffen, ab Version 10 funktionieren diese Weichen dann nicht mehr. Vielmehr ist es sinnvoll, für jede IE Version ein eigenes Stylesheet zu verwenden:

<!--[if IE 6]><link rel="stylesheet" href="ie6.css" type="text/css" media="screen"/><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" media="screen"/><![endif]-->

Bei einer sauberen Codierung ist für eine IE Version >8 eigentlich kein seperates Stylesheet mehr notwendig.

 

[PaulePopstar]

AW: FF-IE Problem mit margin

Einen Screen möchte ich noch net posten
Es geht darum einen Div-Container stets an der linken Bildschirmseite zu platzieren. Wenn ich kein negatives Margin benutze ist eine Lücke zwischen Container und linkem rand...

Wenn es sinnvoller ist, für jede IE-Version ein eigenes Stylesheet zu machen, werde ich das so umsetzen, danke für den Tipp.
Ich werde mein CSS mit dem W3C-Validator prüfen lassen, Mal sehn was dabei rauskommt...

LG

 

[Zampano_]

AW: FF-IE Problem mit margin

Normalerweise reicht dafür aber ein margin:0. Das muss nicht negativ sein.
Hast du eventuell ein padding übersehen?

 

[PaulePopstar]

AW: FF-IE Problem mit margin

Ich denke das Problem liegt darin, dass ich den Container 90° gegen den Uhrzeigensinn gedreht habe (im Startpost zwischen /*Textrotation*/ angegeben) - wenn ich das auskommentiere steht der Container genau so wie's geplant ist.
Möglicherweise gibt's da vielleicht einen CSS-Hack?!?

Bis ich das herausgefunden habe werde ich halt ein Image nehmen und nicht den Text drehen.

Nochmals danke an Alle.

LG