[HTML/CSS] Wrapper div verschuift 1px in IE6/XP

[Verwijderd]

Dit is ongetwijfeld wel vaker langs gekomen, ik heb gezocht, ik gebruik dus de verkeerde zoektermen. Mijn excuses hiervoor, maar ik moet even van dit probleem af.

Op de volgende pagina kun je zien wat het probleem is: http://www.mobdb.com/got/problemsite/

Met IE6 onder Windows XP krijg ik hier het volgende te zien:



Bij het resizen van je browservenster verspringt de "head" DIV om de pixel iets. Mozilla heeft dit niet, en IE6 onder Windows 2000 ook niet.

Pagina's die ik al had gevonden:

• http://www.positioniseverything.net/articles/common.html
• http://www.quirksmode.org/
• http://www.communitymx.co...ge=2&cid=E0989953B6F20B41
• http://www.positioniseverything.net/articles/box-model.html

Maar vooralsnog heb ik hier geen oplossing kunnen vinden

Zou iemand me hier mee verder kunnen helpen? Wil liever niet overwerken vanavond namelijk Mijn dank is groot!!

Edit: /me is koe, ff CSS toevoegen

code:

body { background: url(../gfx/bg_content.gif) repeat-y center #12567B; text-align: center; margin: 0; padding: 0; font-family: tahoma, arial, verdana, serif; }

/* font settings */
a { color: #ff6100; }
div,span,font { color: #1d1d1d; }
form,ul,ol,li { margin: 0; padding: 0; }
div { margin: 0; padding: 0; }

/* classes */
.right { float: right; }
.left { float: left; }

/* default structure */
#wrap { width: 760px; margin: 0px auto; padding: 0px auto; text-align: left; }
#head { background: lime; width: 760px; height: 120px; }

[ Voor 25% gewijzigd door Verwijderd op 30-12-2004 17:04 ]

[Verwijderd]

Oke, geen excuses meer.. kerst is voorbij, nieuwjaar is ook geweest (happy new year by the way) dus kom maar op met die antwoorden!

[Cubix]

Yay, jij hebt hetzelfde probleem gevonden als waar ik mee zit te worstelen. Het probleem zit in de themes van Windows XP. Kies maar eens Classic style (ala 2k) en het staat weer goed!

Wel erg raar dat IE een pagina anders opbouwt als er een anders windows thema is gekozen.

Helaas heb ik ook geen oplossing voor dit probleem. Ik heb ook nog nergens het probleem beschreven gezien.

[Zoefff]

Cubix schreef op maandag 03 januari 2005 @ 09:55:
Yay, jij hebt hetzelfde probleem gevonden als waar ik mee zit te worstelen. Het probleem zit in de themes van Windows XP. Kies maar eens Classic style (ala 2k) en het staat weer goed!

Wel erg raar dat IE een pagina anders opbouwt als er een anders windows thema is gekozen.

Helaas heb ik ook geen oplossing voor dit probleem. Ik heb ook nog nergens het probleem beschreven gezien.

Hier merk ik het met de Classic style ook hoor, dus ik denk niet dat het style-afhankelijk is.

Ik herken het probleem wel. Eenzelfde probleem heb ik bij mijn site in FF, bij het resizen komt er om de pixel een witte pixel tussen 2 plaatjes in de polluitslag.

Waarschijnlijk is dit gewoon een renderbugje, en ligt het niet aan je code. Misschien dat je de site op een andere manier kan opbouwen om van het probleem af te komen.

[Cubix]

Vreemd, ik heb het effect of 3 verschillende machines met WinXP gezien. Hier ziet de pagina van Syntaxis er prima uit met ie6 (geen sp2) zonder styles.

Het probleem gaat ook om de achtergrond die gecenterd wordt, die wijkt een pixel af van een div die gecenterd wordt.

[ Voor 29% gewijzigd door Cubix op 03-01-2005 10:09 ]

[Verwijderd]

Is er een workaround beschikbaar voor dit probleem of moet ik maar genoegen nemen met het feit dat mijn site een pixel verschuift? Eigenlijk wil ik gewoon dat 'ie eruit ziet zoals in het ontwerp van de ontwerper.. deze laatste komt namelijk straks bij mij zeuren waarom 'zijn' site een pixel verschuift..

[Cubix]

Bij mij hielp het om de achtergrond dan ook maar in een div te stoppen, en die te centreren, en niet de achtergrond zelf. (workaround dus)

[T-MOB]

Er is wel een workaround, en wss nog wel een makkelijkere oplossing. Volgens mij los je het probleem al op door je achtergrondplaatje ook 760px breed te maken (ipv 800). Het pixelprobleem lijkt mij een probleem met de afronding namelijk. Daarnaast kun je ook gewoon het achtergrondplaatje op je wrapper-div zetten en deze 100% hoog maken. Dit vereist wel gebruik van een IE-hack:

Cascading Stylesheet:

body { background: #12567B; text-align: center; margin: 0; padding: 0; font-family: tahoma, arial, verdana, serif; min-height: 100%; _height: 100%; /* underscore hack */ }

/* font settings */
a { color: #ff6100; }
div,span,font { color: #1d1d1d; }
form,ul,ol,li { margin: 0; padding: 0; }
div { margin: 0; padding: 0; }

/* classes */
.right { float: right; }
.left { float: left; }

/* default structure */
#wrap { width: 760px; background: #FFF url("../gfx/bg_content.gif") repeat-y center; margin: 0 auto; padding: 0 auto; text-align: left; min-height: 100%; _height: 100%; /* underscore hack */}
#head { background: lime; width: 760px; height: 120px; margin: 0; padding: 0; }

bovenstaande CSS is getest (IE6 op win98 had het probleem ook ) (T-MOB heeft een archaische PC op zijn stage ja)...

[ Voor 3% gewijzigd door T-MOB op 03-01-2005 10:50 ]

[Verwijderd]

vrienden van mij hebben dit probleem niet (link) maar als ik het probeer (link) dan loopt het ook fout onder IE... wel spijtig want dit zou goed van pas komen voor mijn nieuwe portfoliosite waaraan ik momenteel werk...

[T-MOB]

Verwijderd schreef op maandag 03 januari 2005 @ 11:16:
vrienden van mij hebben dit probleem niet (link) maar als ik het probeer (link) dan loopt het ook fout onder IE... wel spijtig want dit zou goed van pas komen voor mijn nieuwe portfoliosite waaraan ik momenteel werk...

Als jij je scherm een paart keer resized dan heb jij het ook (af en toe) niet... Het gaat mis met het afronden in IE. Als je een wrapper hebt van 760px en het zichtbare scherm is 781 pixels breed dan hou je aan beide kanten 10,5 pixel over. Dat betekent dat IE moet kiezen of de pagina op 10px van links of op 11px van links moet komen. Blijkbaar werkt de afronding voor achtergrondplaatjes anders (omhoog) dan die van blocklevel elementen (omlaag)
Edit: Als de breedte van het zichtbare scherm even is heb je er dus geen last van..

Nog een edit:
Een andere oplossing zou dan nog zijn om je wrapper op een andere manier te centreren. In plaats van margin: 0 auto gebruik je:

Cascading Stylesheet:

#wrapper {
 width: 600px;
 margin: 0 -300px; /* dus 0,5*width */
 position: relative;
 left: 50%;
}

Mocht dit dezelfde pixelbug geven dan gebruik je ipv left: 50%; right: 50%; Daarmee verander je de orientatie en zou de bug dus niet meer op moeten treden...

[ Voor 24% gewijzigd door T-MOB op 03-01-2005 11:38 ]

[IschaGast]

Ik had dit probleem ook een hele tijd, dan vooral tijdens wisselen van classic theme naar XP theme en het verschil kwam ook omdat de scrollbar in XP net een pixel breder is dan in de classic theme.

Daardoor rond hij het inderdaad anders af en krijg je net die pixel verschil.

[Verwijderd]

wow, heb geen idee over wat jij het hebt... hoeveel ik mijn venster ook resize, ik blijf met hetzelfde probleem zitten... ff screenshots:

FireFox:


InternetExplorer:


Ik werk met WinXP en IE V6.

[T-MOB]

Verwijderd schreef op maandag 03 januari 2005 @ 11:43:
wow, heb geen idee over wat jij het hebt... hoeveel ik mijn venster ook resize, ik blijf met hetzelfde probleem zitten... ff screenshots:

FireFox:
[afbeelding]

InternetExplorer:
[afbeelding]

Ik werk met WinXP en IE V6.

Uhmm, dit topic gaat over een pixel in de horizontale richting. Jij hebt last van pixels in de verticale richting. Dat is iets heel anders en heeft wss te maken met default margins van IE voor bepaalde elementen.

[Verwijderd]

k, zallet eens bezien...

btw uw title vermeld niets van horizontaal of vertikaal hé...