Alignment And Sizing Problems

[keydin]

OK, I am pulling my hair out on this one. Go to http://steveeller.com/wordpress (the css is at http://steveeller.com/wordpress/wp-content/themes/Rancho%20Vista%20Theme/style.css).

There are three areas that I am having a problem with. For reference, if you view this in Safari 3, you will get an idea of what it should look like.

1. In a Mozilla browser (Flock), the main menu is lower than it should be, and the size of the box in "Upcoming Events" is a couple pixels too small (you will see it cuts off the triangle at the bottom

2. In IE6 the "Last Blog Post" and "Upcoming Events" boxes' sizes are way too big. The white space between the logo and the green nav bar is too large.

3. In IE7 the "Last Blog Post" and "Upcoming Events" boxes' sizes are too small.

Can somebody help please? I am relatively new to css, and I am having a hard time designing cross-browser code. There has to be an easier way.

FMI (For My Information) - is there any information out there that shows a listing of what css is not recognized by each of the browsers?

[Jas]

I don't have time to address your full question-- someone else will I am sure :) (I'm about to leave). But for now, I'll answer the last part:
is there any information out there that shows a listing of what css is not recognized by each of the browsers?
Look here (http://www.w3schools.com/css/css_reference.asp). This is obviously the problem, but if you can't figure it out, I'll try to help more later. Cross browser creation is by far the most frustating part.

[keydin]

Thanks for the info. Jas

[keydin]

I checked out that link and it didn't seem to be very current. I only saw reference to ie6 and none to ie7.

[keydin]

Any ideas?

[Jas]

I found a syntax error (";;"). . . You should validate (http://validator.w3.org/) your CSS.


h2 a, a:visited {
color: #00294d;;
}


EDIT: Woah! Scratch that! It says there are no errors. That's really odd.

[keydin]

Yeah I did validate it beforehand and it didn't pick it up. It is fixed now.

I got the "upcoming..." and "latest..." boxes almost where I wanted the, but kept having issues, so I simplified it.

The only problem I am having now is in ie6. There is a white space gap on the right hand side of the main content. I can't seem to be able to get rid of it. Any ideas?

Can someone please put IE out of its misery!