Lets start over- was: Hacking your (sticks464) centering hac

lprag · Joined: 24 Oct 2009 Posts: 4

Hello sticks464,

Let me explain again what I am trying to do, as your answers in the previous thread do not address the issue.

The problem is simple:

Designing an all em based page that when using the + zoom keys, will continue zooming while keeping the content perfectly proportioned and perfectly centered on the screen, even if one zooms to the point that the content extends past the left and right margin on the screen.

IE will do this.

Firefox, Safari, Opera, and Chrome will not.

They will only keep the zoom perfectly centered on the page until the point that the content passes the left and right margin on the screen. They then shift the page all the way left and continue zooming from that point.

That is what I am trying to solve, partially because it is very annoying and also, when displaying a page of images, I want to keep the images centered no matter what the + zoom is.

The below simple code illustrates the problem.

Load it on a html page and try the various browsers, using their + zoom keys to force the text to extend past the screen width margins.

As soon as the content reaches the screen width margins, the content will move left in all browsers except IE, instead of staying centered.

Why and what's the hack?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>centering problem</title>

<style type="text/css">

</style>

</head>

<body>
<div id="container">
<div id="content">

<p>Velit esse cillum dolore eu fugiat nulla pariatur. Ut aliquip ex ea commodo consequat. Ut labore et dolore magna aliqua. Consectetur adipisicing elit, lorem ipsum dolor sit amet, in reprehenderit in voluptate.</p>
<p>Mollit anim id est laborum. Quis nostrud exercitation ut aliquip ex ea commodo consequat. Ut labore et dolore magna aliqua. Velit esse cillum dolore lorem ipsum dolor sit amet, in reprehenderit in voluptate.</p>
<p>Cupidatat non proident, eu fugiat nulla pariatur. Qui officia deserunt. Ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, duis aute irure dolor in reprehenderit in voluptate.</p>
<p>Eu fugiat nulla pariatur. Ut labore et dolore magna aliqua. Quis nostrud exercitation lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt in culpa excepteur sint occaecat ullamco laboris nisi.</p>
<p>Quis nostrud exercitation cupidatat non proident, sed do eiusmod tempor incididunt. Ut enim ad minim veniam, mollit anim id est laborum. Quis nostrud exercitation lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt.</p>
<p>In reprehenderit in voluptate excepteur sint occaecat ullamco laboris nisi. Duis aute irure dolor eu fugiat nulla pariatur. Cupidatat non proident, consectetur adipisicing elit, excepteur sint occaecat.</p>
<p>Ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, sunt in culpa mollit anim id est laborum. Sed do eiusmod tempor incididunt ullamco laboris nisi consectetur adipisicing elit. Eu fugiat nulla pariatur.</p>
<p>Ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, velit esse cillum dolore duis aute irure dolor. Ullamco laboris nisi cupidatat non proident, in reprehenderit in voluptate. Qui officia deserunt sed do eiusmod tempor incididunt ut enim ad minim veniam.</p>
<p>Duis aute irure dolor ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, excepteur sint occaecat in reprehenderit in voluptate. Sed do eiusmod tempor incididunt cupidatat non proident, sunt in culpa. Duis aute irure dolor velit esse cillum dolore ut aliquip ex ea commodo consequat. Cupidatat non proident, ut enim ad minim veniam, consectetur adipisicing elit.</p>
<p>In reprehenderit in voluptate duis aute irure dolor excepteur sint occaecat. Sed do eiusmod tempor incididunt ullamco laboris nisi ut aliquip ex ea commodo consequat. Velit esse cillum dolore lorem ipsum dolor sit amet, in reprehenderit in voluptate. Sed do eiusmod tempor incididunt consectetur adipisicing elit. Sed do eiusmod tempor incididunt excepteur sint occaecat cupidatat non proident.Ut aliquip ex ea commodo consequat. Duis aute irure dolor sed do eiusmod tempor incididunt ut enim ad minim veniam. Cupidatat non proident, velit esse cillum dolore quis nostrud exercitation. Lorem ipsum dolor sit amet, excepteur sint occaecat ut aliquip ex ea commodo consequat. Sed do eiusmod tempor incididunt cupidatat non proident, mollit anim id est laborum.</p>
<p>Qui officia deserunt sunt in culpa quis nostrud exercitation. Ullamco laboris nisi. Consectetur adipisicing elit, ut enim ad minim veniam, excepteur sint occaecat. In reprehenderit in voluptate velit esse cillum dolore qui officia deserunt.</p>
<p>Ut aliquip ex ea commodo consequat. Sed do eiusmod tempor incididunt sunt in culpa eu fugiat nulla pariatur. Ullamco laboris nisi cupidatat non proident, ut enim ad minim veniam. Qui officia deserunt sed do eiusmod tempor incididunt in reprehenderit in voluptate. Velit esse cillum dolore.</p>
<p>Sed do eiusmod tempor incididunt consectetur adipisicing elit, duis aute irure dolor. Excepteur sint occaecat quis nostrud exercitation qui officia deserunt. Ut labore et dolore magna aliqua. Eu fugiat nulla pariatur.</p>
<p>Ullamco laboris nisi lorem ipsum dolor sit amet, duis aute irure dolor. Excepteur sint occaecat cupidatat non proident, sed do eiusmod tempor incididunt. Eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt quis nostrud exercitation excepteur sint occaecat.</p>

</div></div>
</body>
</html>

sticks464 · Joined: 31 Dec 2006 Posts: 2311

This is the issue I was addressing.

lprag · Joined: 24 Oct 2009 Posts: 4

Yes, your hack if applied to the whole body, will keep all browsers centered while zooming but at the same time, your hack creates the problem with using the horizontal scroll bar to scroll left if it is applied to the whole body, rather than just applied to a div with unequal width blocks for which the hack was designed.

One would think that such a basic problem of zoom centering could be solved,
as IE somehow has solved it, whereas the other browsers have not.

If there is no css workaround, maybe there is a way with java.

I'll try the dynamic drive java forum and see what happens.

Thanks for your help.