SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    why the time part can't locate to the right side and the same line with the test one

    Code:
    <ul>
            <li><a href="#">test one<span>2011-06-21</span></a></li>
            <li><a href="#">test one<span>2011-06-21</span></a></li>
            <li><a href="#">test one<span>2011-06-21</span></a></li>
            <li><a href="#">test one<span>2011-06-21</span></a></li>
            <li><a href="#">test one<span>2011-06-21</span></a></li>
            <li><a href="#">test one<span>2011-06-21</span></a></li>
          </ul>

    the css:
    Code:
    ul {
        line-height:28px;
    }
    
    ul li a {
        padding-left:20px;
        color:#2e2e2e;
        font-size:14px;
        text-shadow:#FFF 1px 1px;
    }
    
    ul li a span {
        float:right;
    }
    why the date part can't locate to the right side and the same line with the test one text under IE7,6? but ok under firefox. how to correct it. thank you

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    An easy way to make that work is to move the span first:

    Code:
    <li><a href="#"><span>2011-06-21</span>test one</a></li>

  3. #3
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    An easy way to make that work is to move the span first:

    Code:
    <li><a href="#"><span>2011-06-21</span>test one</a></li>
    yeah,you're right. why changes the order. it can ok under IE?

  4. #4
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    anyone helps? why changes the order. it can ok under IE?

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    If you change the order, it will work in IE. Is that what you are asking?

  6. #6
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    If you change the order, it will work in IE. Is that what you are asking?
    yeah,you're right.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    So you are happy, or is there still a question? There are no doubt other ways to do this, but that's the easiest. If you want to keep the order of the HTML, you could set the text to text-align: right and wrap the span around the "test one" and float that left instead of floating the date to the right.

    <li><a href="#"><span>test one</span>2011-06-21</a></li>

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by runeveryday View Post
    why the date part can't locate to the right side and the same line with the test one text under IE7,6? but ok under firefox. how to correct it. thank you

    Floats must come first before the content that you want them to wrap around. A float will float either left or right from the position it finds itself in. As a float is basically a block display element it will start on a new line which means that any content that came before will always be above it.

    Only following content will wrap around the float. If this wasn't the case then all floats would go to the top of the monitor and stay there and be useless

    There is one caveat to this and if a float starts on the same line as some inline content then the content on that single line is displaced to allow the float to occupy its position. This is the part that IE7 and under get wrong and for them floats must always come first. Therefore if you want some text next to a float then make sure the float is first in the html.

    If you don't want to change the order of the text in the html then wrap the span around the first segment and set it to float:left and the set the parent to text-align:right .

    e.g.
    Code:
    li{text-align:right;overflow:hidden}
    li span{float:left}
    Code:
    <li><a href="#"><span>test one</span>2011-06-21</a></li>

  9. #9
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    many thanks ,Paul O'B .you made me know a lot.


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
  •