SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  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 13:05.

  2. #2
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I changed this in your CSS:

    PHP Code:
    table.rankingdisplay
        
    {
            
    margin:0px;
            
    width:100&#37;;
        

    Looks good in IE6 and FF.

    Hope that helps some...
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It does certainly work! Thanks so much.

    What exactly does that little bit of arcane css do? I've never seen that before.

  4. #4
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not sure where the &#37;; came from, but the:

    margin:0px;

    get's rid of any margin spacing. You might actually delete it and see if it still works. Less code to load...

    Is that what you were asking about?
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!


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
  •