Jump to content


Photo

Weird Quirk


  • Please log in to reply
3 replies to this topic

#1 dustinnoe

dustinnoe
  • Members
  • PipPipPip
  • Advanced Member
  • 187 posts
  • LocationWarner Robins, GA

Posted 22 October 2006 - 12:26 PM

I have a CSS layout which has a centered backgroung image that gives the illusion that the page column extends to the bottom of the browser.  I also have a centered DIV  that hold the contents of the entire page.  For some reason, both FF and IE, interperet the center of these two page elements differently depending on the width of the browser window.  You can check it out at:

http://www.virtuosoweb.com/cr/

As you are viewing the page, slowly expand the window and watch as the center of these elements change by 1 pixel.  It's really annoying

Thanks,
Dustin

#2 ToonMariner

ToonMariner
  • Members
  • PipPipPip
  • Advanced Member
  • 3,342 posts
  • LocationNewcastle upon Tyne, UK

Posted 22 October 2006 - 11:56 PM

try giving contentWrapper a margin of 5px and removing the padding.
follow me on twitter @PHPsycho

#3 dustinnoe

dustinnoe
  • Members
  • PipPipPip
  • Advanced Member
  • 187 posts
  • LocationWarner Robins, GA

Posted 23 October 2006 - 01:20 AM

I do not think that will affect the page considering that contentWrapper is contained in pageWrapper.  The problem lies in how a web browser determines the center of the page and why it centers a background image differently than a div element. 

#4 dustinnoe

dustinnoe
  • Members
  • PipPipPip
  • Advanced Member
  • 187 posts
  • LocationWarner Robins, GA

Posted 23 October 2006 - 01:37 AM

The problem occurs when the width of the browser is an even number of pixels due to the fact that the width of the background and pageWrapper div are an odd number of pixels wide.  When the brower is an odd number of pixels wide there is no problem.  This means when the browser is an even number of pixels wide there are two pixels that share the center.  For some odd reason, and I stress odd, the brower says, " I will choose the left center pixel to align the div element and the right center pixel to align the background image." Why would Mozilla and Microsoft design browers that do annoying crap like this!  They have to know about it.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users