6 berichten aan het bekijken - 1 tot 6 (van in totaal 6)
  • Q:
    Bijdrager
    HorridCrow

    [CSS] Z-Index in IE

    Hallo,

    Ik ben een website aan het bouwen voor een klant op stage die bijna af is en perfect werkt in Firefox en Safari, maar ben in de knel gekomen met IE (6 en 7).
    Over mijn tekst gebied heb ik een andere class gezet die een button bevat. De tekst div heb ik op z-index laag 1 gezet, en de div met het knopje erin z-index laag 2.

    Zie hier:

    [code:1:45f5bbb48c] .text {
    width: 410px;
    height: 382px;
    background-image: url(../images/contentLeftBG.jpg);
    background-repeat: no-repeat;
    padding: 15px 0px 0px 35px;
    float: left;
    line-height: 13pt;
    z-index: 1;
    }

    .wecare {
    position: absolute;
    width: 80px;
    height: 70px;
    float: left;
    z-index: 2;
    margin-top: 327px;
    float: left;
    }
    [/code:1:45f5bbb48c]

    En de link div waar het rollover knopje in staat:

    [code:1:45f5bbb48c]#wecare {
    display: block;
    width: 80px;
    height: 70px;
    background-image: url(../images/wecareButton.jpg);
    float: left;
    }

    #wecare:hover {
    background-position: 0 -70px;
    }
    [/code:1:45f5bbb48c]

    Zoals ik dus al zei overlapt de We Care button perfect over de tekst div in Firefox en Safari, maar Internet Explorer duwt de We Care div naast de tekst div. De Z-Index werkt hier dus blijkbaar niet.

    Iemand die weet hoe ik dit kan omzeilen?

    Bijdrager
    Rub3n

    Zonder live voorbeeld is het erg lastig helpen.

    Bijdrager
    HorridCrow
    Bijdrager
    rikf

    Probeer het volgende eens:

    Voeg aan #contenLeft het volgende eens toe:
    [code:1:41f571f6f4]position:relative;[/code:1:41f571f6f4]

    En aan .wecare:
    [code:1:41f571f6f4]left:0;
    bottom:0;[/code:1:41f571f6f4]

    (En volgens mij kun je dan een aantal floats schrappen)

    Succes!

    Bijdrager
    essiw
    Bijdrager
    HorridCrow
    ”rikf”

    Probeer het volgende eens:

    Voeg aan #contenLeft het volgende eens toe:
    [code:1:8d32fbf7e3]position:relative;[/code:1:8d32fbf7e3]

    En aan .wecare:
    [code:1:8d32fbf7e3]left:0;
    bottom:0;[/code:1:8d32fbf7e3]

    (En volgens mij kun je dan een aantal floats schrappen)

    Succes!

    Perfect, het heeft gewerkt!:D
    Erg bedankt.

    ”essiw”

    ga eerst is je errors wegwerken dat helpt meestal al veel:

    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.trioprint.nl%2Ftest%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

    Die errors hebben niks met dit probleem te maken.;)
    De meeste errors zijn afkomstig van het Flash script in de html maar ik zou geen andere manier weten om het te doen.
    En daar komt nog bij dat Flash gedeeltes altijd perfect hebben gewerkt in mijn websites.

    Oh, en verder; http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.trioprint.nl%2Ftest%2Fcss%2Fstyles.css&profile=css21&usermedium=all&warning=1&lang=nl

    ;)

6 berichten aan het bekijken - 1 tot 6 (van in totaal 6)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.