You'll see from the attachment (taken in IE8) that the image and 'spreadsheet1', 'spreadsheet 2' etc are not enclosed within the rectangular box. With my current markup this works fine in Chrome and FF but not in IE8. I do not understand why this is the case.

It seems as if the div is not extending downwards to enclose the additional elements.

Any help would be much appreciated.

The HTML is:

<div id="container">
<div class="tabs"> 
        <ul class="tabNavigation"> 
            <li><a href="#first">Category 1</a></li> 
            <li><a href="#second">Category 2</a></li> 
            <li><a href="#third">Category 3</a></li> 
        </ul> 
    <div id="first"> 
    <div id="box">
        <img src="pokerchips.jpg" alt="" width="150" height="100" />
        <h2>Category 1</h2>
        <ul>
            <li><a href="#">Spreadsheet 1</a></li>
            <li><a href="#">Spreadsheet 2</a></li>
            <li><a href="#">Spreadsheet 3</a></li>

        </ul>
    </div>
    </div> 
    <div id="second"> 

        <div id="box">
        <img src="pokercards.jpg" alt="" width="150" height="100" />
        <h2>Category 2</h2>
        <ul>
            <li><a href="#">Spreadsheet 1</a></li>
            <li><a href="#">Spreadsheet 2</a></li>
            <li><a href="#">Spreadsheet 3</a></li>

        </ul>
    </div>
    </div> 
    <div id="third"> 
        <div id="box">
        <img src="poker_set.jpg" alt="" width="150" height="100" />
        <h2>Category 3</h2>
        <ul>
            <li><a href="#">Spreadsheet 1</a></li>
            <li><a href="#">Spreadsheet 2</a></li>
            <li><a href="#">Spreadsheet 3</a></li>

        </ul>
    </div>
    </div> 
</div> 


<p class="footer">All content &copy;2010, P 

Young. Site design by S Young. All rights reserved.</p> 
</div>

The CSS is:

#container {
-moz-box-shadow:0 0 2em #000000;
-webkit-box-shadow:0 0 2em #000000;
background:none repeat scroll 0 0 white;
float:left;
font-family:Verdana,Verdana,Geneva,sans-serif;
margin:3em 0 0 15em;
padding:0;
width:65%;
text-align:left;
display: inline;
}

ul.tabNavigation {
            list-style: none;
        margin-top: 2em;
            margin-left: 19em;
            padding: 0;

        }

        ul.tabNavigation li {
            display: inline;

        }

        ul.tabNavigation li a {
            padding: 3px 5px;
           background: -moz-linear-gradient(top, #CCFFCC, #666);
        background: -webkit-gradient(linear, left top, left bottom, from(#CCFFCC), 

to(#666), color-stop(1, #fff));
        background: linear-gradient(top, rgba(40,34,32,1), rgba(22,18,17,1));
        color: black;
            text-decoration: none;
        }

        ul.tabNavigation li a.selected,
        ul.tabNavigation li a:hover {
            background-color: #333;
            color: #fff;
            padding-top: 7px;
        }

        ul.tabNavigation li a:focus {
            outline: 0;
        }

        div.tabs > div {
            padding: 5px;
            margin-left: 6em;
            margin-bottom: 2em;
                border: 1px solid #ccc;
    -moz-box-shadow: 0 0 3px #aaa;
    -webkit-box-shadow: 0 0 3px #aaa;
    box-shadow: 0 0 3px #aaa;
            width: 75%;
            height: 25%;
        }

        div.tabs > div h2 {
            margin-top: 0;
        }

        #box {
            background-color: white;
        }



        #box h2 {
            font-size: 16px;
            padding: 0.5em;
            padding-right: 12em;
            text-align: center;
            }

        #box ul li {
            list-style: none;
            float:right;
            clear: right;
            }

        #box ul li a{
            color: #ff0000;
            display: block;
            font-size: 14px;
            margin: 0.5em;
            border-left: 1px solid #bbb;
            padding-left: 5px;
            text-decoration: none;
        }

    #box ul li a:hover{;
            font-weight: bold;
            background: #CCFFCC;
            text-decoration: none;
        }

        #box img {
            float: left;
            padding: 2em;
            padding-top: 3em;
            margin-right: 2em;
            clear: both;
            }
  • You'll get more answers if you post a live page. Nathan Duran over 6 years ago

2 answers

1
point
This was chosen as the best answer

You could try adding overflow: auto; to the div you want to enclose the elements in.

Answered over 6 years ago by Wander Nauta
  • Thanks Wander that fixed it (apologies I don't know why I didn't think of trying that!). olivaw over 6 years ago
  • Olivaw, if this fixes your problem, you should mark his response as the answer so Wander can get some points for helping you. :) Jordan Gray over 6 years ago
1
point

That's a lot of code for what is essentially a simple layout. You should re-visit your code and see if you can simplify it. Focus on the structure first and leave the pretty parts until later. Also, check the indents of your code - this won't change the output, but you'll be able to check that you've correctly opened and closed your tags; a slip up there could cause any number of issues wit the layout. And, as nathan says, a live demo would help if you have one.

Answered over 6 years ago by Edward Williams
  • Thanks for your comments Edward. I'll bear that in mind in future. olivaw over 6 years ago