1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

CSS Problem IE

Dieses Thema im Forum "PHP & Co." wurde erstellt von zoom, 24.05.09.

  1. zoom

    zoom Antonowka

    Dabei seit:
    06.03.06
    Beiträge:
    356
    Moin!

    Ich habe folgenden html-Code:
    Code:
    <html>
    <head>
    <style type="text/css">
    #menu {
    	position: absolute;
    	margin-top: 30px;
    }
    #menu li {
    	display: inline;
    }
    #menu a {
    	padding: 7px 10px;
    }
    #menu a:hover {
    	border-top: 4px solid red;
    }
    </style>
    </head>
    <body>
    <div id="menu">
    <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    </ul>
    </div>
    </body>
    </html>
    Leider wird beim hover das border-top im IE(kleiner gleich 7.0) nicht angezeigt. Sobald ich das position: absolute im menu-div weglasse, ist alles in Ordnung. Ich brauche allerdings die absolute Position für das weitere Drumherum.
    Kann man dem IE irgendwie beibringen, was er tun soll, oder habt ihr einen Lösungsansatz?

    Gruß zoom
     
  2. pepi

    pepi Cellini

    Dabei seit:
    03.09.05
    Beiträge:
    8.741
    IE6 ist der letzte Schrott aufgrund des massiv gestörten Box Models. Investiere sinnvollerweise keinen Augenblick Zeit in diesen Browser mehr! IE6 muß endlich sterben! Man führe sich vor Augen, daß dieser Browser älter ist als der iPod! Als jeder iPod!
    Gruß Pepi
     
  3. wipeout

    wipeout Ribston Pepping

    Dabei seit:
    25.04.09
    Beiträge:
    295
    Leider ist das nicht ohne weiteres möglich, da dem IE6 immer noch viel zu viel Beachtung geschenkt wird. Solange sich daran nichts ändert, muss auch weiterhin schön für den IE6 optimiert werden.

    Da geb' ich dir Recht!
     
  4. pepi

    pepi Cellini

    Dabei seit:
    03.09.05
    Beiträge:
    8.741
    Solange Leute immer noch auf den IE6 Rücksicht nehmen werden die Leute nie mit dem Schrott aufhöhren!
    Man muß dem Kunden auch mal klarmachen, daß Legacy Support für IE6 mehr kostet. Man werkt meist nochmal so lange wie für Standardkonformen nochmal an den Bugs im IE.

    Es ist nicht gesichtert, daß Du Dein Problem mit IE überhaupt lösen kannst. Das Box Model im IE6 ist hoffnungslos defekt.
    Gruß Pepi
     
  5. zoom

    zoom Antonowka

    Dabei seit:
    06.03.06
    Beiträge:
    356
    Moin!

    Der Fehler tritt auch beim IE 7 auf. Und den kann man nun leider auf keinen Fall vernachlässigen. Also gibt es Lösungsansätze?

    Gruß zoom
     
  6. wipeout

    wipeout Ribston Pepping

    Dabei seit:
    25.04.09
    Beiträge:
    295
    Einen Lösungsansatz habe ich bisher nicht. Das ist aber bei dem IE6 auch recht schwierig gleich am Anfang irgendwelche Fehler zu korrigieren.

    Ist das bisher alles an Code was du geschrieben hast?

    Mein Tipp:
    Schreibe erst einmal deinen kompletten Code zu ende und achte zunächst nur auf eine richtige Darstellung für Gecko-Browser. Wenn du damit fertig bist und alles richtig dargestellt wird, dann wende dich der Baustelle IE6 zu. Gegebenenfalls musst du dich noch einmal melden.

    Nach der Methode verfahre ich immer und ich fahre damit recht gut.
     
  7. zoom

    zoom Antonowka

    Dabei seit:
    06.03.06
    Beiträge:
    356
    Hallo Jens,

    wie bereits erwähnt geht es mir hier nicht darum, dass der IE6 einen Fehler macht. Viel wichtiger ist, dass ich den IE7 dazu bringen muss das zu tun, was die anderen Browser auch tun. Es ist also ein Problem, was der IE7 verursacht. (Der Fehler im IE6 wäre mir egal.)
    Der gegebene Quellcode ist natürlich nicht alles. Ich bereits die komplette Seite fertig und zum Schluss die Kompatibilität zum IE getestet. Da gehe ich also ähnlich vor wie du. Leider stellt der IE eben bei absoluter Position keinen Rahmen dar.
    Meine Frage ist halt, ob es da eine Lösungsmöglichkeit gibt.

    Gruß zoom
     
  8. wipeout

    wipeout Ribston Pepping

    Dabei seit:
    25.04.09
    Beiträge:
    295
    Hallo zoom,

    ich konnte das Problem ausfindig machen.

    Du musst folgendes
    Code:
    #menu {
      position: absolute;
      [COLOR=Red]margin-top: 30px;[/COLOR]
    }
    in das hier ändern:
    Code:
    #menu {
      position: absolute;
      [COLOR=Red]padding-top: 30px;[/COLOR]
    }
    Funktioniert bei mir sowohl im IE6 als auch im IE7.
     
    #8 wipeout, 26.05.09
    Zuletzt bearbeitet: 26.05.09
  9. zoom

    zoom Antonowka

    Dabei seit:
    06.03.06
    Beiträge:
    356
    Jens, das funktioniert tatsächlich. Diese scheinbare Willkür des IE ist echt beeindruckend.
    Leider stellt sich nun heraus, dass mein Framework doch ein wenig anders aussieht.
    Code:
    <html>
    <head>
    <style type="text/css">
    #menu {
    	width: 100%;
    	font-weight: bold;
    }
    #menu ul {
    	position: absolute;
    	width: 750px;
    	height: 30px;
    	left: 50%;
    	margin: 0 0 0 -380px;
    	padding: 7px 0;
    	list-style-position: inside;
    	list-style-type: none;
    }
    #menu li {
    	display: inline;
    }
    #menu a {
    	padding: 7px 10px;
    }
    #menu a:hover {
    	border-top: 4px solid red;
    }
    </style>
    </head>
    <body>
    <div id="menu">
    <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    </ul>
    </div>
    </body>
    </html>
    Der Fehler besteht hier weiterhin... Ich kann einfach nicht herausfinden, woran das liegt. Hat da jemand noch eine Idee?
     
  10. wipeout

    wipeout Ribston Pepping

    Dabei seit:
    25.04.09
    Beiträge:
    295
    Habe eben noch einmal den Code unter die Lupe genommen und ein paar Änderungen vorgenommen. Läuft bei mir jetzt im IE6 bzw. IE7.

    Code:
    <style type="text/css">
    #menu {
        width: 100%;
        font-weight: bold;
    }
    #menu ul {
        position: absolute;
        width: 750px;
        height: 30px;
        left: 50%;
        margin: 0 0 0 -380px;
        padding: 5px 0px 0px 0px;
        line-height: 30px;
        list-style-position: inside;
        list-style-type: none;
    }
    #menu li {
        display: inline;
    }
    #menu a {
        padding: 7px 10px 0px 10px;
    }
    #menu a:hover {
        border-top: 4px solid red;
    }
    </style>
     
    zoom gefällt das.
  11. zoom

    zoom Antonowka

    Dabei seit:
    06.03.06
    Beiträge:
    356
    Jens, Vielen Dank für deine Hilfe! Das klappt jetzt alles wunderbar.
     
  12. wipeout

    wipeout Ribston Pepping

    Dabei seit:
    25.04.09
    Beiträge:
    295
    Keine Ursache. Viel Spaß mit deiner Homepage!
     

Diese Seite empfehlen