Hello,
I seem to always find myself fighting with IE. This time I have a div (intended to be one block on a page of many blocks) that is 300px wide. It contains a ul navigation menu that will use sliding doors to implement tabs. Under that is has a table that displays data.
I have set up my UL and attempted to get it ready to put in my sliding doors images. Floating each <li> left and giving each one a width of 60px (60pxx5 tabs = 300px)
This looks perfect in FF however when I switch over to IE there is what appears to be a 5 pixel margin or padding slapped onto the far right side of my UL that expands the div and trashes the formatting of the full page that this block fits into. Any help would be greatly appreciated. Thanks in advance.
Demo Page w/ CSS at the TOP:
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Site Point Demo</title>
<style type="text/css">
*{margin:0;padding:0;}
div#rankings {
background-color : #FFF;
float : left;
width : 300px;
height : 300px;
border : 1px solid black;
margin:0 5px 0 5px;
}
ul.rankingtabs
{
height:18px;
list-style:none;
}
li.rankingtabs
{
float:left;
background-color:green;
}
li.rankingtabs a
{
display:inline;
height:0;
float:left;
overflow:hidden;
padding:18px 0 0 0;
width:60px;
}
td.rank
{
width:15px;
}
td.title
{
width:170px;
}
td.fact
{
width:25px;
}
td.reg
{
width:15px;
}
td.number
{
width:35px;
}
table.rankingdisplay
{
margin:5px;
width:100%;
}
table.rankingdisplay img
{
display:inline;
}
</style>
</head>
<body>
<div id="container">
<div id="rankings">
<ul class="rankingtabs">
<li class="rankingtabs"><a href="#">1</a></li>
<li class="rankingtabs"><a href="#">2</a></li>
<li class="rankingtabs"><a href="#">3</a></li>
<li class="rankingtabs"><a href="#">4</a></li>
<li class="rankingtabs"><a href="#">5</a></li>
</ul>
<table class="rankingdisplay">
<tbody>
<tr>
<td class="rankingdisplay rank">1.</td>
<td class="rankingdisplay reg">img</td>
<td class="rankingdisplay fact">img</td>
<td class="rankingdisplay title">FillerTitle</td>
<td class="rankingdisplay number">1234</td>
</tr>
<tr>
<td class="rankingdisplay rank">2.</td>
<td class="rankingdisplay reg">img</td>
<td class="rankingdisplay fact">img</td>
<td class="rankingdisplay title">FillerTitle</td>
<td class="rankingdisplay number">1234</td>
</tr>
<tr>
<td class="rankingdisplay rank">3.</td>
<td class="rankingdisplay reg">img</td>
<td class="rankingdisplay fact">img</td>
<td class="rankingdisplay title">FillerTitle</td>
<td class="rankingdisplay number">1234</td>
</tr>
<tr>
<td class="rankingdisplay rank">4.</td>
<td class="rankingdisplay reg">img</td>
<td class="rankingdisplay fact">img</td>
<td class="rankingdisplay title">FillerTitle</td>
<td class="rankingdisplay number">1234</td>
</tr>
<tr>
<td class="rankingdisplay rank">5.</td>
<td class="rankingdisplay reg">img</td>
<td class="rankingdisplay fact">img</td>
<td class="rankingdisplay title">FillerTitle</td>
<td class="rankingdisplay number">1234</td>
</tr>
<tr>
<td class="rankingdisplay rank">6.</td>
<td class="rankingdisplay reg">img</td>
<td class="rankingdisplay fact">img</td>
<td class="rankingdisplay title">FillerTitle</td>
<td class="rankingdisplay number">1234</td>
</tr>
<tr>
<td class="rankingdisplay rank">7.</td>
<td class="rankingdisplay reg">img</td>
<td class="rankingdisplay fact">img</td>
<td class="rankingdisplay title">FillerTitle</td>
<td class="rankingdisplay number">1234</td>
</tr>
<tr>
<td class="rankingdisplay rank">8.</td>
<td class="rankingdisplay reg">img</td>
<td class="rankingdisplay fact">img</td>
<td class="rankingdisplay title">FillerTitle</td>
<td class="rankingdisplay number">1234</td>
</tr>
<tr>
<td class="rankingdisplay rank">9.</td>
<td class="rankingdisplay reg">img</td>
<td class="rankingdisplay fact">img</td>
<td class="rankingdisplay title">FillerTitle</td>
<td class="rankingdisplay number">1234</td>
</tr>
<tr>
<td class="rankingdisplay rank">10.</td>
<td class="rankingdisplay reg">img</td>
<td class="rankingdisplay fact">img</td>
<td class="rankingdisplay title">FillerTitle</td>
<td class="rankingdisplay number">1234</td>
</tr>
<tr>
<td class="rankingdisplay rank">11.</td>
<td class="rankingdisplay reg">img</td>
<td class="rankingdisplay fact">img</td>
<td class="rankingdisplay title">FillerTitle</td>
<td class="rankingdisplay number">1234</td>
</tr>
<tr>
<td class="rankingdisplay rank">12.</td>
<td class="rankingdisplay reg">img</td>
<td class="rankingdisplay fact">img</td>
<td class="rankingdisplay title">FillerTitle</td>
<td class="rankingdisplay number">1234</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Bookmarks