Forum Moderators: not2easy
When content overflows the viewport and scrollbars are created, mozilla seems to mess up the display, while IE has no problem. I've done several bgcolor tests to identify which container is the culprit, and it seems as though the siteContainer (the 100%x100%) is being shifted over a few pixels, while the centered body background is not.
Though it may be hard to comprehend this without visual aid, I'll paste the relevant CSS in hopes that someone might see a mistake I've made or something to help me out.
body {
background-color: #999999;
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background: #E8E8E8 url(../_img/bg.gif) repeat-y 50% 0;
font-family: Tahoma, "Lucida Grande", Verdana, sans-serif;
font-size:10px;
}#siteContainer {
position: absolute;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
text-align: center;
float: left;
}
#tripleContainer {
width: 769px;
height: 100%;
margin: 0 auto 0 auto;
text-align: left;
}
Any help is much appreciated.
When content overflows the viewport and scrollbars are created, mozilla seems to mess up the display, while IE has no problem.
Firefox and IE handle vertical scrollbars differently. In Firefox, the vertical scrollbar is only created when the page is longer than the viewport, but in IE it's always there. This can result in a page shiift between the two browsers on an otherwise identical page.
My guess is the shift you are seeing is the result of Firefix adding in the scrollbar and, therefor, recalculating your widths based on the new viewport size (for centering, this would only mean a few pixels on either side as it splits the width of the scroll bar).
If this is the problem, there isn't a lot you can do. This is just a UA difference. I'm convinced that Firefox users have become used to it and probably don't even notice the shift as they surf (I know I don't). If it really bugs you, you can set the height of something in your layout to a couple thousand px. This would ensure that the layout was always taller than the viewport and would ensure a scrollbar, but is bound to come with it's own set of issues.
cEM
html { overflow-y: scroll; }will also work here.
overflow: scroll; - creates both horizontal and vertical scrollbars... always... with or without overflow.
overflow-y: scroll; - only creates the vertical scrollbar *if* there is overflow.
Problem is, on a professional site, you don't want a vertical scrollbar all the time... but you could live with it. What you definately don't want is vertical and horizontal scrollbars all the time; especially since that kind of defeats the purpose of making a slim, centered site.
The reason this really bothers me, is because several of the visual elements are generated to work with the body background; i.e., the footer background is based off of the main tri-column body background. Similarly, other visual elements have gradients on one side or the other to reflect the gradient imbedded in the main body background. That and the fact that I don't want to present a product to the client with obvious visible flaws like that.
If so, there's something else at play and we'll need to see some more code (like the html that goes with the css posted above ).
on a professional site, you don't want a vertical scrollbar all the time
This is beyond your control. In IE, you have no choice, it's vertical scrollbar all day, every day, whether you like it or not. In FF, it's not. As I said before, I honestly don't think anyone other than designers, and in that case really only the designer making the page in question, ever notice the slight sideways jump between pages with scrollbars and pages without.
cEM
And yes.. everything you said is correct. Everything *should* line up exactly as before.. there's no reason for it not to, but for some reason it doesn't. It's honestly something you have to see to believe.
The really odd thing is the fix. By increasing the tripleContainer by 1px in width, none of the image alignment problems happen with scrollbars being added. I have no clue what this 1 pixel does.. because I have no padding or borders applied anywhere that would account for the need of another pixel.. but it works. Unfortunately, this screws up IE.. so it looks like I'm going to have to finess FF widths differently in order to get it looking right on both browsers. Fun.
Thank you for yout time and attention to this matter though.
[webmasterworld.com...]
As I said there, it's a hack, but it works. ;)
As I want every page centered, they look something like this:
body {
margin: auto;
}
#content {
width: 760px;
margin-left: auto;
margin-right: auto;
}
Seems to work fine on the computer's local server - in Firefox and IE, even for long pages. Any potential problems with this method?
html {min-height: 100.1%;}
