Help! Website Looks Great On Mac, Problems On PC

[Gman]

I am hoping that someone will be able to help me. I have a website I designed that looks great on my Mac whether I check it with Safari or IE. However, I have been alerted by my PC users of the site that what I see and what they see are two different things.

To tell you more about the problem, I am using Dreamweaver MX and on the front page which seems to be the problem, I am using the following format:

I have a banner across the top of the page and then 3 columns that are 3 separate layers across the page below the banner. I have set the banner width to match the width of the three column layers below it.

Evidentally, when my PC users look at the page they are having a problem with the width of the page, as they do not see the entire width of the banner. Also the 3 columns (layers) are getting moved around so that they see the left hand column properly, but the middle column gets shifted down below the left hand column, not next to it. Also some are saying that they do not see the right hand column at all!

I am not sure what it causing this and it's driving me crazy and I need to fix this. Could the banner be causing the problem? The banner width is 1008 x 198. It just turned out that way because in Dreamweaver I stretched the banner to match the width of the three columns below it-do I need to set the width to a certain measurment? I know that I see the page fine in my browser (Safari), which I have open on my entire screen, which is only a 14' monitor on my laptop. There should be no one with a smaller monitor, but even my friend who has a very large monitor is still losing the right side of the banner and the right hand column.

My guess is that somewhere my formatting is screwed up, but I have no idea how or what I need to be looking at. Can anyone help? Here is the website to check out:

www.northwesthockey.org

Thanks.

[Benjamin]

I wonder if your CSS layout might be a bit ambitious for a WYSISYG authoring approach...

Yes, your layout is breaking on my screen: Windows XP Firefox, 1280 x 1024.

I don't use Dreamweaver to write my code so I may not understand your situation entirely but I took a look at your code anyway.

You have a complicated mix of absolutely positioned <div> elements and floated <div>s (as well as inline styles and external sheet styles).
It may be hard to track exactly what is going on, and take account of various browser bugs etc. But floats in particular are problematic so you could try getting rid of those. I suggest you also simplify your layout as much as possible.

To help in your debugging process you could also try adjusting the screen resolution on your own computer to see how the layout is effected.

In my experience it is pretty hard to set up a stable cross-browser layout like this using CSS even by hand.
To get some stable layouts you can look at www.positioniseverything.net (http://www.positioniseverything.net), for example.

Hope this makes some sense to you. If not, ignore it and ask a Dreamweaver user.

http://www.jackfruitdesign.com/
Om Namah Shivaya

Post Edited (Benjamin) : 11/7/2004 3:35:37 PM GMT

[Gman]

Hmmmm......Yeah, I started out using CSS, and then got a away from it a bit. Unfortunately, I'm trying to design a good site, and have some knowledge, but will be the first to profess being an amatuer! So I understand what your getting at, I'm just not sure how to fix it. I don't want to start from scratch and I don't have a ton of time on my hands to really start taking apart the code. Most of the time I don't delve into the code side of Dreamweaver.

[Benjamin]

You could take a template from somewhere like the link I gave above, and 'simply' slot in your own graphics and text?

http://www.jackfruitdesign.com/
Om Namah Shivaya