trouble with CSS

One thing I see straight away is you duplicating stuff in CSS classes.

In your style.css:

So on the adCol class you assign a margin:1px; then margin-bottom: 10px; and then margin: 10px 0px 10px 17px;
Still with adCol you also assign width:281px; then width: 250px;
There are others, but the site has so much CSS I didn't dare look at it all.

Have a look at the W3C Validator for a start and try to fix the errors it states for your CSS
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.steroi...

Your XHTML has 73 errors too, although a lot of them are not major issues that could affect functionality, although it doesn't hurt to clear up the ones that don't break your code.
Such as the alt tags in images, that is a good thing to do anyway, as it can be additional content for Google and alike (arguable).

But the main issue as I see it is the fact you have different things on the left hand side floated left.
For example,
.rounded-homebodyBottom .rounded-homebodyBody and .rounded-homebodyTop
I tend to wrap all the left hand side things in one div and float that div left, then all the right hand side things in one div and float that left.
So you have two wrapper divs floated next to each other and everything inside them without floats required.
In fact, I did just that on your site and removed all the floats from the above mentioned three things and it was fine.

I've attached a HTML file that is basically your code with the two new divs floated. I used inline style and green and red borders so you can see what's happening. I also put a huge amount of white space around the two new divs I made so you can find them.

I didn't however try it in any browser other than FF. And as there is a LOT of HTML and CSS code, it might not be perfect or usable as is, so just use it as a guide.

Greg, Thank you so much for your response.

I want to clarify something before we go any further. I DID NOT make this CSS. It was handed over to me (I know, someone else's dirty laundry!) and I'm trying to do things the other guy "couldn't do" and now I see why!

sounds like I'm making excuses and I kinda am, but I told the client in the future to just give me a straightup fresh template before I do this work again.

But you're right, that little rounded corner mess IS mine. I added floats everywhere in some sad attempt to try anything possible to make this work. I spent five hours yesterday trying to get one div to go over ot the right. It's maddening...

Thanks for your html!

I'll respond later with feedback!

Greg,

two quick questions:

1) What program did you use to be able to make a duplicate like this?

I wanted to be able to work on this site without messing up the actual content but with all the php includes I was afraid I'd end up with scripting that wouldn't work in isolation. Does my question make sense?

2) That particular problem, where #adCol has three separate values as you mentioned. That wasn't my doing. That was there when I got here. Are you saying that when it repeats #adCol several times in the styles it's just adding more and more attributes? I didn't know if that was the case or if it meant something like this: Whenever there is an adCol make it look like this, BUT if there is an adCol in the navigation, then make it look like this.

Does that make sense? I couldn't tell if it was some kind of legitimate css tactic that made several different kinds of adCol options depending on where it was buried. That shows my little knowledge of the subject and I can only thank you for your time helping me out here.

I'm a graphic designer by trade and usually just make stuff look cool but now I'm trying to expand my capabilities and this site is helping already!

Ok so I made the changes and I have to say: I swear I already tried to make two divs and float them left!

I think there's something to the sizes you gave those divs. How did you know what size to give them?

Also, when I took all the floats off the stuff inside the rounded corner stuff, all the parts fell apart and were stuck at the top of the div, does that make sense? Is there a better way to make boxes like that?

I used Firebug (which you are familiar with). It allows you to make changes that change the code right there on the site, when I figured out the issue, I simply clicked on "edit" on the html side and copied all the html, pasted it into my code editor (Bluefish) and added the code as required, the two new divs.

Then as I could work on the code in my editor, I could simply edit, copy and paste it into Firebug on your site and it would make the changes to the site.

With the green and red border showing exactly where the two wrapper divs are, I could simply change the width until they fit nicely side by side.

___________________________

To avoid messing up the site while coding, you can do what I did, and edit it through Firebug, although this isn't ideal, and I only did it as I don't have access to the real code.
You can use the code offline if you have a server or LAMP, or a test area of the site.
If the site has admin logins, add some PHP code to only show code if admin logged in, then only you will see it, or make a new testing directory and password protect it through the account (cpanel/plesk etc)

Unfortunately there is no way to avoid the PHP code if the files and pages have it in them. You can tread carefully trying not to disturb any of it. But it is likely at some point you will need to know what some of the PHP is doing in order to provide a style or area for the output the PHP is generating etc.

___________________________

Quick answer:
They are all trying to float next to each other BEFORE the right ad is trying to float next to them

Longer Answer:

LEFT AREA
image_a --> float left
div_a --> float left
image_b --> float left

RIGHT AREA
advertisement_a --> float left

Then in the HTML it was calling it like this

div_a could't FIT next to image_a with the float as there wasn't enough space on the right.
Same with image_b couldn't fit next to div_a as there wasn't enough space on the right.
There certainly wasn't enough space on the right for ALL THREE to float next to each other.

Do you see now?
So div_a was trying to float next to image_a, and image_b was trying to float next to div_a.
So by the time advertisement_a was being called in the HTML, all the other things trying to float next to each other had pushed the advertisement down to the bottom as the space on the right hand side wasn't enough.

___________________________

I know you are probably trying to get a quick fix, aren't we all if possible, but I think in this case you are going to have to spend a few hours raking through the code learning it a bit more and tidying it up.
The CSS and HTML isn't 'too bad', but it is a little messy, especially the CSS.

The rounded corners stuff. They are in a wrapper div floated left, so you don't need to worry about their position on the "full page", so now you deal with the rounded and other stuff within the floated wrapper div.

There are a few ways to accomplish this, usually the same outcomes, although as with most options preference depends on circumstance.

You can either make another wrapper div inside the floated one to wrap the top_rounded_img, content and then bottom_rounded_img all together.
Make the new internal wrap div the width of the top/bottom rounded images, that will then contain the top and bottom images and the content all at the same width.

You can of course add more divs as you need them.
For example to make some styling, border, padding or whatever on the content area in between the top_round and bottom_round images.
So after the round_top_img, a new div to contain the content, setting widths, margins and padding etc as required.

___________________________

Another way is to make three divs, each for the top and bottom round images and the content, and in the CSS something like:

The key and trick is to have the widths all the same, and the alignment all the same on all three, so they stack one on top of each other aligned in the same place.
You don't need to auto align the left/right margins, you can assign a specific left margin, as long as they all get the same alignment they will line up together.
EG for all three divs:
margin: 0px 0px 0px 30px;<-- left margin same for all three

Remember borders can make positions appear different to one of the other three. So if you have a border on the content div, but not on the top and bottom imgs, you might need to remove a few px from the width of the content div to make it line up neatly with the top and bottom imgs again.

___________________________

Using borders, like I did with the 2px red and green on all divs while you are developing helps you know where stuff is going. Then once everything is aligned as it should be, and you have checked it in IE and other browsers and fought for a while to make it work in all of them, simply remove the red, green, purple, blue borders around everything.

I do this often, as I tend to have numerous divs inside each other and I find it makes it easer. It also helps you picture the layout and what each div is doing in your mind, making it easier and also helping next time you design a layout - you know pretty much what things are going to do.

And as always - practice makes better (not perfect though, that's just never true )

___________________________

Again, method depends on requirements.
I feel your pain going through someone else's code when it's cluttered and bloated. I think most of us have been there at some point. And while it can be hard just figuring out someone else's code when it's well organised and well written, when it doesn't work and is messy, it's even harder.

Therefore sometimes it's easier just to rip it out and start again.
Not all of it, but in this case, if it was me and the original coder wasn't on the scene still, I'd get rid of all the styling that positions the left and right areas and start from fresh.

Make the main_left_wrap and main_right_wrap both float left. Then work on the styling of the contents inside them, like the top and bottom rounded images and the content in between them.

Greg,

Thanks a million for your time and patience on this.

I have since finished this project and had moved on when the client wanted me to add the navigation to his forum. On top of that he wants it to do special stuff I don't know if I can do.

Here's what I have so far:

http://www.healthandfitnesstalk.com/forum/

At the top you see my navigation with the yellow buttons and the white box below it.

My client likes what this is doing, he wanted rounded corners on all the boxes and he wants it to expand and contract with the opening and closing of the window. He wants this because without it the ads will disappear if the user is viewing the site through a small window.

So I am almost there.

Actually, everything would be just fine but if you shrink the window you will see how everything comes apart!

What I'd like for that to be able to do is this

Expand to 100% but never shrink more than say 60% or 950px.

Is there a way to do that? Or is there another solution to the way I built this that would remedy the problem?

Attached the style sheet

I figured out how to set min-width so I got some things figured out but I can't quite perfect this curved edge div box my client wants. I can't set the background of the sandwiched div to 100% or it breaks the outer parts of the divs. does that make sense?