Development a little CSS help?

Yes, I need help with CSS, just because I love it so much doesn't mean I'm great at it.

You can see what I'm trying to do over at http://scarco.woventhorns.com/

The menu on the left should look like this:


It looks close enough in Mozilla, but way off in IE, and since the common user (non geek) mostly uses IE, it is very important to me that it work there.

Before anyone mentions tables, the point is to do this in CSS. These are menu items, not tabular data.

 

I think there are some tweaks you can do to your style sheets that will help IE get the freaking point as to how stuff should show up. I don't have my windows machine on atm so I cant check with IE. I don't know to much about CSS myself, and am trying to learn a little for making simple websites.

 

I didn;t have time to test x-browser stuff and forgot to log the changes!!

The following works in my IE6 browser.... these seem to be the only #left elements required....

Code:

#left_menu
{
	float: left;
	width: 175px;
	padding: 0;
	margin: 10px 0 0 10px;
}

#left_menu ol
{
	width: 169px;
	background-color: #FFCC99;
	display: block;
	margin: 0 0;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
}

#left_menu .image
{
	border: 0;
	padding: 0;
	margin: 0 0 -5 0;
}

#left_menu li
{
	list-style: none;
	padding: 0;
	margin: 5 5 5 5
}

#left_menu ol li a:link,
#left_menu ol li a:visited
 {
	color:#000000;
	border: 1px solid #FF0000;
	background-color: #FFE6CC;
	font-size: 14px;
	font-weight: bold;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration:none;
	margin: 5 0 5px 0;
	padding: 2px;
	width: 100%
}

#left_menu ol li a:hover {
	background-color: #FFFFFF;
}

 

Thanks!
Now I've just got to figure out some cross browser stuff, to make sure it still works in Netscape.

I'm thinking of throwing some PHP into the mix to offer a slightly different style sheet for standards compliant browsers. (I'm not a huge fan of CSS hacks, and want to keep it as clean as possible)

EDIT::
And yes, I've updated it, you can still check it out at http://scarco.woventhorns.com . Just keep in mind this is only one page, none of the links work. Trying to figure out the layout first.

 

Looks like there's a missing padding in one of the #left....

In IE6 its not evenly padded with the left hand padding being closer than the right.

 

Yeah, I just realized I'm still here at work with IE 5.5, which shows a big gap over on the left side of the menu.

I will fix that later when I get back home and can test it out in a few different browsers. I'd rather it look okay in older browsers and great in newer ones. (but not bad in any, other than netscape 4-)

I may even make a tables version for older browsers, but I'm not worried about it as I'll be making a simple template with php scripts pulling the data, so an extra template and a few lines of code should result in a site that covers most of the bases.

 

I just checked the page in IE6.0, Firefox 0.8 and Opera 7.5, it looks different in every one.

To be honest, I don't know why you put yourself through it, why not just shove it in a table, they are cross browser compliant after all. Put yourself in your client's shoes, he wants a site delivered in good time that looks good and works well for all visitors, he is not likely to be concerned with scoring brownie points with CSS purists.

 

I'm doing this for near free, and since I'm a CSS purist and he knows it, he knows what he is getting into.

The more sites done in tables, the less accessible the web is.

I don't really want to get into it here, but CSS can almost replace templating engines, tables cannot, CSS separates design from content, tables cannot, and overall, CSS creates a much more accessable site. (while the style may not be as accessible, the content is)

I made a table-based site and found I could not make it work for both netscape 4 and netscape 7, and that was with no CSS, so I figure if the problem is going to be there, why not cater to those with disabilities rather than those with disabled browsers?

(designing with tables is kind of like putting handicapped parking on the other side of the parking lot... they have to go a longer way to get the content, but it is easier for the rest of us)

</rant>

EDIT:: And to add what I wrote in another thread just today, my main reason for CSS only is because that is what I'm wanting to be my niche, so I have to force myself to learn to do it well so if I do start accepting clients, I will use CSS as kind of my 'signature'.
It would be much easier for those guys at Orange County Choppers to go out and buy a stock motorcycle, and would even be easier to maintain, but instead they do the counter-productive thing and make it themselves because that's who they are, and since I Don't know anything about mechanics, I'm focusing on CSS (and my car makes this funny squeeking noise)

So in short, no hard feelings, but I'm using CSS because I like it, and I don't like having clients. I've got a job, and not much free time, so when I get suckered into doing a website, I'm going to do it my way, or they are welcome to go to someone else. (I've even given them a list of other local designers) Tables aren't bad when they are simple, but they rarely are. I'm not as opposed to them as long as there are no spacer images, and no 5px or less cells. (accessible design doesn't mean absolutely no tables, just no crazy insane tables/severely nested tables)
</not so much of a rant, but still sort of>