I pray to the Gods of Programming...

[shocksyde]

Good morning,

I just recently redesigned my site using CSS. I have a Windows Vista machine with Firefox 2 and IE7. I designed the site in Notepad.

Here's where my problem lies: The site looks just how I want it on my browsers, but when I asked people to check it out, it seems IE6, Firefox1, Opera and Safari all have rendering problems.

My site is supposed to look like this: HERE

But in the mentioned browsers, my "featured galleries" bar on the left appears below my main content incorrectly.

So, my question is: Can anyone who's a kind soul and/or bored out of their mind take a look at my code and see where I'm going wrong? You'll have to forgive the coding trainwreck, I've only been working with CSS for about a week.

There's a link to my site in my sig. Thanks to anyone in advance who can help!!

EDIT: Does this look better?

[txrandom]

I didn't really look at your code much, but it looks like you dont have a "wrapper" or "box" div. Just put another div outside of all your stuff and then align it to the left. I think it should be something like below:

[shocksyde]

I do have a wrapper, it's named "container"

I believe I'm making some progress, I'll post a test page in a moment.

[shocksyde]

Ok, I've done some work and posted a test page HERE.

Anyone experiencing problems with my latest effort?

[xtknight]

You are using quite a few absolute values for spacing. This isn't a great idea, especially when you have to make it work well with people using high DPI settings. Position: absolute is something you should try and use sparingly. IMO the only absolute values that should even be there are perhaps the total width of the page, and the height of the header image. There are also widths without units. When you remove the numbers on the left, the whole thing collapses. This also shouldn't happen, but isn't as critical a problem.

In general, you have slightly more divs than you need, it seems. Also, you should terminate your styles with semicolons all the time (before the ending brace).

It simply looks a lot more difficult than it really is if you use the right properties. I can't blame you though, it takes tons of patience to work with CSS and IE6 can really be a pain in the ass.

Edit: the latest doesn't work at least in FF. Here's how it looks on my machine (Firefox/Linux):

http://xtknight.atothosting.com/images/seanpage.png

Seems to be fine in FF and Opera with Windows, which indicates a font spacing problem (probably absolute values again).

The only browser the whole page is centered on is IE with Windows.

[shocksyde]

By absolute values do you mean things like "14px" or "12pt"?

What should I use as an alternative?

I've got the sidebar set to 25% of the page width and the content box (to the right) at 70%. Both sections are in a div together with one floated left and one floated right. Why are things being shoved to the bottom?

Thanks for your comments so far, by the way.

[RandomFool]

http://www.seannaber.com/test/ Looked fine using IE6 on windows XP.

One suggestion I have is you might want to put your css in an external file. It makes it easier when you have multiple pages.

[shocksyde]

Yeah, that sounds like a good idea.

Still looking for a reason why my layout is getting jumbled around!

[RandomFool]

I took a peek a second ago and it looked fine in Opera 9.21, IE6, IE7 and FF2.
http://www.randomfool.net/pictures/seannaber.png

[shocksyde]

Yeah I think I may have fixed most of the problems. I still don't have access to Mac applications, so if anyone can check Safari, IE6, IE7, FF1, FF2 and Opera on a Mac I'd really appreciate it!

Now I just gotta work on getting my code to verify...

[LeetestUnleet]

Sometimes it's easier to make sure it validates as you go along, especially if you're encountering display issues. Improperly formed CSS can display differently in all browsers -- it's kinda like how IE tries to "fix" badly formed HTML, but other browsers like Firefox and Opera are less forgiving.