[dhtml] Positie van absoluut gepositioneerde DIVs

[Not Pingu]

Ik ben nu aan het werken aan mijn site en zoals jullie kunnen zien is deze gecentreerd.

zoals jullie ook kunnen zien wil ik er van die popup menutjes in maken, maar hierbij loop ik dus vast op het gecentreerd zijn van de site.

Het probleem: de positie van de DIVjes.
In IE is het geen probleem om de DIVjes op de goede plek weer te geven, maar in Mozilla is dat uiteraard weer anders, dankzij de verschillende interpretaties van position: absolute.

In IE blijft een absoluut gepositioneerd item op z'n plaats staan, en opgegeven posities worden berekend vanaf de rand van het parent item.
Bij mozilla worden posities berekend vanaf de rand van het scherm, waardoor de DIVjes in mozilla helemaal linksboven staan.

de mogelijkheid van een aangepaste CSS voor mozilla loopt stuk op het feit dat de divjes doodleuk linksboven in de hoek blijven als je het window verkleint. dus de grootte van het window is uiteraard ook van invloed op de positie.

Is er een mogelijkheid om dit te fixen zodat de site toch volledig cross-browser compatible is, zonder al te rare fratsen erbij? ik zou natuurlijk de afstand kunnen berekenen tussen de linkergrens van het window en de linkergrens van de gecentreerde tabel, maar dat lijkt me nogal omslachtig...

de menuutjes werken uiteraard wel perfect als ik de tabel links uitlijn, maar als het even kan wil ik em gecentreerd houden.

PS: de DIVjes staan in de code vlak naast de IMG tags van de menuknoppen waarbij ze horen.

bij voorbaat dank.

edit:
ps. let niet op de tekst op de site, is zomaar een opdracht van school die ik erin heb geplakt als vulling

[ Voor 4% gewijzigd door Not Pingu op 02-01-2003 23:09 ]

[crisp]

Het spijt me zeer, maar ook in IE6 doet het menu het niet goed.
Het verhaal wat je afsteekt over verschil in position: absolute tussen IE en NS/Mozilla is voor zover ik weet ook niet waar; het lijkt me dan ook handig dat je de reference er nog eens op na gaat slaan...

[Verwijderd]

wat crisp zegt klopt
ik hoop dat er nog een nieuw positioneringsmodel komt waarmee dingen wel 'absoluut' aan het parent element gehangen kunnen worden, nu is wat jij wilt alleen mogelijk door flink te gaan scripten helaas

[Verwijderd]

idd, een absoluut gepositioneerde div binnen een tabel cel zal de body zien als het parent element om de simpele reden dat een tabel cel geen block element is en de body wel. Daarom zal je voor het positioneren van een div element binnen een tabel cel altijd position:relative; moeten gebruiken.

een voorbeeld

[Not Pingu]

crisp:
dat ie het in IE6 ook niet perfect doet komt omdat ik ze nog niet goed gepositioneerd heb.

maar kijk even naar dit screenshot en je zult zien dat ik niet achterlijk ben zoals je lijkt te denken.

en ja de menuutjes horen allebei boven elkaar te staan, ik zet ze pas goed als ik weet dat het in beide browsers zal werken.

[Verwijderd]

Fool dat is wel heel goed mogelijk zonder scripting zolang het maar een block-level element is.

[Not Pingu]

Verwijderd schreef op 03 January 2003 @ 00:02:
idd, een absoluut gepositioneerde div binnen een tabel cel zal de body zien als het parent element om de simpele reden dat een tabel cel geen block element is en de body wel. Daarom zal je voor het positioneren van een div element binnen een tabel cel altijd position:relative; moeten gebruiken.

een voorbeeld

maar in dat geval zou het plaatsen van een <DIV> tag om de tabel heen, dit probleem toch moeten oplossen? ik heb de volgende code om de tabel heen geplaatst:

code:

<CENTER>
<DIV STYLE="width: 765px; padding: 0px; spacing: 0px; height: 100%;">

[..tabel..]

</DIV>
</CENTER>

en je zou dus zeggen dat ie de positie dan meet adhv. de DIV tag, maar dat is dus nog steeds niet het geval.

maar het is dus wel zo dat IE6 een TABLE tag als block element rendert, maar Mozilla 1.0 niet.

[Verwijderd]

eehwww <center>!! auw auw, jouw site is een soort hybride van HTML 3.2 en css, maar goed je geeft die div dus geen position mee en daardoor zullen de child elementen nooit de positie t.o.v. het parent element kunnen bepalen, je kan dan ook moeilijk van een UA verwachten dat het goed gerenderd/weergegeven word.

Een div tag is niks anders dan een block-level element het zegt niks over de positie zolang jij geen referenties meegeeft over waar het element zich bevind t.o.v. bijv. de body.

Het boven gegeven voorbeeld van jouw zegt werkelijk niks over de positie en spacing is geen geldige rule.

HTML:

<div style="width:765px; padding:0px; margin:0px; height: 100%; left:50px; top:30px; position:absolute; ">

[..tabel..]

</div>

Dit lijkt er iets meer op, sorry voor de lay-out. Ga nu naar bed, tot morgen.

[crisp]

Gunp01nt schreef op 03 January 2003 @ 00:02:
crisp:
dat ie het in IE6 ook niet perfect doet komt omdat ik ze nog niet goed gepositioneerd heb.

maar kijk even naar dit screenshot en je zult zien dat ik niet achterlijk ben zoals je lijkt te denken.

en ja de menuutjes horen allebei boven elkaar te staan, ik zet ze pas goed als ik weet dat het in beide browsers zal werken.

Gunp01nt: ik denk zeker niet dat je achterlijk bent; snap ook niet helemaal waar je dat uit opmaakt. Absolute positionering binnen een blocklevel element werkt gewoon hetzelfde in IE en in NS/Mozilla. Of een table anders behandeld wordt in de verschillende browsers geloof ik ook niet helemaal (volgens mij is een table-cell altijd een blocklevel element), maar dat ga ik morgen even verifieren.
Echter zou je ook kunnen overwegen helemaal geen gebruik van een table te maken, en alles met layers te doen; een table is immers ook niet bedoeld voor opmaak maar voor de weergave van tabulaire data

[Not Pingu]

crisp schreef op 03 januari 2003 @ 00:37:
[...]

Gunp01nt: ik denk zeker niet dat je achterlijk bent; snap ook niet helemaal waar je dat uit opmaakt.

tja, ik vond alleen dat je vrij snel kwam met de opmerking dat ik de referentie maar eens moet nalezen. maar never mind.

Absolute positionering binnen een blocklevel element werkt gewoon hetzelfde in IE en in NS/Mozilla. Of een table anders behandeld wordt in de verschillende browsers geloof ik ook niet helemaal (volgens mij is een table-cell altijd een blocklevel element), maar dat ga ik morgen even verifieren.
Echter zou je ook kunnen overwegen helemaal geen gebruik van een table te maken, en alles met layers te doen; een table is immers ook niet bedoeld voor opmaak maar voor de weergave van tabulaire data

hehe, ik weet dat veel mensen dat afraden, maar op dit kleine probleempje na werkt het perfect in alle browsers, en je weet tenminste zeker dat alles op zijn plaats blijft.
ik heb bij DIVs nog wel eens het probleem dat de boel over elkaar heen gaat schuiven of elkaar wegdrukt.

[Not Pingu]

Verwijderd schreef op 03 January 2003 @ 00:35:
eehwww <center>!! auw auw, jouw site is een soort hybride van HTML 3.2 en css

rustig, rustig... heb ik er alleen maar ff bij gezet om de DIV tags te testen en de laatste keer dat ik het controleerde valideerde de site perfect als HTML 4.01 transitional.

[Verwijderd]

Ik heb nog even gekeken en crisp had gelijk een td is idd een block-level element Ik denk steeds meer dat het een bug is van Mozilla aangezien zowel Opera 7 en IE precies hetzelfde doen.. Ik ga even in bugzilla rondneuzen.

[Shagura]

offtopic:
Ik zou trouwens iets aan die poll doen, want je kan nu gewoon 100 keer stemmen en dat lijkt mij niet de bedoeling...

edit:
en dan buit iedereen het ook gelijk uit hier op GoT

[ Voor 21% gewijzigd door Shagura op 03-01-2003 13:04 ]

[André]

Shagura schreef op 03 januari 2003 @ 12:49:

offtopic:
Ik zou trouwens iets aan die poll doen, want je kan nu gewoon 100 keer stemmen en dat lijkt mij niet de bedoeling...

Klopt, zie Tiesto.....

Edit:
Er liep iemand te stemmen op Ferry Corsten...Is nu de lol er af???

[ Voor 14% gewijzigd door André op 03-01-2003 13:13 ]

[Shagura]

Yogho schreef op 03 January 2003 @ 13:04:
[...]

Klopt, zie Tiesto.....

en nu is de layout verneukt

[crisp]

Ik ben al even aan het stoeien geweest met eea en heb wat leuke (nou ja, leuk) dingen ontdekt; zowel dingen die Mozilla fout doet (td niet als block zien), als dingen die IE fout doet (positionering in een element met text-align: center).
Ik zal vanavond wat cases online zetten.
Ondertussen heb ik wel een werkend menu zonder gebruik te maken van tables:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Menu</title>
<script type="text/javascript">

function showmenu(n) {

  document.getElementById('submenu'+n).style.visibility = 'visible';

}

function hidemenu(n) {

  document.getElementById('submenu'+n).style.visibility = 'hidden';

}

</script>
<style type="text/css">
div.menucontainer {
  position: absolute;
  top: 20px;
  left: 50%;
  margin-left: -150px;
  width: 300px;
  height: 20px;
  border: 1px solid #000000;
  -moz-box-sizing: border-box;
}
div.menu {
  float: left;
  width: 80px;
  height: 18px;
  border: 1px solid #000000;
  -moz-box-sizing: border-box;
  font-family: verdana;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  cursor: hand;
}
div.submenucontainer {
  position: absolute;
  visibility: hidden;
  margin-top: 4px;
  margin-left: 2px;
}
div.submenu {
  width: 80px;
  height: 18px;
  border: 1px solid #000000;
  -moz-box-sizing: border-box;
  font-family: verdana;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  cursor: hand;
}
div.caption {
  width: 100%;
  height: 16px;
  text-align: center;
  vertical-align: middle;
  padding: 0px;
  margin: 0px;
}
</style>
</head>
<body>
<div class="menucontainer">
  <div class="menu" onmouseover="showmenu(1)" onmouseout="hidemenu(1)"><div class="caption">Menu 1</div>
    <div class="submenucontainer" id="submenu1" onmouseover="showmenu(1)" onmouseout="hidemenu(1)">
      <div class="submenu">Item 1a</div>
      <div class="submenu">Item 1b</div>
      <div class="submenu">Item 1c</div>
    </div>
  </div>
  <div class="menu" onmouseover="showmenu(2)" onmouseout="hidemenu(2)"><div class="caption">Menu 2</div>
    <div class="submenucontainer" id="submenu2" onmouseover="showmenu(2)" onmouseout="hidemenu(2)">
      <div class="submenu">Item 2a</div>
      <div class="submenu">Item 2b</div>
      <div class="submenu">Item 2c</div>
    </div>
  </div>
  <div class="menu" onmouseover="showmenu(3)" onmouseout="hidemenu(3)"><div class="caption">Menu 3</div>
    <div class="submenucontainer" id="submenu3" onmouseover="showmenu(3)" onmouseout="hidemenu(3)">
      <div class="submenu">Item 3a</div>
      <div class="submenu">Item 3b</div>
      <div class="submenu">Item 3c</div>
    </div>
  </div>
</div>
</body>
</html>

erg groffe opzet, en sorry voor de lap code; kan vanaf hier niet op m'n site komen...

[crisp]

Hier nog even een heel mooi voorbeeldje; ik heb dit bekeken in IE5.5, Moz1.2 en Opera 7 en geen een browser laat hetzelfde zien:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CSS Positioning</title>
<style type="text/css">

table.bigcontainer {
  width: 300px;
  height: 300px;
  border: 1px solid #000000;
}

td {
  position: relative;
  text-align: center;
}

div.smallcontainer {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid #000000;
}

</style>
</head>
<body>
<table class="bigcontainer">
  <tr>
    <td>a
      <div class="smallcontainer">b</div>
    </td>
  </tr>
</table>
</body>
</html>

Mijn conclusie vooralsnog is dat zonder gebruik te maken van hacks (en eventueel wat scripting) het niet mogelijk is met behulp van CSS eenzelfde resultaat te bereiken in de laatste versies van de verschillende browsers.
In mijn vorige voorbeeld zit al een hack, namelijk het gebruik van -moz-box-sizing; dit lost het verschil in boxmodel tussen IE en Mozilla wel op, maar Opera gebruikt dan nog steeds het padding-box model...

[Verwijderd]

Nog even over dat verschil tussen Mozilla en IE/Opera. Mozilla ziet het td element niet als een block-level element als ik het goed begrijp (css:als table-cell?).
Met als gevolg dat absoluut gepositioneerde element binnen die td niet worden berekend vanaf de positie van die td, maar vanaf het eerstvolgende block-element (table?).
Is dit gedrag van Mozilla nu goed of doen IE/Opera het fout?
En waar kan ik dit precies vinden op de w3 site, want ik kan het echt niet vinden.

Over het probleem van gunp01nt, ipv het gebruik van visibility, misschien display:block display:none gebruiken en de eromheenliggende td op display:block zetten. Misschien dat er op zo'n manier een cross-browser (lees:OP7,IE6, Moz) oplossing is te bereiken.

[crisp]

Verwijderd schreef op 03 januari 2003 @ 13:57:
Nog even over dat verschil tussen Mozilla en IE/Opera. Mozilla ziet het td element niet als een block-level element als ik het goed begrijp (css:als table-cell?).
Met als gevolg dat absoluut gepositioneerde element binnen die td niet worden berekend vanaf de positie van die td, maar vanaf het eerstvolgende block-element (table?).
Is dit gedrag van Mozilla nu goed of doen IE/Opera het fout?
En waar kan ik dit precies vinden op de w3 site, want ik kan het echt niet vinden.

Over het probleem van gunp01nt, ipv het gebruik van visibility, misschien display:block display:none gebruiken en de eromheenliggende td op display:block zetten. Misschien dat er op zo'n manier een cross-browser (lees:OP7,IE6, Moz) oplossing is te bereiken.

Je td op display: block zetten is niet zo'n goed idee; in plaats van naast elkaar zal Mozilla de cellen dan onder elkaar gaan renderen als ware het een div...

[Not Pingu]

Shagura schreef op 03 January 2003 @ 13:08:
[...]

en nu is de layout verneukt

ik haat jullie

eigenlijk zou de pagina een cookie moeten plaatsen als je gestemd hebt, maar dat werkt dus kennelijk nog niet helemaal goed
welke ******** heeft er trouwens op Dana zitten stemmen?

edit:
ik heb dopoll.asp maar ff weggehaald
note to self: pollgegevens doorsturen dmv. POST

Verwijderd schreef op 03 January 2003 @ 13:57:
Nog even over dat verschil tussen Mozilla en IE/Opera. Mozilla ziet het td element niet als een block-level element als ik het goed begrijp (css:als table-cell?).
Met als gevolg dat absoluut gepositioneerde element binnen die td niet worden berekend vanaf de positie van die td, maar vanaf het eerstvolgende block-element (table?).
Is dit gedrag van Mozilla nu goed of doen IE/Opera het fout?
En waar kan ik dit precies vinden op de w3 site, want ik kan het echt niet vinden.

Over het probleem van gunp01nt, ipv het gebruik van visibility, misschien display:block display:none gebruiken en de eromheenliggende td op display:block zetten. Misschien dat er op zo'n manier een cross-browser (lees:OP7,IE6, Moz) oplossing is te bereiken.

nope, heb ik ook al geprobeerd. het probleem is dan dat de DIVjes niet meer absoluut gepositioneerd zijn, en dus wordt die menubalk fuxxored up.

[ Voor 5% gewijzigd door Not Pingu op 03-01-2003 15:39 ]

[Spruit_elf]

offtopic:
trouwens ligt het aan mij of zijn die menutjes klote om te gebruiken
want bij mij geeft ie ze pas bij mouseout oid dus ik moet eerst muis ervaf halen om te zien wat er staat das zeer irri


ownee ligt aan mij zijn idd wel goed alleen doen ze het niet allemaal

[ Voor 16% gewijzigd door Spruit_elf op 03-01-2003 15:35 ]

[Not Pingu]

mrcactus:
hehe, die menuutjes staan er nu nog maar bij om mee te klooien totdat ik ze goed krijg. pas als dat werkt ga ik ze goed neerzetten en dan komt er zelfs nog zinnige content op die site!


crisp:
great, jouw code werkt perfect... ik ben er ff mee aan het stoeien nu thanks

[Verwijderd]

Nou blij voor je dat je iets hebt dat wel werkt (hoewel dat wat je had ook zou moeten werken)

td's op display:block zetten is inderdaad niet zo'n slim idee van mij (hoewel ik het wel een keer stiekem heb gebruikt).

Ik heb ook nog geprobeerd om een div in die td te zetten om de rest van de menuconten heen (met position:relative als stijldeclaratie), de menudiv wordt dan wel op de goede plaats gezet - nl. net onder het menu - maar de td hoogte wordt in Mozilla opgerekt met de hoogte van de absoluut gepositioneerde menu-div.
Dat is volgens mij ook iets wat Mozilla niet zou moeten doen. Absoluut gepositioneerde elementen, kunnen (lees:zouden moeten kunnen) toch geen invloed hebben op enig ander element? (misschien met uitzondering van body)

Ik heb een bug gevonden die lijkt op het probleem:
http://bugzilla.mozilla.org/show_bug.cgi?id=63895
Affijn, het zal allemaal wel iets te maken hebben met die bug

[Not Pingu]

Actual Results: Overlayed div is positioned from viewport.

Expected Results: Overlayed div should be positioned from relative positioned
containing table.

het is dus idd een bug

zoals iemand bij die bug report al opmerkt, zou een tabel volgens de CSS2 specs gewoon een block element moeten zijn...