SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member RainFire's Avatar
    Join Date
    Aug 2006
    Location
    Bremen, Germany
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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?

    Code HTML4Strict:
    <!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!
    Attached Images Attached Images
    ---Beginner Forever---

  2. #2
    SitePoint Member RainFire's Avatar
    Join Date
    Aug 2006
    Location
    Bremen, Germany
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Problem solved, a co-worker found a tag I hadn't closed properly and had been blindly looking past.

    Easy!
    ---Beginner Forever---


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •