[CSS] IE resize bug bij hor/vert. centreren*

[Pantalaimon]

Ik heb een pagina die horizontaal en verticaal gecentreerd staat in het browservenster. Daarin heb ik een DIV waarin alle content komt. Hierin wil ik een tweede DIV kunnen gebruiken die ik met position:absolute een plek kan aanwijzen binnen de parent DIV- de parent DIV heb ik hierom position:relative meegegeven.

Hiermee werkt alles zoals ik wil; het absoluut gepositioneerde DIVje laat ie op de juiste plek zien als die opgevraagd wordt, zowel in firefox als IE.

MAAR, het gaat in IE wél fout als ik het browservenster resize. Omdat de gehele site in het midden gepositioneerd wordt verschuift de content dus ook mee bij het resizen. Het probleem met de relative DIV is dat deze in IE wel horizontaal mee verschuift, maar niet verticaal! en komt dus buiten de layout te staan... Binnen firefox gaat het wel zoals het hoort.

Een voorbeeld zegt meer dan 1000 woorden: *klik*

Iemand enig idee hoe ik zoiets op kan lossen?

-edit: titel hoort te zijn [HTML/CSS] position:relative IE bug, kan een mod dat ff fixen?

[ Voor 7% gewijzigd door Pantalaimon op 22-06-2006 15:01 ]

[BtM909]

Ik zie het probleem hier niet zo met FF en IE6. Kan je eventueel wat printscreens posten welke je probleem aanduiden?

[Pantalaimon]

BtM909 schreef op donderdag 22 juni 2006 @ 13:08:
Ik zie het probleem hier niet zo met FF en IE6. Kan je eventueel wat printscreens posten welke je probleem aanduiden?

Klopt, had een aantal dingen gewijzigd ondertussen waardoor het in 1 geval wel goed ging, maar bij andere voorwaarden alsnog fout ging.

Anyways: dit is dus het probleem in IE: *klik*
Bij resizen van het venster wordt de content niet vertikaal mee gealigned. Als je naar beneden scrollt zie je een [ mouseover ] staan en zie je wat ik bedoel met het plaatsen van de absolute div.


In de source zie je 2 divs staan: <div class="box"><div class="content"> tekst </div></div>

waarvan dit de css is:

Cascading Stylesheet:

.box
  {  position:relative; 
     border: 1px #FF8000 solid;
  }

.content
  {  width : 486px;
     height : 257px;
     text-align : left;
     overflow : auto;
  }

en de absolute DIV die geplaatst wordt bij mouseover:

Cascading Stylesheet:

#infodiv
  {  position:absolute;
     width: 290px;
     left: 120px;
     bottom: 2px;
     visibility:hidden;
     text-align: left;
     padding: 4px 4px 4px 4px;
     border: 1px #909090 solid;
     background-color: #303030; 
  }

Als ik de "content" div relative maak en de "box" div weglaat, dan wordt de absolute div niet op de juiste plek gezet binnen firefox (hij ziet "bottom" vanaf de hoogte van de "content"-DIV, dus 257px, en niet als de hoogte van de gehele inhoud van de div, wat altijd varieert), en gaat het in IE wél goed (mits ik de "content" div ook een bottom: 0px; meegeef, anders krijg ik alsnog het resize probleem)

Als ik de relative "box" div eromheen zet, dan zet ie 'm in zowel firefox als IE goed weg, alleen krijg ik het resize probleem in IE.

[ Voor 14% gewijzigd door Pantalaimon op 22-06-2006 15:00 ]

[Pantalaimon]

Ik heb het denk ik opgelost!!

Gebruik makend van conditional comments die IE ondersteunt, dus ben ik op het idee gekomen om daarmee bepaalde css classes te overriden.

Bij IE ging het goed als ik de volgende css gebruikte:

code:

.content
  {  position: relative; bottom: 0px;
     width: 486;
     height: 257px;
     text-align: left;
     overflow: auto;
  }

en geen enclosing <div class="box">

In firefox ging het met deze css goed:

code:

.box
  {  position: relative;
  }

.content
  {  width: 486px;
     height: 257px;
     text-align: left;
     overflow: auto;
  }

incl. dus een enclosing <div class="box">

Nu heb ik in de HTML template de volgende conditional comment in de head gezet:

code:

<!--[if IE]>
<style type="text/css">
.box { position: static; }
.content { position: relative; bottom: 0px; }
</style>
<![endif]-->

Zo te zien doet ie het nu in Firefox én IE goed!