Menu
When I zoom in and out on my webpage in Google Chrome, items that are precisely positioned in relation to one another will change position. This causes many problems: For example, at specific zoom levels a div will overlap its containing div just enough to hide a border. Similarly, sometimes a 100% marker will not precisely line up with the 100% point.
Is there any way I can ensure that the positioning of the items in relation to each other will not change when the page is zoomed in or out?
651
To fix the problem with zooming in, try adding the min-width attribute to your outer countainer ( #container or #navbar ?). Setting min-width prevents the webpage from trying to shrink down beyond the specified width (i.e. 300px).
The reason that it's broken the layout like that is because you're using percentages so that means when you're changing the zoom level the widths are being altered to fit the new size of the page which is what is meant to happen.
CSS zoom works based on attribute value provided to the zoom attribute. If we pass zoom attribute value as normal then size becomes 100%. If we pass zoom attribute value as reset then it will reset back to original size from user custom values like 120%, 70%, 150%, etc.
You can use em positioning which will reposition and size based on the font size. So when people do like control + or command + then the page will auto resize. Here is a page about elastic layouts. Hope this helps.
http://v1.jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css
115
In my experience, using a left: px value and a top: px value compared to left/bottom right/bottom or right/top seems to do the trick. This applies to both Chrome and FF, can't comment on IE.
For example:
#my-element
{
list-style-type: none;
position: fixed;
left: 54px;
top: 40px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
