If you go to the "Variable Grid System" generator
and have:
column width = 20
number of columns = 12
and gutter width = 60
...the system provides a content width
of 900 and a full width of 960.
http://www.spry-soft.com/grids/
Now, this is all fine and dandy in Firefox, Chrome,
and even IE6, but when you load those settings in IE8,
you end up with the actual full width as 1000px,
not 960px.
Has this issue been encountered before?
As stated in the comments: my problem was the result of having IE's ZOOM level at 125%. At what point I had changed that, I don't know. But re-setting the zoom level to 100% eliminated the issue.
Related
I am trying to convert a poorly designed template to a responsive design, found here:http://www.crhinc.com/about-mobile.html
Im having an issue where on desktop browser sized to mobile the template looks and works great, but on android and iphone, the page is larger than the viewport. i know i must be missing something, but as you can see, i have outlined the elements just to get try and see if i can find out whats in there that is stretching it outside the viewport and cause mobile phones to scroll from side to side but not desktop browsers.
i set the body up for 300px width just to see if i could find the rogue element, but put it back because it did not work. there are a few tables in the content, but all set to 100% width.
for some reason, it almost looks like the width in the desktop and on mobiles or not actually the same.
Jeff
Do you actually think it is the viewport? Do you have the viewport set with the right content?
Maybe this link could help.
Or is it just the CSS? In that case I would recommand you searching for width and such. Trying to find big numbers..
Setting a specified width should be for specified screen sizes. Otherwise make it max-width.
In IOS7 (Safari) we are seeing an issue where the iframe will not accept a lower width/height. For example, on an orientation change event the new width maybe say 600 vs 320. While it will resize to 600, going back to portrait mode, the width will remain at 600 instead of resetting back to 320. We have confirmed the values are being set correctly within the attributes of the iframe, but the css values are remaining at the previous larger values. We've tried clearing the style attribute altogether, resetting the dimensions to 0 directly before setting the new values, etc. Nothing seems to take affect. I'm leaning toward believing this is a safari bug. Has anyone else experienced this? All of the other posts that are similar all seem to be reporting scrolling issues and not resizing issues.
IOS will show all visible content, so you can't hide the overflow of an iframe. Is your content wider than the iframe? I have a feeling it might be
Are there any wildy used browsers that doesn't support width 1000px plus right scroll?
NOTE: With "support" I mean "if it will support 1000px width without creating a horizontal scroll in the bottom" (sorry for not explaining this in the beginning)
What about IE7 for example?
I don't want to get the bottom scroll...
I know it might look bad on some 1024 screens if there is no space on the side.
I am adding an example so you better will understand:
The reason for asking is beceause I don't want to get a horizontal scroll on my website in widly used browsers. I don't have any old IE version installed, so I cant test it myself.
Note that the 3000px height div will cause a vertical scroll to the right... So the "browser window width" have to be at least 1000px in width for it to work (1024 minus right scroll (minus left border))
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
</head>
<body style="margin:0">
<div style="width:1000px;height:3000px">Will this div creat a horizontal scroll bar in any widly used browser, with window size of 1024 x 768px <? What about Internet Explorer 7 and Internet Explorer 8?</div>
</body>
</html>
They all do, it's more of a matter of which monitors users have. Most sites use 960px-wide, mainly because it works well with 1024-wide monitors, and it is divisible by many factors, making it east to have balanced multi-column layouts.
You can safely go up to about 980px.
I think 960 pixels is the widely accepted standard for website layouts, but 980 is also common. 1000 may be a few pixels too many.
In fact doesnt matter which browser you are using, but the screen resolution and the size of the browser window.
At 1024x768 resolution, with width = 980px (and no side padding) it will not create scrollbar
All browsers support whatever width you want.
What you really care about is screen resolution and the actual viewport width of the current browser window. For example, my 2 screens gives me an effective screen width of 1920+1920=3840 pixels, but I never maximize my browser so the viewport is more like 800 pixels wide.
(I hate 960px grids)
See the article Responsive Web Design for discussion of making a truly width-adaptive layout.
The answer doesn't change with your update to the question. The answer is still:
All browsers support whatever width you want.
If you have enough screen space available to make a browser window wide enough, it will display any width page without scrollbars.
What about IE7 for example?
Since I can stretch my IE 7 window (or IE 8 or 9) to be 3000px wide, IE 7 will display a 1000px wide page without a horizontal scrollbar. Therefore, IE 7 "supports" a width of 1000px without a scrollbar. In that sense, All browsers support whatever width you want.
I read in w3school - font-size property that the difference between using em and px is that when using px IE doesn't support resizing but em does.
I am working on IE7 and it works fine with px and re-size the text when zooming the page.
can any one explain this to me ?
px can be resized in IE as well. em is a relativ size to the inherited size by it's parent element and actually has the same meaning as %.
I don't think you can take any advantage by using em instead of px.
I believe old versions of Internet Explorer have this problem, but new versions fixed it. By the way, W3Schools is often considered a bad resource.
From memory, IE7 will scale / zoom the whole page, but if you select "Page/Text Size" from the menu to change the text size, that is when px or other absolute units are not scaled whereas relative units (eg: em's) are.
I expect you are doing a zoom rather than a Page/Text Size?
Specifically, how do I predict/calculate the effect any of the browsers' zoom will have, for example, on width:950px? Are there any tools I can use to determine the new widths?
edit:
If I have a 950px div that is visually rendered 875px in, say, chrome, I could say chrome reduces fixed widths by approx. 92.1% after one crtl-. (950*.921= approx .875).
Try Firebug
Its an excellent plugin for Firefox, which lets you view variety of parameters.
You could play around with it and it would probably solve your problem.