Hi guys and girls.

I'm hoping you web gurus out there can help with an HTML5/CSS3 issue.
Thanks in advance for sharing your expertise with this forum... what a wonderful resource. Now, back to my question:

How do I stop page elements such as headers, footers, side-panels and columns, etc, from being pushed out of place whenever I try to zoom-in to enlarge text and other details in the browser window?

What I have tried so far:
* have employed media queries to adapt the screen-size whenever a user clicks & drags the browser frame to size up or down. This works OK when using the click-and -drag method.
* have set the main page container [or wrapper] to {position: absolute} in css3.

In Summary:
This method seems to work fine for screen re-sizing but when I use the "Ctrl +" or "Ctrl -" keys to zoom in or out to magnify or reduce text, as users are sometimes inclined to do, my page falls to pieces, shoving elements and divs out of alignment!

I have attached a file showing the relevant pieces of code, as far as I can tell at the moment.

Does anyone have any suggestions on how I can fix this problem?

Adrian McG
[Shaedandu]


PS: I'm adding the code here in case anyone is not comfortable with opening attachments:
_________________________________________________________________________
HTML5:
<!-- Default stylesheet for the page (with auto-adjusting screen-sizes for various devices) -->
<link rel="stylesheet" type="text/css" href="css/defaultStyle.css"
<link rel="stylesheet" media="screen and (min-device-width: 1280px)
and (max-device-width: 1920px)"href="desktopStyle.css">
<link rel="stylesheet" media="screen and (min-device-width: 1060px)
and (max-device-width: 1280px)" href="laptopStyle.css">
<link rel="stylesheet" media="screen and (min-device-width: 760px)
and (max-device-width: 1060px)" href="iPadStyle.css">

<!-- In body element... -->
<div class="masterContainer">
<!-- wraps around all other divs and classes -->
</div>

CSS3:
<!--Center aligns the entire page in the browser window, both horizontally & vertically-->
.masterContainer{
width: 1060px;
height: 696px;
margin: auto;
position: absolute;
top: 0; bottom: 0; /* Zero px for top and bottom aligns vertically */
left: 0; right: 0; /* Aligns horizontally */
max-width: 100%; /* Maximum of 100% prevents Div from overflowing main window */
max-height: 100%; /* 100% allows enough overflow to stop the divs from
breaking up on a small screen */
overflow:auto;

If you could share a link (URL) to your page, it would be so much easier to see/understand what's going on.

Hello "mingas.com",

Thank you for your quick response. I'm a bit slow replying because it was bedtime in my neck of the woods.
I am providing some links here, as requested:

Link1: http://www.amac-websolutions.com - my home page [still under construction]

Link2: http://sdrv.ms/1c7T0Kp - full copies of my html5/css3 code [at SkyDrive]

I hope this helps... see what happens when you press the "Ctrl +" / "Ctrl -" keys, and also try resizing the browser window and let me know what you think. Thanks for taking the time to check this out for me.

Adrian McG
[Shaedandu]

Hi Shaedandu,

I don't see the zooming issue that you are describing. For me, the page just zooms in and out monolithically as a unit, BUT:
Your style sheet files are not found since your markup indicates that they are in the root directory, while they are actually located in the css/ subdirectory:
You need to change href="iPadStyle.css" to href="css/iPadStyle.css", and similar for other style sheet references.

The W3C HTML validator identifies a number of other issues with your markup:

http://validator.w3.org/check?uri=http% … mp;group=0

Also, the CSS validator:

http://jigsaw.w3.org/css-validator/vali … mp;lang=en

A couple of other points:
1. If you want the page to be centered, you'll need to remove the absolute positioning of the 'Container'.
2. The iframe will not re-size since it's defined by a fixed size in pixels.

I hope this helps as a starting point.

Hi "mingas.com",

Thanks for the feedback. Correcting the directory path to my stylesheets fixed quite a few problems. This was a silly oversight on my behalf, but I am on a learning curve here.

I'll keep working on the remaining issues identified by the HTML validators you referred me to.

Thanks,

Adrian McG
[Shaedandu]