I'm having trouble with the display of the following page:
On Safari for Mac and Firefox (3.x) for Mac. The right-side column is apparently floated down below the main column, rather than parallel to it.
The strange thing is that, normally when something like this happens, the problem is mirrored on Safari for Windows, and often on Chrome for Windows. In this case, though, the site is displaying correctly on both those browsers. I'm having a difficult time debugging because I do not currently have access to a Mac.
The CSS class that defines the main left column is:
float: left; width: 585px; padding: 19px 0px 20px 20px; overflow: hidden;
The CSS class that defines the right sidebar column is:
float: right; width: 307px;
The CSS class that defines the container div is:
background-image: url(../images/bg_content_inside.png); background-position: left top; background-repeat: repeat-y; margin: 0px 0px 0px 23px; width: 950px;
You can view the full stylesheet here:
(We've implemented a bit of strangeness in the stylesheet code because it also needs to display correctly in IE 6 and 7.)
Can anyone help? This one has me stumped. Thanks.
Hey I've viewed this both in Chrome and Safari on the mac. It is displayed on a 1280 x 800 screen. Both browsers displayed the same image. It seems to be that your nav bar is to width. This interferes with the main content. It pushes it to the right to make room for the nav bar so the sidebar is pushed below.
Just decrease the size of your nav bar and it should be fine.
Let me know when you decreased the size and I'll be happy to check it again.
Thanks very much -- that does help. I see now that the issue is caused by the way that Macs render text than Windows browsers.
In the stylesheet, the nav layout is dependent on the text being rendered at a consistent size across browsers -- and it does work for all Windows browsers (even IE 6).
However, the Mac is rendering the same text significantly wider than on Windows, and that is what is causing the final nav item to push over onto a second row.
I've made some modifications to define the nav items at a fixed width. Can you please put up one more screen shot to let me know if this has fixed the problem?
Just to follow up, I was able to get confirmation from a friend with a Mac that the problem is now solved.
To recap, the issue was caused by the fact that Macs seem to display fonts at different widths than PCs, even with the same CSS style definitions. In fact, Mac / Safari displays text at different widths than Windows Safari, and the same goes for Mac / Firefox and Windows / Firefox.
The solution was to define strict widths on each of the elements in my navigation, set the text-align to center, and then remove the padding & other attributes which might have caused spacing issues between browsers.
That solved the problem.
I just viewed it once again and the problem is indeed gone.
Thank you for explaining the cause. I wasn't aware that mac rendered fonts wider than windows. This is good to know.