SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    relative positioning shifts - need alternative (IE FF)

    Code:
    .C {
       width:240px;
        color:#000000;
        background:#FFFFFF;
            padding:6px 1px 3px 15px;
        border-right:2px solid #C4C4C4; 
        border-bottom: 2px solid #C4C4C4;
        border-left:2px solid #C4C4C4;
        font-size:12px; font-weight: 600; font-family: Arial, Helvetica, sans-serif;
        display:block;
        text-decoration:none;
    }
    Following works, aligning the numeric decimals within the spans:

    Code:
    <div>BusinessA <span style="color:#666666; position:relative; left: 79px;">12.25&#37;</span><br>
    BusinessB <span style="color:#666666; position:relative; left: 79px;">11.15%</span><br>
    BusinessA B <span style="color:#666666; position:relative; left: 66px;">5.35%</span><br></div>
    But when the class C is added, it shifts only the last decimal (IE/FF) which here is 5.35%

    Code:
    <div class="C">BusinessA <span style="color:#666666; position:relative; left: 79px;">12.25%</span><br>
        BusinessB <span style="color:#666666; position:relative; left: 79px;">11.15%</span><br>
            BusinessA B <span style="color:#666666; position:relative; left: 66px;">5.35%</span></div>
    I think what I need to ask is how can I do this without relative position and/or a table?

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I think what I need to ask is how can I do this without relative position and/or a table?
    Hi,
    I agree, you need to find another way to do that. It looks like you were giving the last span in the .c class a smaller offset value to account for the extra character of the "BusinessA B". That will just leave you frustrated having to set offset values according to characters.

    This could just be a simple UL with a floated span. Since floats must come first in the source for IE6/7 I would nest "Business?" in the span.

    Then you could use text-align:right on the LI to position the &#37; entries to the right. You could use a non-breaking space to keep them separated if css was off.

    This could also be done with a DL (definition list) but some would disagree with that approach.

    Here is an example with the floated span -

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test Page</title>
     
    <style type="text/css">
    .biz {
        width:240px;
        margin:0;
        padding:5px 0;
        overflow:hidden;
        list-style:none;
        border:1px solid #C4C4C4; 
        font:600 12px/1.3 arial,helvetica,sans-serif;
    }
    .biz li {
        float:left;
        width:220px;
        padding:0 10px;
        text-align:right; /*align % entries to the right*/
        color:#666;
    }
    .biz li span { /*bring the float 1st in source order*/
        float:left;
        color:#000;
    }
    </style>
    </head>
    <body>
     
    <ul class="biz">
        <li><span>Business A</span>&nbsp;12.25%</li>
        <li><span>Business B</span>&nbsp;11.15%</li>
        <li><span>Business CC</span>&nbsp;5.35%</li>
    </ul>
     
    </body>
    </html>

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Here are some live demos of definition lists and another UL using spans.

    In particular these two here might be helpful in regards to what you are doing
    2-col-dl
    span-list

  4. #4
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Much appreciated it Rayzur. And thanks for the links, that's nice to know for future reference.

    Post resolved.


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
  •