tds overlappen div

[FerdyHoefakker]

Hallo,

Ik zit met een probleempje. Ik moet een tabel maken van status overzichten van verschillende taken voor verschillende maanden. Nou is dit zonder moeite gelukt. Het punt is echter, als je op het icoontje klikt, moet er een soort popup komen met verdere informatie. Op zich niet spectaculair, gewoon een divje via een JS functie tonen en hiden. Echter, zoals op de image hieronder te zien is, valt de div ONDER de td's van de rest van de tabel. Ik vermoed een CSS foutje, maar ik kom er niet achter. Alle z-indexen zijn door mijzelf en mijn collega al tig keer gecontroleerd, dus ik weet et niet meer inmiddels.




Hier is een stukje uit de html en daaronder de CSS. Sorry, maar ik kreeg het niet helemaal netjes uitgelijnd hier.

HTML: html

<table class="dataTable" cellspacing="0" border=1>
     <tr>
          <th style="width:100px;text-align:left;">taak</th>
          <th style="text-align:center;">Sep 08</th>
<th style="text-align:center;">Oct 08</th>
                <th style="text-align:center;">Nov 08</th>
<th style="text-align:center;">Dec 08</th>
                <th style="text-align:center;">Jan 09</th>  
        </tr>
        <tr title="een test taak" class="">
                <td>test taak</td>
                <td style="text-align:center;">-
                              <!-- Pop up voor bekijken status oude controle -->
                              <div class="popUp" id="popUp14" style="display:none;z-index:99;">
                                    pop up data hier
                               </div>

                               <!-- Pop up voor status toewijzen aan nieuwe controle -->
                               <div class="popUp" style="display:none;" id="popUpEnter14">
                                       <form method="post" action="-" name="-" id="-" style="display:inline;">
                                                     formulier hier
                                          </form>
                                          <a onclick="jsFunctie()">Sluiten</a>
                               </div>
                   </td>

Cascading Stylesheet: css

.popUp
{
     border:1px solid #000;
     position:absolute;
     z-index:10;
     width: 400px;
     background-color: red;
     text-align: left;
     right: 60px;
     top: 15px;
     padding: 5px;
}

Alvast bedankt aan een ieder die de tijd neemt dit te lezen.

[RobIII]

Haal de div eens uit je table en zet 'm ergens anders in je HTML

Verder zou het fijn zijn als je even je code netjes indent en overbodige style meuk en andere zooi er uit laat zodat het wat leesbaarder wordt.

[ Voor 52% gewijzigd door RobIII op 06-01-2009 22:09 ]

[kalizec]

Als je iets een "position: absolute" mee geeft moet je niet raar staan kijken als het ook precies op die plek gerenderd wordt.

Tevens zou ik ook eens de Z-index van de andere dingen opgeven.

[ Voor 21% gewijzigd door kalizec op 06-01-2009 22:14 ]

[FerdyHoefakker]

Ja, ik kreeg et niet voor elkaar om het netjes uit te lijnen hier, sorry. Verder kan ik de div nergens anders maken, want alles wordt gegenereerd. Maar het probleem is opgelost, ik heb de right en top uit de css gehaald en vervangen met een margin top en left. Dan werkt het wel. Op die mannier is het niet nodig om de td waar de divs in staan een position en z-index te geven en wordt de boel niet gesloopt.

@kalizec: De div komt precies waar ik hem hebben wil. Alleen hij liep ONDER de td's door ipv dat ie er over heen ging. Zoals ik hierboven al zei, dat is nu opgelost.

[ Voor 17% gewijzigd door FerdyHoefakker op 06-01-2009 22:14 ]

[wackmaniac]

-- sorry, niet goed gelezen

[ Voor 92% gewijzigd door wackmaniac op 07-01-2009 08:59 ]