IE und Firefox - CSS nicht korrekt

wolf1985 · #1 (**permalink**) 28.04.2008, 23:49

Hallo Zusammen

Ich hab einiges getüftelt und ausprobiert. Leider komme ich auf keine Lösung. Die Webseite Tacholine Marinos - Reparatur und Einbaucenter. wird im Mozilla Firefox so dargestellt, wie es sein sollte (korrekt).

Im Internet Explorer hingegen ist ev. ein Teil verschoben, der graue Hintergrund ist ganz durchgezogen (statt wie bei Firefox nur so lang wie der Content) und die Navigationseinträge sind auch grösser in der Höhe. Der Abstand zwischen Navigation und Container ist ebenfalls ca. 10px grösser als im Original im Firefox.

Kann mir mal einen ein Tip geben wie ich das umgehen kann oder lösen kann, damit IE auch diesselbe Darstellung wie Firefox hinkriegt? Gibts da nen Bug oder ein Trick?

(Sorry jetzt ein bisschen langer Code, aber ich kann nich anders im Moment, da Menu, HTML , usw. alles in einer index.html gespeicher ist. Zur Zeit leider eben ohne externe .css-File).

PHP-Code:


			
//HTML Code:

<body style="margin:20px;background-color:rgb(255,255,255);">



<div style="margin: auto; width:100%; text-align:center; float:center;">



<table cellpadding="0" cellspacing="2" style="margin:auto; width:100%; text-align:left; float:left; background-color:#ffffff;">



    <div style="text-align:center;"><img src="images/logo.jpg" style="border:none; text-align:center; float:center; width:auto; height:auto;"></div>

    <hr style="width: 100%; float:left;"/>

<tr>

    <td style="vertical-align:top; width:150px;">



<ul id="qm0" class="qmmc">



    <li><span class="qmtitle" >Reparaturen</span></li>



    <li><a href="javascript:void(0);">Alle Kombiinstrumente u. Tachometer</a></li>

    <li><a class="qmparent" href="javascript:void(0);">PW / Taxi / LKW</a>



        <ul>

        <li><a href="javascript:void(0);">Taxiuhren</a></li>

        <li><a href="javascript:void(0);">Testgeräte</a></li>

        <li><a href="javascript:void(0);">Tachographen</a></li>



        </ul></li>



    <li><a class="qmparent" href="javascript:void(0);">Motorrad / Landmaschine</a>



        <ul>

        <li><a href="javascript:void(0);">Traktormeter</a></li>

        </ul></li>



    <li><a class="qmparent" href="javascript:void(0);">Boote</a>



        <ul>

        <li><a href="javascript:void(0);">Marineninstrumente</a></li>

        </ul></li>



    <li><a class="qmparent" href="javascript:void(0);">Instrumentierung</a>



        <ul>

        <li><a href="javascript:void(0);">Alle Testgeräte und Instrumente</a></li>



        </ul></li>



    <li><span class="qmdivider qmdividerx" ></span></li>

    <li><span class="qmtitle" >Einbauten</span></li>

    <li><a href="javascript:void(0);">Taxiinstrumente</a></li>

    <li><a href="javascript:void(0);">Tempomaten (auch E-Gas)</a></li>

    <li><a href="javascript:void(0);">Geschwindigkeitsbegrenzer</a></li>



    <li><a class="qmparent" href="javascript:void(0);">Rückfahrwarner</a>



        <ul>

        <li><a href="javascript:void(0);">Für Liefer- und Lastwagen</a></li>

        <li><a href="javascript:void(0);">Für Traktoren und Autos</a></li>

        </ul></li>



    <li><a href="javascript:void(0);">Alarmanlagen</a></li>



    <li><a href="javascript:void(0);">Autoradio</a></li>

    <li><span class="qmdivider qmdividerx" ></span></li>

    <li><span class="qmtitle" >Anfertigung &amp; Verkauf</span></li>

    <li><a href="javascript:void(0);">Tachowellen</a></li>

    <li><a href="javascript:void(0);">Angleichgetriebe</a></li>

    <li><a href="javascript:void(0);">Marineninstrumente</a></li>



    <li><a class="qmparent" href="javascript:void(0);">VDO/Kienzle Produkte</a>



        <ul>

        <li><a href="javascript:void(0);">Diagrammscheiben VDO 120km/h</a></li>

        <li><a href="javascript:void(0);">Diagrammschreiben Kienzle 100km/h</a></li>

        </ul></li>



    <li><a class="qmparent" href="javascript:void(0);">Taxiuhren</a>



        <ul>

        <li><a href="javascript:void(0);">Halda H12</a></li>

        <li><a href="javascript:void(0);">HALE</a></li>

        </ul></li>



    <li><span class="qmdivider qmdividerx" ></span></li>

    <li><span class="qmtitle" >Service &amp; Kontakt</span></li>



    <li><a href="javascript:void(0);">Anschrift / Lageplan</a></li>

    <li><a href="javascript:void(0);">Kontaktformular</a></li>

<li class="qmclear">&nbsp;</li></ul>

    </td>

    <td>&nbsp;</td>

    <td style="vertical-align: top; width:100%; float:left; text-align:left; background-color:#F2F2F2;">



        <b>Hier entsteht die neue Internetpräsenz von <i>"Tacholine Marinos"</i>.</b> Dieser Text kann unendlich lange sein, denn er wrid automatisch beim erreichen vom Ende der Zeile unterbrochen.





    </td>

</tr>

</table>

</div>



</body>

</html>

ok und das dazu ist das CSS:

PHP-Code:


			
<style type="text/css">







.qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:1;}.qmmc .qmdividery{float:left;width:0px;}.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:1;}.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}.qmmc {position:relative;zoom:1;z-index:10;}.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:1;}.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}.qmsh div a {float:left;}.qmmc div{visibility:hidden;position:absolute;}.qmmc .qmcbox{cursor:default;display:block;position:relative;z-index:1;}.qmmc .qmcbox a{display:inline;}.qmmc .qmcbox div{float:none;position:static;visibility:inherit;left:auto;}.qmmc li {z-index:auto;}.qmmc ul {left:-10000px;position:absolute;z-index:10;}.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}.qmmc li a {float:none}.qmmc li:hover>ul{left:auto;}#qm0 li {float:none;}#qm0 li:hover>ul{top:0px;left:100%;}















    /*"""""""" (MAIN) Container""""""""*/

    #qm0

    {

        width:200px;

        background-color:transparent;

    }





    /*"""""""" (MAIN) Items""""""""*/

    #qm0 a

    {

        padding:5px 40px 5px 8px;

        background-color:#FFFFFF;

        color:#000000;

        font-family:Arial;

        font-size:11px;

        text-decoration:none;

        border-width:1px;

        border-style:solid;

        border-color:#A6A6A6;

    }





    /*"""""""" (MAIN) Hover State""""""""*/

    #qm0 a:hover

    {

        background-color:#E6E6E6;

    }





    /*"""""""" (MAIN) Hover State - (duplicated for pure CSS)""""""""*/

    #qm0 li:hover>a

    {

        background-color:#E6E6E6;

    }





    /*"""""""" (MAIN) Active State""""""""*/

    body #qm0 .qmactive, body #qm0 .qmactive:hover

    {

        background-color:#E6E6E6;

        text-decoration:underline;

    }





    /*"""""""" (SUB) Container""""""""*/

    #qm0 div, #qm0 ul

    {

        padding:5px;

        margin:-1px 0px 0px 0px;

        background-color:#E6E6E6;

        border-width:1px;

        border-style:solid;

        border-color:#A6A6A6;

    }





    /*"""""""" (SUB) Items""""""""*/

    #qm0 div a, #qm0 ul a

    {

        padding:2px 40px 2px 5px;

        background-color:transparent;

        border-width:0px;

        border-style:none;

        border-color:#000000;

    }





    /*"""""""" (SUB) Hover State""""""""*/

    #qm0 div a:hover

    {

        text-decoration:underline;

    }





    /*"""""""" (SUB) Hover State - (duplicated for pure CSS)""""""""*/

    #qm0 ul li:hover>a

    {

        text-decoration:underline;

    }





    /*"""""""" (SUB) Active State""""""""*/

    body #qm0 div .qmactive, body #qm0 div .qmactive:hover

    {

        background-color:#FFFFFF;

    }





    /*"""""""" Individual Titles""""""""*/

    #qm0 .qmtitle

    {

        cursor:default;

        padding:3px 0px 3px 4px;

        background-color:#8286E5;

        color:#040404;

        font-family:arial;

        font-size:11px;

        font-weight:bold;

    }





    /*"""""""" Individual Horizontal Dividers""""""""*/

    #qm0 .qmdividerx

    {

        border-top-width:1px;

        margin:4px 0px 4px 0px;

        border-color:#BFBFBF;

    }





    /*"""""""" Individual Vertical Dividers""""""""*/

    #qm0 .qmdividery

    {

        border-left-width:1px;

        height:15px;

        margin:4px 2px 0px 2px;

        border-color:#AAAAAA;

    }





    /*"""""""" Custom Rule""""""""*/

    ul#qm0 li:hover > a.qmparent

    {

        background-image:url(qmimages/cssalt1_arrow_right_hover.gif);

        text-decoration:underline;

    }





    /*"""""""" Custom Rule""""""""*/

    ul#qm0 li .qmparent

    {

        background-image:url(qmimages/cssalt1_arrow_right.gif);

        background-repeat:no-repeat;

        background-position:97% 50%;

    }





</style>





<style type="text/css">.qmfv{visibility:visible !important;}.qmfh{visibility:hidden !important;}</style><script type="text/javascript">qmad=new Object();qmad.bvis="";qmad.bhide="";</script>

PS: Das Menu wurde mit QuickMenu (wer das kostenlose Supertool kennt) erstellt.
Freuindliche Grüsse

Wolf

broschi · #2 (**permalink**) 28.04.2008, 23:59

hallo wolf,

als erstes ist dein code überhaupt nicht valide, daher kann schon der ein oder andere fehler kommen.

du hast eine riesen tabelle gemacht, mit nur einer zeile, warum?

arbeite doch lieber mit div, dann sollte auch der ie dies richtig interpretieren können, denn eigentlich macht er alles richtig und zieht den hintergrund in der ganzen zelle auf.

gruß
broschi

wolf1985 · #3 (**permalink**) 29.04.2008, 00:02

Du meinst alles mit DIV anstatt mit Table?

Kann ich mal versuchen müsste klappen.

Das Script war nicht valide, da ich float:center; geschrieben hab statt none.
Nun ist es valide. Ergebnisse des CSS-Validators http://www.tacholine.ch (CSS level 2.1)

Gruss
Wolf

Edit: Valide oder nicht valide, der IE zeigts immer noch falsch an. Also es geht nicht nur um den Hintergrund, sondern eben um die Grösse der Navigation. Öffne die Seite mal im FF und IE und vergliche mal die ITem-Grössen (Einträge der Menunavigation) und Du wirst sehen, im Firefox sinds originalgross, im IE werden die mit dem Inhalt um ca. 1cm (0,5cm oben und 0,5cm unten) vergrössert. why?

broschi · #4 (**permalink**) 29.04.2008, 00:13

HTML Validator deutsch - www.erweiterungen.de

lad dir den mal runter, er zeigt mir 12 warnungen auf deiner seite an, die können durchaus auch fehler im ie erzeugen

probier mal margin aus, denn der ie erzeugt ja einen abstand zwischen den einzelen listenpunkten

auch die tabelle um alles herum würde ich rausnehmen und nur über div herangehen

gruß
broschi

p.s.: wed morgen nochmal in ruhe drüberschauen

wolf1985 · #5 (**permalink**) 29.04.2008, 00:16

Danke für den Tipp, kann es aber nicht installieren da es Firefox 3 Beta 5b nicht unterstützt... schade..

PS: Ich werde mich auch erst morgen daran machen den Code zu ändern.

Geronimo · #6 (**permalink**) 29.04.2008, 12:07

Zum Testen deiner Website solltest du keine aktuelle oder gar noch nicht fertig gestellte Version verwenden. Ideal wäre eine noch weit verbreitete ältere Version.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Benötige dringend Hilfe mit CSS in Firefox & IE :(	r4m0n	CSS	3	20.03.2009 11:12
Grafikproblem IE / Firefox über CSS	techniker	CSS	2	10.02.2009 17:43
CSS - Background-image im Firefox	djsky	CSS	7	04.02.2009 21:36
CSS IE und Firefox - ich flipp aus	yayz78	CSS	10	05.10.2007 02:38
CSS Unterschiede in IE und Firefox	newbalu	CSS	1	30.08.2004 17:48