[CSS] Probleem met Z-index of is het iets anders? - Softwareontwikkeling

dinsdag 25 maart 2008 17:16

Acties:

Verwijderd

Topicstarter

In een website heb ik een agenda die een "meer info" tekstballonnetje kan weergeven.
In IE werkt dit allemaal perfect, maar ik loop in FF tegen wat problemen op.

klik hier voor een plaatje

Als je naar het plaatje kijkt zie je meteen wat er mis gaat, de tekst van de rechter kolom komt door de popup heen. Ik heb al vanalles geprobeerd en ik vrees dat het geen Z-index probleem is. Is er iemand die mij kan vertellen wat dit probleem zou kunnen veroorzaken?

De linker kolom (met die agenda erin) heeft Z-index 5
De popup heeft z-index 100
de rechterkolom (met die blauwe achtergrond) heeft z-index 0

dinsdag 25 maart 2008 17:26

Acties:

MichielioZ

Volgens mij had dit iets te maken met het feit dat z-index niet bij alle elementen "overerft" (inherit).
Maar is het niet makkelijker om die popup gewoon absoluut te positioneren ? Als de code van de popup dan na de rechterkolom komt (mocht die ook absoluut gepositioneerd zijn), dan verschijnt ie er volgens mij gewoon bovenop...

Iedereen wil terug naar de natuur, maar niemand wil lopend...

woensdag 26 maart 2008 09:11

Acties:

Verwijderd

Topicstarter

MichielioZ schreef op dinsdag 25 maart 2008 @ 17:26:
Volgens mij had dit iets te maken met het feit dat z-index niet bij alle elementen "overerft" (inherit).

Volgens mij is dit hier niet het probleem. De Z-index van de popup en de Z-index van het vlak waar hij overheen moet zijn allebei gezet, dus die krijgen het niet via overerving. Daarbij komt dat IE het wel goed weergeeft, dus dan lijkt mij dat de z-indexes wel goed gezet zijn.

MichielioZ schreef op dinsdag 25 maart 2008 @ 17:26:
Maar is het niet makkelijker om die popup gewoon absoluut te positioneren ? Als de code van de popup dan na de rechterkolom komt (mocht die ook absoluut gepositioneerd zijn), dan verschijnt ie er volgens mij gewoon bovenop...

Absoluut positioneren had ik ook al geprobeerd. Dat brengt een hoop problemen mee met het positioneren, en helaas is het probleem daarmee nog steeds niet opgelost.

woensdag 26 maart 2008 10:53

Acties:

moozzuzz

Zonder code wordt het hier wat moeilijk om een oplossing te bedenken... Bij dit soort problemen ligt de oorzaak vaak bij de volgorde van de elementen in je code. Gooi evt. een gestripte testcase online of post de testcase hier tussen [ code ] -tags.

woensdag 26 maart 2008 11:17

Acties:

Verwijderd

Topicstarter

Bij deze:

uitgeklede versie van de main template

HTML:

<body >
  <div id="siteContainer">
    <!-- main menu -->
      <div id="columnContainer">
          <div id="leftContainer">
              <!-- inhoud links-->
          </div>
          <div id="middleContainer" style="z-index:5;">
            <!-- kalender maandoverzicht -->
            <table>
                <tr>
                <td>
                    <span onclick="openPopup()">
                    klik mij om de popup te openen
                    <div style="z-index:100">
                        popup
                    </div>
                  </span>
                </td>
              </tr>
            </table>
          </div>
          <div id="rightContainer" style="z-index:0;">
            <!-- inhoud rechterkolom -->
            <div id="loginContainer">
               <!-- Dezet tekst komt over de popup, wat niet de bedoeling is -->
             </div>
            <div id="banner"></div>
          </div>
          <div class="cleaner"></div>
      </div>
      <div id="footer">
          <!-- copyright notice-->
      </div>
  </div>
</body>

Cascading Stylesheet:

/* rechter colom */
#rightContainer{
    width: 189px;
    float: left;
    background-image: url( '/site_files/img/right-top-gradient.jpg' );
    background-position: top left;
    background-repeat: repeat-x;
    background-color: #EFF1F4;
    padding: 0px;   
}

#loginContainer  {
   position: relative;
   line-height: 1.5em;
   height: 216px;
   background: url('/site_files/img/login_background.gif') repeat-x bottom left;
}

/*style voor de popyp*/
#calendar .doPopup .info{
    position: absolute;
    margin-top: -234px;
    margin-left: 0px;
    padding: 17px 34px 37px 19px;
    width: 326px;
    height: 185px;
    background:url(/site_files/img/calendar_popup.png);
    display: none;
    font-size: 12px;
}

woensdag 26 maart 2008 11:34

Acties:

tonyisgaaf

Ik kan het mis hebben, maar ik heb altijd begrepen dat een z-index geldt binnen de scope van een parent element t.o.v. de siblings. Een hoge z-index geven op één element niveaus lager dan een ander element met een lagere z-index maar hiërarchisch hoger heeft dus geen effect.

Edit1: te kort door de bocht, na twee keer kijken zie ik dat je middleContainer idd een hogere z-index heeft dan je rightContainer. Misschien idd een idee om deze containers qua volgorde om te draaien en zo een andere hiërarchie af te dwingen?

Edit2: de popup div staat in een span, in principe dus een block element in een inline element. Misschien dat FF zich daarin verslikt. Je zou de popup div "naast" de span kunnen plaatsen...

[ Voor 49% gewijzigd door tonyisgaaf op 26-03-2008 11:48 ]

NL Weerradar widget Euro Stocks widget Brandstofprijzen widget voor 's Dashboard

woensdag 26 maart 2008 14:13

Acties:

Verwijderd

Topicstarter

Bedankt voor de replies...

Ik heb na een hoop gepuzzel en gevloek het probleem opgelost. Vraag niet hoe want door het vele experimenteren weet ik het zelf ook niet meer.

woensdag 26 maart 2008 15:35

Acties:

TeeDee

CQB 241

staat wel zo netjes tegenover de andere gebruikers.
Plaats dan in ieder geval bovenstaande (uitgeklede) testcase nog een keer, alleen dan werkend.

Heart..pumps blood.Has nothing to do with emotion! Bored