[CSS] z-index van div - Softwareontwikkeling

vrijdag 2 mei 2003 14:28

Acties:

Vrolijkheid alom!

Topicstarter

Ik heb een tabel met daarin een relative div. Hier wordt, ten opzichte van die relative div, een absolute div ingezet, 5 pixels van boven en 100 pixels van links. In IE gaat dit helemaal goed, het probleem zit 'm in Netscape, waar ie ook moet werken.

Netscape is van mening dat de absolute div in z'n geheel in de relative div moet passen. Het resultaat is een relative div die de grootte van de absolute div heeft (die groter is) plus een beetje. Da's niet de bedoeling natuurlijk

Ik heb al geprobeerd de z-index van de divs te veranderen, om zo Netscape er van te overtuigen dat de relative div echt niet groter hoeft te worden omdat ze op een andere hoogte zitten... helaas, hij trapt er niet in.

Is er een andere manier om dit voor elkaar te krijgen?

Voorbeeld van wat er nu gebeurd:
Afbeeldingslocatie: http://members.ams.chello.nl/e.venema4/images/div.png

Afbeeldingslocatie: http://members.ams.chello.nl/e.venema4/images/div.png

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

vrijdag 2 mei 2003 14:48

Acties:

Pelle

🚴‍♂️

Eerlijk gezegd vind ik de manier van Netscape een stuk logischer. Een parent div moet imho minimaal even groot zijn als z'n children.. 't is een container-element en het is imho een beetje raar als het containing element kleiner is dan wat er in zit

Ik baal er dus van dat IE hier zo ranzig mee omgaat eerlijk gezegd. Maar goed, dat lost jouw probleem nog niet op

vrijdag 2 mei 2003 14:55

Acties:

Verwijderd

Meestal doet Netscape (Mozilla) het wel goed. Ik denk dat je bedoelt dat IE wel het gewenste gedrag geeft en Netscape niet. Anders kun je nog altijd met Opera7 testen.

Zou je misschien de code of een linkje met het voorbeeld kunnen posten? Ik krijg je probleem niet gereproduceerd.

vrijdag 2 mei 2003 16:18

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Het script wordt normaal door PHP + SMARTY geparsed, maar ik heb even een voorbeeld gemaakt van hoe het zou moeten zijn... ook hier krijg ik in Netscape hetzelfde gedrag, wat 100% tegen de standaard indruist. Een absolute div zou verder alle boundries los moeten laten en de relative div mag zeker niet groter worden... in 3 boeken hebben ze het precies hetzelfde als ik het hier heb.

Geteste browsers:
- IE 6
- Netscape 6
- Safari (Mac OS X)

Cascading Stylesheet:

<html>
<head>
    <title>Menu Test</title>
    
    <style type='text/css'>
    .relative
    {
        position: relative;
    }
    
    .absolute
    {
        position: absolute;
        top: 5px;
        left: 100px;
    }
    .table
    {
        background-color: #5599CC;
        width: 150px;
        border-style: solid;
        border-color: black;
        border-width: 1px;
    }
    </style>
    
</head>
<body>
<basefont face='Trebuchet MS' size='4'>

<table class='table'>
    <a href='#'>
    <tr bgcolor='#5599CC' onmouseover="bgColor='#99CC55'" onmouseout="bgColor='#5599CC'">
        <td>
            <div class='relative'>
                a
            </div>
        </td>
    </tr>
    </a>
</table>

<table class='table'>
    <a href='#'>
    <tr bgcolor='#5599CC' onmouseover="bgColor='#99CC55'" onmouseout="bgColor='#5599CC'">
        <td>
            <div class='relative'>
                b
                <div class='absolute'>
                    <table class='table'>
                        <tr bgcolor='#5599CC' onmouseover="bgColor='#99CC55'" onmouseout="bgColor='#5599CC'">
                            <td>
                                x
                            </td>
                        </tr>
                        <tr bgcolor='#5599CC' onmouseover="bgColor='#99CC55'" onmouseout="bgColor='#5599CC'">
                            <td>
                                y
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </td>
    </tr>
    </a>
</table>

</body>
</html>

Ja, ik weet het, er kan veel meer in de stylesheets, maar het lukte even niet

[ Voor 63% gewijzigd door Kaastosti op 02-05-2003 16:22 ]

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

vrijdag 2 mei 2003 16:42

Acties:

Verwijderd

Bij mij doet die code in zowel Mozilla 1.3 als Internet Explorer 6 hetzelfde. Over welke Netscape versie heb je het?

Ze iig even <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\"> boven je code. Hiermee verwijs je alle browsers naar dezelfde dtd en dit zorgt ervoor dat ze zich al een beetje meer hetzelfde gaan gedragen.

[ Voor 6% gewijzigd door Verwijderd op 02-05-2003 16:43 ]

vrijdag 2 mei 2003 16:48

Acties:

Verwijderd

Ik zie het probleem niet ontstaan. Ik gebruik een erg recente versie van Phoenix (Mozilla 1.4a).
Ik ben bang dat het een bug in Mozilla was die ze om zeep hebben geholpen.

vrijdag 2 mei 2003 17:04

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; m18) Gecko/20001108 Netscape6/6.0 \

Da's de versie van Netscape die ik gebruik en daar moet het ook op gaan werken. Je kunt natuurlijk wel altijd op de laatste versies bouwen, maar jah... niet iedereen heeft die

Doctype stond er in eerste instantie ook bij... in deze versie alleen nog niet. In ieder geval maakt het niets uit voor de werking van Netscape hier. In alle andere browsers gaat het goed, maar het zal dus uiteindelijk ook op de een of andere manier in Netscape moeten gaan werken.

[ Voor 36% gewijzigd door Kaastosti op 02-05-2003 17:05 ]

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

vrijdag 2 mei 2003 17:43

Acties:

Verwijderd

Wat je zou kunnen doen is de tabel gewoon weggooien en de stijldeclaraties van .table aan .relative en .absolute geven. De onmouseover en onmouseout events zul je ook naar .relative moeten gooien. Deze werken dan niet meer zoals bedoeld. Uberhaupt vreemd dat ze eerst wel werkten.
Ik kan me wel iets herinneren dat Mozilla lange tijd een bug had met tabellen en position relative, absolute of iets dergelijks. Kan alleen geen bugnr ervoor vinden.

vrijdag 2 mei 2003 18:21

Acties:

Verwijderd

Gecko/20001108
al weer bijna 3 jaar oud

Gecko/20030427
Yay!! Moz 1.4b

Er zaten een hele hoop CSS bugs in de css parser van NS 6, zelfs t/m 6.2, vanaf 7.0 is het veel beter geworden, en de bug waaraan jij nu refereert is nog niet zolang geleden opgelost, kan hem echter ook niet vinden.

Hieronder een aardig scriptje, om een user gewoon door te sluisen naar Mozilla.org

HTML:

<script type="text/javascript">
function geckoGetRv()
{
  if (navigator.product != 'Gecko')
  {
    return -1;
  }
  var rvValue = 0;
  var ua      = navigator.userAgent.toLowerCase();
  var rvStart = ua.indexOf('rv:');
  var rvEnd   = ua.indexOf(')', rvStart);
  var rv      = ua.substring(rvStart+3, rvEnd);
  var rvParts = rv.split('.');
  var exp     = 1;

  for (var i = 0; i < rvParts.length; i++)
  {
    var val = parseInt(rvParts[i]);
    rvValue += val / exp;
    exp *= 100;
  }

  return rvValue;
}


// determine if the browser is any Netscape Gecko
// branch >= 1.0.1 or Netscape 6.2.x

var rv    = geckoGetRv();
var found = false;

if (rv >= 0)
{
  // Gecko browser
  if (navigator.productSub > '20020801')
  {
    if (rv >= 1.0001)
    {
      found = true;
    }
    else if (rv >= 0.0904 && rv < 0.0905)
    {
      if (navigator.vendor == 'Netscape6'')
      {
        found = true;
        window.location.href='http://www.mozilla.org/releases/';
      }
    }
  }
}
</script>

Met dank aan Devedge

vrijdag 2 mei 2003 19:01

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Mjah dus het lag niet aan mij maar toch echt aan Netscape... dan moeten ze het er maar mee doen

Dit is dus simpelweg niet op te lossen

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

vrijdag 2 mei 2003 19:33

Acties:

Verwijderd

Niet met tables nee. Dit zou echter wel moeten werken met Netscape6.

HTML:

<html><head>    <title>Menu Test</title>
    
<style type='text/css'>
.relative
    {
        position: relative;
                background-color: #5599CC;
        width: 150px;
        border-style: solid;
        border-color: black;
        border-width: 1px;
    }
    
    .absolute
    {
        position: absolute;
        top: 5px;
        left: 100px;

    }
    .table
    {
        background-color: #5599CC;
        width: 150px;
        border-style: solid;
        border-color: black;
        border-width: 1px;
    }
        div.table:hover{
        background-color:#99CC55;
        }
        div.relative:hover{
        background-color:#99CC55;
        }
    </style>
    
</head>
<body>
<div bgcolor='#5599CC' class='relative'>
a
</div>

<div class='relative'>
b
<div class='relative absolute'>
<div class='table'>
x
</div>
<div class='table'>
y
</div>
</div>
</div>
</body></html>

Als je de hoverstyles ook werkend wil hebben in IE, dan zul je extra a-tags (zoiets: <a href="#">) in de divs moeten zetten met als stijl:

code:

div.relative a {
display:block;
width:100%;
margin:0px;
padding:0px;
text-decoration:none;
color:black;
}
div.relative a:hover{
background-color:#99CC55;
}

Of zoiets dergelijks.

Ik weet niet precies wat je ermee wil, maar als je er allemaal links in wil stoppen, dan zouden ul en li-tags nog zinvoller zijn dan div-tags. Dat zou misschien wel meer browser-compatibiliteits-problemen kunnen geven.

vrijdag 2 mei 2003 20:20

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Het is inderdaad een menustructuur die heeeeeeel generiek moet zijn. Ik ben al geruime tijd bezig met de achterliggende php, maar aangezien ik op dat front wacht op meer informatie ben ik me hier vast mee bezig gaan houden.. is nog best wel lastig ook

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.