Recently we've had some customers complain about our website positioning being messed up and we've since found out that this problem only occurs when their browser is zoomed out to around the 75% mark. Most of our customers do not realise that their browsers are set to zoomed out mode, and we have been told to fix the problem so positioning is consistent regardless of the zoom level.
I have tried resizing elements using em and also tried in % but the positioning still messes up.
Here is a link to the website:
http://www.comms-express.com
The issue occurs on all pages - the 'Need Assistance' box at the top right of the page falls off at 75% zoom, and the main boxes on product pages do not fit in the container at 75% zoom.
Could anyone give me some pointers? I'm looking for some kind of CSS media query which would allow me to change CSS rules on specific zoom levels.
Thanks!
This seems to mainly be effecting your .product elements, change their width from its current setting of 190.5px; to 23% so they scale proportionately.
.product {
width: 23%;
}
This is likely more of a quick fix than anything else, but should solve the position issue until a more permanent solution is found.
I managed to solve this problem by modifying widths of elements to use percentages instead of pixels, and by re-tweaking how elements were spaced. Instead of using a margin, I placed a smaller inner container and gave this a padding which generally resolved most problems.
Related
I have a really weird issue thats seen in Safari and Chrome. Somehow it works just fine in Firefox.
Look at this URL in one of the above browsers: https://musik.dk/therollingstones/videoer
If you scroll down, you'll notice a videothumb that floats very different than the rest. The "sinner" is the video starting with the name "Arrive in Japan" thats just a single pixel height than the rest.
I've looked into the inspector, but everything is exact as heigh and wide as all others (its the same template) and the image is 100% the same height and width. It could be a render issue, but its the same video all the time.
Can anyone figure that out?
Screenshot:
The floated article in question is "snagging" on the article to the left above it, which is slightly taller than the others. That's the problem with floating.
My advice would be to remove all of the float: left; declarations (there are two for desktop and various instances within media queries as well) and use display: inline-block instead, perhaps with a reduced right margin of, say, 0.5% (although these get a bit inaccurate).
Instead of right margins, you could apply text-align: justify to the container of all those articles. That will only mess up the last row if there aren't 4 articles, but that's fixable, too.
Or you could use flexbox, which is the modern way to do this, though not fully supported across the board yet.
The reason is due to that video having japanese characters in the name. For whatever reason, they render slightly larger, making the .ellipsis box 1px larger.
As mentioned by ralph.m I would make then display:inline-block; and remove the float, then set margin-right: 23.8%;
I have simple page using a two-column page layout that breaks on zooming. Here it is - try zooming in with cmd+:
http://jamesabbottdd.com/ems-with-max-width.html
The header breaks on the right side, causing a horizontal scrollbar to appear. Originally I thought this was due to using pixels for sizing elements and setting max-width. This article is about that very problem:
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
Then I overrode pixels with ems but the problem persists.
This intrigues me to no end. I’ve been using CSS for about a decade now, the last 3 years on a high level, but haven’t yet figured out why the above page breaks but this one:
http://framelessgrid.com/
does not, regardless of how closely I zoom in.
Any help greatly appreciated.
Hmmm, it looks a bit like you've inadvertently linked together two slightly unrelated observations, making it a bit more difficult to diagnose the actual problem.
Separating the Symptoms
Based on your screenshot, it does appear that your header is coming up with some visual glitches. Additionally, a horizontal scrollbar appears - but rest assured that this is not due to any property of your header. In fact, it is due to your wrapper div below the header, which has a width of 1130px. So when you zoom in that much, it can't all show on the screen, and thus creates the scrollbar.
The True Issue
Returning to the problem with your header though, the reason why the colour is disappearing is because your header div has a width of 100%. If, when you took that screenshot, you were scrolled all the way to the left, you would have seen no problem with the header's background colour, because it would have covered 100% of the browser's width. (If you're wondering where this width of 100% came from, it's due to the h1 element inside the header; an h1 generally has a default width of 100%, a style you wouldn't be able to see even with an element inspector like Firebug open.)
Note that the site you provided does not display this issue due to a few things: first, its header doesn't have a background colour, so you wouldn't see any kind of issue in that respect (if it did have one though, you'd immediately see that the div doesn't actually span the whole screen as yours does; it is only a little wider than the text within, and has a fixed width. The title is centred not through only usage of the h1 element's width of 100% and text-align:center, but is also due to the margin:0 auto applied to the header div. But now, how to fix your issue?
A Solution
With the current structure of your page, the easiest solution would be to give your header div a defined width. Well, not a width per se, but rather a min-width, one which is identical to the width of your wrapper div. If you give it the style of min-width:1130px, you should see your problem solved.
I hope this was helpful! (Sorry if it was a little long to read, though.)
For example, if I make a block of four images that are absolutely positioned with 50% width and 50% height, the result in Internet Explorer looks like this:
http://img716.imageshack.us/img716/8376/96774641.png
The images are placed right next to each-other, as would be expected.
But the same code in Chrome produces this:
http://img560.imageshack.us/img560/7976/chrome.png
The images are shrunken slightely to make room for the spacing in-between.
My styles already include:
border-style: none;
border-width: 0;
padding: 0;
margin: 0;
... so why is Chrome spacing my images apart from each-other, and how can I fix it without altering the display for other browsers that render correctly in the first place?
EDIT: <link removed>
Be aware that the actual page is much more complicated, with over 1,000 <img> elements.
It will load slowly in any browser that is not hardware accelerated.
I have confirmed that FireFox renders it identically to IE8, with the images next to each-other as they should be.
This could be a rounding issue: A width of 50% may well end up as 223.5px for example.
Seeing as you're using images with a fixed size, why not specify the positions in pixels as well?
Are you using a CSS reset? Browser default styles can cause irritating problems like paragraphs with differnt top margin heights or other quirks of layout. This particular case may not be fixed with a CSS reset, but it would eliminate the possibility.
Sadly, the CSS3 option to set a background image scale is not yet available in any reliable way, or you could set the image as a repeating background image scaled to 50%, which of course would have no gaps. That won't be an optin for quite some time, most likely.
Have you tried using the Inspector (right-click on the image, select Inspect element) to trace where that spacing is coming from?
I've got three columns inside of a div that is the full page width. The two on either side are 25% width and the one in the center is 50% width. This layout is working fine except in IE6 where at certain page widths it bumps the right column to the next line. Is there a fix for this? Maybe an alternate way to layout a page like this?
Edit: I'm using a cross browser inline-block hack that works great in FF, IE, S, Chrome. I'm pretty sure this quirk has to do with the way IE calculates widths on fluid content, and happens due to miscalculation (rounding maybe?). I've put up an example here. Try slowly adjusting the window width in IE6 (maybe later versions too) and watch as the green DIV gets bumped down at certain widths.
Thanks,
Brendan
It's a rounding problem in IE6's box model. Generally, you can't have a combination equal 100%. Try making your values sum to 99% of total width, and it should work fine. This solution has always worked for me.
It sounds like a piece of content in that column might have a defined width which is more than what the 25% of page width it is given. Can you provide CSS examples?
EDIT: IE6 does not support inline-block which could also be the issue.
EDIT 2: I looked at it on a 1680x1050 screen in IE6 in a virtual machine. When I drag the width slowly over time from about 800px to 1600px, it randomly moves the right column around. I suspect it's an issue with the hack that you're trying to use. Your code is so simple that I think you should consider researching an alternate hack instead. I've also never seen the *<property>: <value> hack. What's the * do, all compliant browsers?
When I resize window and when vertical scrollbar appears, if I scroll it way to the bottom, - the bottom breaks. I dont understand why, but I think it has something to do with the way how page uses 100% height. Any help would be appreciated!
Here's the page: zxsdesign.com/main1.html
Here's a screenshot
zxsdesign.com/bug1.PNG http://zxsdesign.com/bug1.PNG
It's a mix of you using the CSS height property and absolute positioning. ajm has talked about using min-height - ideally, you should be using it instead of height when you make things 100% high.
Onto your other problem. When you position elements absolutely, they're no longer part of the page structure. Instead, they live in a separate plane, and so do not affect the page dimensions. When your <div id="flashcontent"> runs past the window boundary, it doesn't affect <body>'s borders.
You can fix this by not using position: absolute. There's no real need to. Instead, you can position the #flashcontent element normally, and get rid of the #bg element completely - just give #flashcontent a background instead. Then use margin: 0 auto; and padding-top: 179px; to position it in the correct place.
Unfortunately height: 100%; is implemented differently... You can not be sure that a browser does what you want when you use it.
Try to use clear: left; or clear: both; in your style.
100% height is one screen height. If you scroll up, it does cover 100% of the height. Make your blocks scale too, or at least move to the center of the screen. You can do this by setting their top and bottom padding to auto.
Also, your head tag isn't closed properly. Check this
Your page is based entirely on using 100% height for all of your Elements. If the user's browser viewport is big enough, that's fine; however, if they resize their browser to be small enough, your page will be 100% of that smaller height and things will drop out of the bottom.
Look into setting a min-height on one of your container Elements. That will force things to stop resizing if the browser window falls below that height. Or, you can set a plain old height big enough to contain your flash piece on one of your container items and let the others inherit from that.
And, since IE6 doesn't support min-height (FF2+, IE7, Safari all do), you'll need to hack it in like so.