IE Rendering help

Hello all,

I've got some code working fine in FF and Opera but am having some IE rendering issues. The problem appears in IE6 and 7.

The problem is with the tabs that read "Latest News Latest Blogs" directly under the flash banner:

http://www.digitalsomething.com/new/

Javascript handles the class changes. Here is the important css:

#menu_items
{
	font-size: 14px;
	border-left: 1px solid #185783;
	margin-bottom: 10px;
	padding: 7px;
	background-image: url(../img/menu_bg.jpg);
	height: 16px;
}
.tab_active
{
	padding: 7px;
	margin-left: 2px;
	margin-right: 2px;
	background: url(../img/tab_bg.jpg) bottom;
	color: #364D78;
	cursor: pointer;
}
.tab_inactive
{
	padding: 7px;
	margin-left: 2px;
	margin-right: 2px;
	background-color: #52729A;
	color: #000000;
	cursor: pointer;
}

HTML:

I'm sure it is just the way IE handles margins and padding. I'm just not too sure how to fix it. Any help will be greatly appreciated.

Thank you!

 

Could you please provide a screenshot ? I am on IE 7 and the site doesn't break in it.

 

Here are the tabs in FF:

 

You should have send screen shot from IE.
Anyway try to use the following CSS.

* html misbehaving-element{display:inline-block;other stuff...height:XXpx;width:XXpx}

Code (markup):

If your problem is IE7, IE6. Use the IE specific code within IE conditional comments.

Inline block does not work in FF so make sure you are IE specific (* html) is a good valid CSS hack to distinguish IE6.