Doubled Divs in IE

Hi all–

I’m working a simple CSS based html interface for a cd that will contain PDFs. Nothing fancy and quick and dirty to save time. I am now running into a strange problem. I’ve got a tab layout with each tab created with a single div across the top. Looks fine in FireFox, but in IE (I’m looking with IE8) all the tab divs are doubled in width despite a set width, and show the background image, despite a no-repeat. This results in tab “a” displayed with a blank tab next to it, and then tab “b” with a blank tab next to it, and so on. Also, the blank tab includes the hyper-link despite appearing to be empty. What’s going on?


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head> <title>Mevis Breast Symposium 2010 Reading and Lesson Materials</title>

<style type="text/css">

body {
background: url(images/background.png) top left no-repeat #016676;
font-family: Arial, sans-serif;
}

#interface {
margin-right: auto;
margin-left: auto;
width: 878px;
height: 669px;
background: no-repeat url(images/card.png);
}

#tabcard {
background: no-repeat url(images/tabcard.png);
width: 836px;
height: 482px;
margin-right: auto;
margin-left: auto;
}

#tab.main {
position: relative;
float: left;
color: #c5007b;
font-size: 12pt;
font-weight: bold;
text-align: center;
width: 81px;
height: 31px;
}

#tab.inactive {
position: relative;
float: left;
background: no-repeat url(images/inactivetab.png);
color: #016676;
font-size: 12pt;
font-weight: bold;
text-align: center;
width: 42px;
height: 31px;
}

#tab.active {
position: relative;
float: left;
background: no-repeat url(images/activetab.png);
color: #c5007b;
font-size: 12pt;
font-weight: bold;
text-align: center;
width: 42px;
height: 31px;
}

#tab p {
position: relative;
top: -8px;
}

#tab a {
color: #016676;
text-decoration: none;
}

#tab a:hover {
color: #c5007b;
text-decoration: underline;
}


h1 {
padding-left: 20px;
padding-top: 10px;
color: #016676;
}

h2 {
padding-left: 20px;
color: #016676;
font-size: 105%;
}

h3 {
padding-left: 20px;
color: #c5007b;
font-size: 80%;
}

h1.content {
clear: both;
text-align: center;
padding-top: 10px;
color: #016676;
}

h2.content {
clear: both;
text-align: center;
color: #016676;
font-size: 105%;
}

p.centered {
text-align: center;
}

p.content {
padding: 0px 20px 0px 20px;
}

</style>

</head>

<body>

<div id="interface">

<h1>Breast Symposium 2010</h1>
<h2>Detection and Diagnosis of Early Breast Cancer Using the Multimodality Approach</h2>
<h3>Reading and Lesson Materials:</h3>

<div id="tabcard">

<div id="tab" class="main">
<p>Contents</p>
</div>

<div id="tab" class="inactive" style="left: 5px;">
<p><a href="a.html">A</a</p>
</div>

<div id="tab" class="inactive" style="left: 5px;">
<p><a href="b.html">B</a</p>
</div>

<div id="tab" class="inactive" style="left: 5px;">
<p><a href="c.html">C</a</p>
</div>

<div id="tab" class="inactive" style="left: 5px;">
<p><a href="d.html">D</a</p>
</div>

<div id="tab" class="inactive" style="left: 5px;">
<p><a href="e.html">E</a</p>
</div>

<div id="tab" class="inactive" style="left: 5px;">
<p><a href="f.html">F</a</p>
</div>

<div id="tab" class="inactive" style="left: 5px;">
<p><a href="g.html">G</a</p>
</div>

<div id="tab" class="inactive" style="left: 5px;">
<p><a href="h.html">H</a</p>
</div>

<div id="tab" class="inactive" style="left: 5px;">
<p><a href="i.html">I</a</p>
</div>

<div id="tab" class="inactive" style="left: 5px;">
<p><a href="j.html">J</a</p>
</div>

<div id="tab" class="inactive" style="left: 5px;">
<p><a href="extras.html">*</a></p>
</div>

<h1 class="content">Multimodality Detection and Diagnosis of Breast Diseases</h1>
<h2 class="content">Finding Breast Cancer in Early Stages - Detection, Diagnosis and Implication for Management</h2>
<p class="centered">László Tabár, M.D., F.A.C.R. (Hon)<br>Professor of Radiology, University of Uppsala School of Medicine, Sweden<br>Medical 

Director, Department of Mammography, Falun Central Hospital, Falun, Sweden</p>
<p class="content">A: Introduction
<br>B: Asymmetric Density on the Mammogram
<br>C: Viewing Technique
<br>D: Stellate (Spiculated) Lesions on the Mammogram
<br>E: Circular/Oval Shaped Lesions
<br>F: In Situ Carcinoma of the Breast
<br>G: Control of Breast Cancer Through Early Detection
<br>H: Lymphedema of the Breast
<br>I: Miscellaneous Topics
<br>J: Optimum Mammography Technique
</p>

</div>

</div>

</body>

</html>

Unfortunately I don’t have access to public web space here from work for a live link. I’ll try and find a place to drop them and will update this post if I can.

Thanks in advance for advice and help! :slight_smile:

Problem solved, a co-worker found a tag I hadn’t closed properly and had been blindly looking past.

Easy!