#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2010
    Posts
    3
    Rep Power
    0

    Unhappy Problem with second float:left in Firefox


    The site is here: http://andamu.org/main/yarn/ or "andamu.org /main /yarn"

    The appearance of the date, byline, comments/trackbacks and tags on the left, aligned beneath one another in IE 8 is the desired appearance.

    In Firefox, the date appears in the correct spot, but the rest appears to its right instead of below it.

    (I am modifying the Pico theme in MT5.)

    I'll try to get the relevant bits here, but please ask if I can provide more detail.

    The html part:
    html4strict Code:
     
     <h2 class="date-header">September  6, 2010</h2>
        <div class="asset-footer">
           <p class="asset-footer-info">
               <span class="byline">
                  <span class="vcard author">Sivani</span> 
                      at <abbr class="published" title="2010-09-06T18:47:04-08:00"> 6:47 PM</abbr>
                  </span>    
                  <span class="separator"><br /></span> 
                  <a href="http://andamu.org/main/yarn/2010/09/the-socks-of-doom---part-ii-sucked-in-again.html#comments">
                      No Comments</a>
                  <span class="separator"><br /></span> 
                  <a href="http://andamu.org/main/yarn/2010/09/the-socks-of-doom---part-ii-sucked-in-again.html#trackbacks">
                      No TrackBacks</a>
           </p>
       </div> <!-- class="asset-footer" -->


    The css part:
    Code:
    .date-header {
        float: left;
        text-align: right;
        padding: 5px 20px 4px 0;
        margin-left: 20px;
        border-right: 1px solid #eee;
        width: 128px;
        color: #999;
    }
    .asset-footer {
        float: left;
        text-align: right;
        padding: 5px 20px 4px 0;
        margin-left: 20px;
        border-right: 1px solid #eee;
        width: 128px;
        color: #999;
        clear: all;
    }
    Note: I have tried using clear: all; in the .date-header to no effect.
    Last edited by Sivani; September 20th, 2010 at 01:18 AM. Reason: Hyperlinking the URL
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2010
    Posts
    3
    Rep Power
    0

    Updated browserlist


    Quick update: Browsershots revealed that it "works" in MSIE 6-8, and Avant, but is broken on everything else.

    Originally Posted by Sivani
    The site is here: "andamu.org /main /yarn"

    The appearance of the date, byline, comments/trackbacks and tags on the left, aligned beneath one another in IE 8 is the desired appearance.

    In Firefox, the date appears in the correct spot, but the rest appears to its right instead of below it.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2010
    Posts
    12
    Rep Power
    0
    You could probably do what I said below.

    However you could also add clear: left to asset-footer class and it takes care of the problem in firefox.


    Taking a quick look at this, my first guess would be to try placing the h2 element within the div that has the class asset-footer.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2010
    Posts
    3
    Rep Power
    0

    Smile Thank you!


    Thank you, thank you, thank you!

    I feel like a dunce because it was something so simple, but I can't thank you enough!

    It worked (obviously) :-)

    Originally Posted by bitsnbytes
    However you could also add clear: left to asset-footer class and it takes care of the problem in firefox.

IMN logo majestic logo threadwatch logo seochat tools logo