[CSS] Scrollbar icm image (IE prob) - Softwareontwikkeling

woensdag 17 december 2003 13:57

Acties:

.:.H.:.I.:.P.:.

Topicstarter

Menschen,

Ik gebruik het volgende stukje CSS om een visual in een divje tegen de rechterkant te kwakken.

code:

div#bodyvisual {
    position: absolute;
    right: 0px;
    top: 26px;
    z-index: auto;
}

Nu heeft IE 6.02 de nare gewoonte dat wanneer er een scrollbar nodig is deze over de laatste x pixels van het plaatje te plempen. Ipv het plaatje tegen de scrollbar aan te positioneren.

Ik loop er al een tijdje mee te frunnikken maar omdat Opera en NS het wel gewoon goed doen. Dus kijken of er al dan niet een scrollbar is en daar zetten ze de visual tegenaan. Is er wat op te verzinnen dat het ook in IE werkt?

My Fizion | My 3D prints | LinkedIn

woensdag 17 december 2003 14:04

Acties:

Verwijderd

float:right;?

body{
overflow-y:auto;
}

?

woensdag 17 december 2003 14:17

Acties:

crisp

Devver

Pixelated

op de body gaat het goed, maar in een div met overflow inderdaad niet. Heeft denk ik te maken met de onhebbelijkheid van IE om scrollbars altijd in de box te renderen. Je kan het oplossen met een extra container div met width 100%:

HTML:

<html>
<head>
<title>div</title>
<style type="text/css">

#divje {
  width:400px;
  height:200px;
  border:1px solid blue;
  overflow:auto;
}
#container {
  position:relative;
  width:100%;
}
#bodyvisual {
  position:absolute;
  right:0px;
  top:26px;
  width:100px;
  height:100px;
  border:1px solid red;
}

</style>
</head>
<body>
<div id="divje"><div id="container">
<div id="bodyvisual">hoi</div>
content<br /><br />
content<br /><br />
content<br /><br />
content<br /><br />
content<br /><br />
content<br /><br />
content<br /><br />
content<br /><br />
content<br /><br />
content<br /><br />
content<br /><br />
</div></div>
</body>
</html>

Intentionally left blank

woensdag 17 december 2003 14:45

Acties:

OzBoz

.:.H.:.I.:.P.:.

Topicstarter

Thanks! De extra div#container did the trick. Ik had alleen geen alles omvattende div bij mijn pagina, maar de body een overflow: auto meegeven hielp.

Super!

p.s. float: right had ik ook geprobeerd maar dan reserveerde ie de ruimte voor een eventuele scrollbar aan de rechterkant.

My Fizion | My 3D prints | LinkedIn

woensdag 17 december 2003 14:53

Acties:

OzBoz

.:.H.:.I.:.P.:.

Topicstarter

Ik kom er nog even op terug

crisp, je oplossing werkte goed voor IE, maar nu zie ik geen content meer in Opera en NS. Weet je heel toevallig waar dat mee te maken kan hebben? Er verschijnt wel netjes een scrollbar als hij nodig is maar de content is niet meer te zien. Zal vast met de container-div te maken hebben.

edit:
Haal ik overflow: auto weg voor de body dan zie ik mijn content weer.. alleen krijg ik dan weer het probleem dat hij net als float in IE pixels reserveert voor scrollbar.

edit2:
Opgelost. overflow: auto; weggehaald bij body en vervangen door

code:

1 2	overflow-y: auto; overflow-x: hidden;

Dat werkt in NS/Opera/IE6 nu goed.

[ Voor 38% gewijzigd door OzBoz op 17-12-2003 14:57 ]

My Fizion | My 3D prints | LinkedIn

woensdag 17 december 2003 15:16

Acties:

Verwijderd

edit:
Haal ik overflow: auto weg voor de body dan zie ik mijn content weer.. alleen krijg ik dan weer het probleem dat hij net als float in IE pixels reserveert voor scrollbar.

overflow:auto; zou technisch gezien moeten werken. Gaat van BODY element naar Viewport met het mime-type text/html, alleen had Mozilla daar een probleempje mee de laaste paar builds (icm position:absolute;) wordt ergens opgelost in 1.7a geloof ik.

woensdag 17 december 2003 15:41

Acties:

Verwijderd

Volgens mij is dat deze

http://bugzilla.mozilla.org/show_bug.cgi?id=170011

woensdag 17 december 2003 17:27

Acties:

OzBoz

.:.H.:.I.:.P.:.

Topicstarter

Verwijderd schreef op 17 december 2003 @ 15:16:
[...]
overflow:auto; zou technisch gezien moeten werken. Gaat van BODY element naar Viewport met het mime-type text/html, alleen had Mozilla daar een probleempje mee de laaste paar builds (icm position:absolute;) wordt ergens opgelost in 1.7a geloof ik.

Bedankt voor de verklaring, interessante site heb je trouwens.

My Fizion | My 3D prints | LinkedIn

Pagina: 1

Reageer