Question about appearance change after upgrading from FF 1.0x to 1.05

Discussion in 'HTML & Website Design' started by Space Goat, Feb 2, 2006.

  1. #1
    The appearance of one of my tables changes for the worse after an upgrade from Firefox 1.0x to Firefox 1.5. Here's an example of the appearance in Firefox 1.0x. And here's the same thing in Firefox 1.5.

    How could I restore the FF 1.0x appearance in FF 1.5?

    Here's the code I'm using to create the table:

    print "<table class=\"screedheader\" cellspacing=\"0\" cellpadding=\"0\">
        <tr>";
        
        if ($i % 2) {
        
            $picture = hyperquillside;
            $alt = "Quill";
            
        } else {
        
            $picture = hyperscrollside;
            $alt = "Scroll";
            
        }
            
            print "<td class=\"screedheadside\" rowspan=\"2\"><img src=\"http://www.hypersyllogistic.com/images/".$picture.".gif\" width=\"70\" height=\"70\" title=\"".$alt."\" alt=\"".$alt."\" /></td>
            <td class=\"screedheadright\"><p class=\"screeddate\"><b>{$maxdate}</b> | {$time} EST | <i>{$screed_author}</i>";
            
            if ($permarray['hyper_mask'] == 2) {
                print " (<a href=\"admin/screedform.php?screed_id={$screed_id}\">Edit</a> | <a href=\"admin/delete.php?screed_id=$screed_id\" onclick=\"javascript:return confirm('Are you sure you want to delete this screed?')\">Delete</a>)";
             }
            
        print "</p></td>
    
        <td align=\"right\"><p class=\"emailtofriend\"><i>The Latest Screeds</i> | <b><a href=\"http://www.hypersyllogistic.com/emailscreed.php?screed_id={$screed_id}\">E-mail this screed to a friend</a></b></p></td>
        
        <tr>
            <td class=\"screedheadright\" colspan=\"2\"><h4>{$screed_title}</h4></td>
        </tr>
        </tr>
    </table>";
    PHP:
    And here's the CSS governing the table:

    .screedheader {background-image: url(../images/blueheaderbg.gif); background-repeat: repeat-x; border: 0px; width: 100%; margin-top: 20px; margin-bottom: 14px}
    
    .screedheader a:link, .screedheader a:active, .screedheader a:visited {color: #FFFF00; text-decoration: none}
    
    .screedheader a:hover {text-decoration: underline}
    
    .screedheadside {width: 70px; height: 70px}
    
    .screedheadright {vertical-align: middle}
    Code (markup):
    Thanks! :D
     
    Space Goat, Feb 2, 2006 IP
  2. gordonfreeman

    gordonfreeman Peon

    Messages:
    169
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    At first I thought it might have something to do with valign, as in FF 1.0.x automaticaly assumes that valign is middle, and in FF 1.5 valign is top by default... however this is not the case, since you do have vertical align middle in the css..

    The other thing I can think of (and that may be it), is the fact that in FF 1.0.x, cells with unspecified height would go as long as the adjanted cell goes (70px in your case, the cell with the picture, and the other rows distribute so each row occupies 50% of the height), but in FF 1.5 they might go as long as the elements insides it are (the text, which is only about 20px of height). So, basicaly, add a height: 35px; in the .screedheadright (and also make the td with the email to friend stuff a screedheadright class, and keep the align="right")
     
    gordonfreeman, Feb 2, 2006 IP
  3. Space Goat

    Space Goat Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Unfortunately, if I add a height attribute to screedheadright, either nothing happens, or else the height of the blue bar exceeds the height of the picture to the left.
     
    Space Goat, Feb 2, 2006 IP