SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Threaded View

  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE Expanding my UL past the div

    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&#37;;
        
    }
        
        
    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
    Last edited by json2001; Feb 11, 2008 at 14:05.


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
  •