Forum Moderators: open
I won't even go into the exact table structure that I'm using. I did a simple test:
I used only <img> tags to put one tab after the other until all the tabs (and all 780) pixels were there. No problems.
I then simply put a table around the image tags. Now the problem appears. When I first come to the page, I see a horizontal scroll bar (that scrolls probably 10 or 15 pixels), but after refreshing, it's gone.
Any ideas?
What layout styles are set on the page? If you're eliminating padding within the body using stylesheets, it could be simply that the stylesheet hasn't loaded when the browser finishes rendering the page. Internet Explorer 5 sometimes fails to load/apply stylesheets as well.
I have to say that 780, in my experience, is high for an 800x600 site. Browser chrome adds 24 pixels to the width alone, plus internal padding in the <body> as well as the default table spacing, cellspacing, and cellpadding. I have no idea why it would collapse of its own accord after reloading, though.
Right now that's basically all that's in my document - the body tag and these images.
I'm an extremely meticulious designer and I make sure that I utilize every pixel that I can. I've measured and IE and Netscape both add 20 pixels on the sides of the document (when the browser windows are maximized). Interestingly enough it adds 28 pixels when the browser is in a restored state.
Anyway, since manually reloading the page yields the result I'm looking for, it just seems that 780 pixels worth of conent should not force an 800x600 browser window to scroll ever. Yet for some reason it does on the initial page load...
The one thing about trying to design a pixel perfect GUI for 800x600 resolution is that you do not know what toolbars the user has on his/her screen and even if they browse with the window maximised (less of an issue at lower resolutions).
Many people have the Office toolbar - which can be on the top, bottom or either side. Then, for PC users, does the user have the Windows task bar on auto-hide or constant display? Does the user have a news/stock etc ticker?
Today about 50% of users browser at 800x600, and about 50% at 1024x768 (lets not argue semantics on my figures!). I browse at 1152x864. I have the Windows task bar always visible and the BBC news ticker on the top of my screen. I never have my browser maximised! The point? Every user has a different screen setup - pixel perfect designs don't really factor this in.
MYpro's suggestion of knocking 20 pixels off the top and bottom is sound.... but the optimal solution (in my opinion, of course!) is a fluid design. Harder to implement, but usability studies have shown that users much prefer this method.
HTH
...table structure...
By default the cell padding is 2 pixels, and the cell spacing is 2 pixels.
Try adding cellpadding="0" cellspacing="0" to your <table> tag. That might just do it :)
but the optimal solution (in my opinion, of course!) is a fluid design. Harder to implement, but usability studies have shown that users much prefer this method.
...unless the browser starts leaking! ;) Seriously, I second that statement! A fluid design works best in all resolutions. Now, just because it's "fluid" doesn't mean you're stuck with percentages or that you can't set a width for certain elements.
If you have a navigation bar on the left side you can very well leave it a fixed width. You can also have your "tabs" set to a fixed width. Just make sure that the page content will wrap if the browser window is smaller than you expect. A well planned and structured site will benefit from a fluid layout.
This doesn't mean that it's wrong with a scroll bar every now and then. But, if a scroll bar appears, make sure it appears for a reason ;)
...unless the browser starts leaking!
Now there is an analagy I like! Mind if I use it in relation to non compliant browsers? You will, of course, get full credit DrDoc!
This doesn't mean that it's wrong with a scroll bar every now and then. But, if a scroll bar appears, make sure it appears for a reason!
And make sure it's only for vertical scrolling - never horizontal scrolling! SURL (Software Usability Research Lab) published a fantastic online paper on optimal web design that tackles many of the issues we've discussed here from a user and usability point of view. I firmly believe that it's a must read. Read it here! [psychology.wichita.edu]
My tables are already at cellspacing=0 and cellpadding=0. I work for a company whose CEO insists on every single one of our company's products to be its own tab in a horizontal tabbed navigation. With the release of every new product, I'm tasked with "just find a way to make it fit".
I've been coding for 10 years, and I'm sure that I'm not running into an amateur webmaster problem (such as not specifying cellpadding=0).
I know that there are several different browser add-ons that will reduce horizontal real estate, but I'm designing to a stock browser.
780 absolutly does fit and should fit every time, but it doesn't. Initialy, the page scrolls horizontally (even though there's nothing to scroll to see - just white space). After refreshing, the scrolling is gone. I've tried coding the table structure a number of different ways.
I'm sure that this is a glitch in IE, and I've gone back to my CEO with "your 1:1 product:tab relationship has pushed us into discovering browser rendering issues", but for the record, he didn't care.
"Just find a way to make it fit". :)
It never fits on my computer - 800 X 600, Windows, IE 5.5; I get a scrollbar all the time with a page and table like you described or just an image 780 px width, initial loading and refreshing. People can adjust their scrollbar widths also.
When I first come to the page, I see a horizontal scroll bar (that scrolls probably 10 or 15 pixels), but after refreshing, it's gone.
The problem might lie in how the widths are defined, if you have dynamic content or not.
Sometimes an element's width is calculated before the content has fully loaded. Or, the content can load before a set width was in effect, hence causing a scrollbar to appear. If either of the above is the case, then it is only normal that the scrollbar disappears on a refresh (because of caching).
Now, what you can do is either try to make the page smaller and smaller, and see if the scrollbar disappears. Or, you can just look over how widths are defined. Remove one element or two and reload the page. Problem still there? Then remove another element... Keep doing this until you've discovered which element causes the problem.
Now there is an analagy I like! Mind if I use it in relation to non compliant browsers? You will, of course, get full credit DrDoc!
LOL sure! ;)
I recall a while ago having a similar problem in frames and removing the DOCTYPE tag did the fix - hope this helps,
Steve
P.S.: I didn't try variations on DOCTYPE parameters back then - possibly there is a solution including the DOCTYPE tag with different parameters (i.e. HTML version)
