Width is perfect in FF, not perfect in IE

[lamboe80]

I'm using Dynamic Drive's Ajax Tabs on my business directory homepage. The width of the tabbed content is exactly how I want it in Firefox, but it is several pixels narrower in IE. Can someone help me straighten it out, so that it is the same in both browsers?

My site: www.FindSoKy.com

CSS:

/************ CATEGORY TABS ********************/
.cat_tabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Arial;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}
 
.cat_tabs li{
display: inline;
margin: 0;
}
 
.cat_tabs li a{
text-decoration: underline;
padding: 3px 11px;
margin-right: -5px;
border-bottom : 1px solid #778;
border-left : 1px solid #B8CF81;
border-right : 1px solid #B8CF81;
border-top : 1px solid #778;
color: #fff;
background: white url(/template/FindSoKy/ajaxtabs/ajaxtabs/shade23.gif) top left repeat-x;
}
 
.cat_tabs li a:visited{
color: #fff;
}
 
.cat_tabs li a:hover{
text-decoration: none;
color: #fff;
}
 
.cat_tabs li.selected{
position: relative;
top: 0px;
}
 
.cat_tabs li.selected a{ /*selected main tab style */
background-image: url(/template/FindSoKy/ajaxtabs/ajaxtabs/shadeactive23.gif);
 
}
 
.cat_tabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}
 
.cat_tabs_style{
border: 1px solid #DADADA;
width: 670px;
height: 250px;
margin-bottom: 1em; padding: 10px;
}
 
.cat_tabs_links li {
list-style: none;
margin-left: 10px;
}
 
.cat_tabs_links a:link {
    COLOR: #004400;
    font-size : 12px; 
    font-family: Arial, Sans-Serif;
    text-decoration: underline;
}
 
.cat_tabs_links a:visited {
    COLOR: #004400;
    font-size : 12px; 
    font-family: Arial, Sans-Serif;
    text-decoration: underline;
}
 
.cat_tabs_links a:hover {
    COLOR: #004400;
    font-size : 12px; 
    font-family: Arial, Sans-Serif;
    text-decoration: none;
}
 
.cat_tabs_links a:active {
    COLOR: #004400;
    font-size : 12px; 
    font-family: Arial, Sans-Serif;
    text-decoration: none;
}
 
span.text_large_green {
    font-family: Arial, Sans-Serif;
    font-size: 18px;
    text-decoration : none; 
    color: #004400;
}
 
span.text_tabs {
    color: #004400;
    font-size: 15px;
	font-weight: bold;
	text-decoration: none;
    font-family: Arial, Sans-Serif;
}

html:

<ul id="maintab" class="cat_tabs">
	<li class="selected"><a href="#default" rel="ajaxcontentarea" rev="/template/FindSoKy/css.css">Top Categories</a></li>
	<li><a href="/template/FindSoKy/ajaxtabs/external.htm" rel="ajaxcontentarea" rev="/template/FindSoKy/css.css">Auto Repair</a></li>
	<li><a href="/template/FindSoKy/ajaxtabs/external2.htm" rel="ajaxcontentarea" rev="/template/FindSoKy/css.css">Child Care</a></li>
	<li><a href="/template/FindSoKy/ajaxtabs/external3.htm" rel="ajaxcontentarea" rev="/template/FindSoKy/css.css">Health Care</a></li>
	<li><a href="/template/FindSoKy/ajaxtabs/external4.htm" rel="ajaxcontentarea" rev="/template/FindSoKy/css.css">Personal Services</a></li>
	<li><a href="/template/FindSoKy/ajaxtabs/external5.htm" rel="ajaxcontentarea" rev="/template/FindSoKy/css.css">Home Services</a></li>
	<li><a href="/template/FindSoKy/ajaxtabs/external6.htm" rel="ajaxcontentarea" rev="/template/FindSoKy/css.css">Restaurants</a></li>
</ul>

<div id="ajaxcontentarea" class="cat_tabs_style">
	<table cellpadding="0" cellspacing="0" border="0" width="100&#37;" height="204">
		<tr>
			<td colspan="2" valign="top" style="padding-top:5px;padding-left:5px">
			<span class="text_large_green">3,300+ Bowling Green Businesses and Service Professionals!</span>
			</td>
		</tr>
		<tr>
			<td colspan="2" valign="top" style="padding-top:5px">
				<table width="100%" border="0" cellpadding="0" cellspacing="8">
					<tr>
						<td valign="top" width="33%">
							<a href="/Category/Automotive/"><span style="font-weight:bold">Automotive</span></a>
							<br />
							<a href="/Category/Automotive/Auto-Dealers/">Dealers</a>, <a href="/Category/Automotive/Auto-Repair-Service/">Repair</a>, <a href="/Category/Automotive/Auto-Washing-Detailing/">Detailing</a>...
						</td>
						<td valign="top" width="33%">
							<a href="/Category/Food-Entertainment/"><span style="font-weight:bold">Entertainment</span></a>
							<br />
							<a href="/Category/Food-Entertainment/Restaurants/">Restaurants</a>, <a href="/Category/Food-Entertainment/Event-Planning/">Event Planning</a>...
						</td>
						<td valign="top" width="33%">
							<a href="/Category/Personal-Services/"><span style="font-weight:bold">Personal Services </span></a>
							<br />
							<a href="/Category/Personal-Services/Florists/">Florists</a>, <a href="/Category/Personal-Services/Beauty-Salons-Hair-Care/">Hair Salons</a>, <a href="/Category/Personal-Services/Nail-Tanning-Salons/">Nail Salons</a>...
						</td>
					</tr>
					<tr>
						<td valign="top" width="33%">
							<a href="/Category/Business-Services/"><span style="font-weight:bold">Business & Computer Services</span></a>
							<br />
							<a href="/Category/Business-Services/Computer-Services/">Computer Service</a>, <a href="/Category/Business-Services/Business-Consulting/">Consulting</a>...
						</td>
						<td valign="top" width="33%">
							<a href="/Category/Health/"><span style="font-weight:bold">Health</span></a>
							<br />
							<a href="/Category/Health/Dentists-Dental-Services/">Dentists</a>, <a href="/Category/Health/Physicians/">Doctors</a>, <a href="/Category/Health/Chiropractors/">Chiros</a>, <a href="/Category/Health/Eye-Care/">Eye Care</a>...
						</td>
						<td valign="top" width="33%">
							<a href="/Category/Pets/"><span style="font-weight:bold">Pets</span></a>
							<br />
							<a href="/Category/Pets/Veterinarians/">Veterinarians</a>, <a href="/Category/Pets/Kennels-Pet-Boarding/">Kennels</a>, <a href="/Category/Pets/Pet-Grooming/">Grooming</a>...
						</td>
					</tr>
					<tr>
						<td valign="top" width="33%">
							<a href="/Category/Education/"><span style="font-weight:bold">Education</span></a>
							<br />
							<a href="/Category/Education/Dance-Schools-Classes/">Dance Schools</a>, <a href="/Category/Education/Music-Schools-Instruction/">Music Schools</a>...
						</td>
						<td valign="top" width="33%">
							<a href="/Category/Home-Services-Furnishings/"><span style="font-weight:bold">Home Services</span></a>
							<br />
							<a href="/Category/Home-Services-Furnishings/Interior-Decorators-Designers/">Decorators</a>, <a href="/Category/Home-Services-Furnishings/Landscape-Decks-Fencing/">Landscapers</a>, <a href="/Category/Home-Services-Furnishings/Plumbers-Sewer-Repair/">Plumbers</a>...
						</td>
						<td valign="top" width="33%">
							<a href="/Category/Real-Estate/"><span style="font-weight:bold">Real Estate</span></a>
							<br />
							<a href="/Category/Real-Estate/Real-Estate-Agents/">Agents</a>, <a href="/Category/Real-Estate/Apartments/">Apartments</a>, <a href="/Category/Real-Estate/Mortgage-Brokers-Lenders/">Mortgages</a>...
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td style="padding-left:12px">
			
			</td>
			<td align="right" style="padding-right:12px">
				<a href="/all_categories.php" style="font-weight:bold">view all categories >></a>
			</td>
		</tr>
	</table>
</div>

[Paul O'B]

Hi,

The tabs look the same width in IE and firefox to me but the content underneath is much smaller.

I'm guessing that the problems are all related to the broken box model as you are using a doctype without uri which will throw ie6 into quirks mode and use the broken box model among other things.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Use this instead:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

read the faq on the broken box model for the full run down

[lamboe80]

I tried this and it messed a bunch of other stuff up.

And yes, you're right, it's the content underneath that is so much narrower. The tabs themselves are ok.

[lamboe80]

if I use the width hack discussed in the broken box model FAQ, will it screw anything else up? Other browsers? I just added this and it seems to be working perfectly on my version of IE:

* html .cat_tabs_style{
width: 691px; /*for ie5.x win and ie6*/
}

[Paul O'B]

Hi,

If you keep the page in quirks mode then the style you have used is correct as both ie6 and ie5.+ will need the different size.

You will need to do that in every place that you have specified a width and at the same time added padding or borders.

The * html will not affect other browsers as it is only parsed by ie6 and under (and ie7 when in quirks mode).

It is advisable not to use quirks mode because there are so many variable behaviours associated with it but it seems like you've got away with it for now