SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Hobart, Australia
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    FF doesn't recognise my class name, but IE does?

    I have a strange problem which for a few hours now I have been unable to solve. I have some code which works great in IE7, but doesn't function properly in FF2.

    I will try to paste as much of the code as I can. (You can just ignore the AJAX code as that isn't affecting what's happening. It's either a JavaScript or CSS problem (I hope anyway!))

    CSS:
    Code:
    .feedbackHidden {
    	display: none;
    	visibility: hidden;
    }
    
    .feedbackVisible {
    	display: inline;
    	visibility: visible;
    }
    
    tr.rowSelectedShow td {
    	background-color: #333333;
    	color: #ffffff;
    }
    
    tr.rowSelectedShow a {
    	color: #ffffff;
    }
    HTML:
    Code:
    <table class="data">
    <thead>
    <tr>
    <th>Feedback ID</th>
    <th>Date</th>
    <th>Client</th>
    <th>Helpdesk ID</th>
    <th>Rating</th>
    <th>Comments</th>
    <th>Follow-up</th>
    </tr>
    </thead>
    <tbody>
    <?php
    $query = "SELECT * FROM feedback ORDER BY date_time DESC LIMIT 20;";
    $viewFeedback = mysql_query($query, $feedback_connection);
    
    while ($feedback = mysql_fetch_array($viewFeedback)) {
    	echo "<tr id=\"row" . $feedback['id'] . "\" class=\"rowSelectedHide\">\r\n";
    	$date_time = strtotime($feedback['date_time']); 
    	echo "<td><a href=\"javascript:javascript:showRow('" . $feedback['id'] . "');\">" . $feedback['id'] . "</a></td>\r\n";
    	echo "<td>" . date("l, jS F, Y h:i:s a", $date_time) . "</td>\r\n";
    	echo "<td>" . $feedback['author'] . "</td>\r\n";
    	if ($feedback['incident_number'] == 0) {
    		echo "<td><em>None</em></td>\r\n";
    	} else {
    		echo "<td>" . $feedback['incident_number'] . "</td>\r\n";
    	}
    	if ($feedback['rating'] == 0) {
    		echo "<td><em>None</em></td>\r\n";
    	} else {
    		echo "<td>" . $feedback['rating'] . "</td>\r\n";
    	}
    	if ($feedback['comments'] == "") {
    		echo "<td><em>None</em></td>\r\n";
    	} else {
    		$trimComments = str_split($feedback['comments'], 50);
    		$arraySize = sizeof($trimComments);
    		if ($arraySize > 1) {
    			echo "<td>" . htmlentities($trimComments[0], ENT_QUOTES) . "...</td>\r\n";
    		} else {
    			echo "<td>" . htmlentities($trimComments[0], ENT_QUOTES) . "</td>\r\n";
    		}
    	}
    	if ($feedback['follow_up'] == 1) {
    		echo "<td style=\"background-color: #ff0000; color: #ffffff;\">Required</td>\r\n";
    	} else {
    		echo "<td style=\"background-color: #0000ff; color: #ffffff;\">No</td>\r\n";
    	}
    	echo "</tr>\r\n";
    	echo "<tr id=\"" . $feedback['id'] . "\" class=\"feedbackHidden\"><td colspan=\"7\"><div id=\"hidden" . $feedback['id'] . "\"></div></td></tr>\r\n";
    }
    ?>
    </tbody>
    </table>
    JS:
    Code:
    function createRequestObject() {
        var ro;
        var browser = navigator.appName;
        if(browser == "Microsoft Internet Explorer"){
            ro = new ActiveXObject("Microsoft.XMLHTTP");
        }else{
            ro = new XMLHttpRequest();
        }
        return ro;
    }
    
    var http = createRequestObject();
    
    function sndReq(action) {
        http.open('get', 'rpc.php?action='+action);
        http.onreadystatechange = handleResponse;
        http.send(null);
    }
    
    function handleResponse() {
        if(http.readyState == 4){
            var response = http.responseText;
            var update = new Array();
    
            if(response.indexOf('|' != -1)) {
                update = response.split('|');
                document.getElementById(update[0]).innerHTML = update[1];
            }
        }
    }
    
    function showRow(id) {
    	var rows = document.getElementsByTagName("tr");
    	var rowToShow = document.getElementById(id);
    	var rows2ToShow = document.getElementById("row"+id);
    	var hideAll = false;
    	var thisDiv, thisDivID;
    
    	/*for (var i = 0; i < rows.length; i++) {
    		thisDiv = rows[i];
    		if (thisDiv.className.match("feedback")) {
    			thisDivID = thisDiv.id;
    			document.getElementById(thisDivID).innerHTML = "";
    		}
    	}*/
    
    	if (rowToShow.className == "feedbackVisible") {
    		hideAll = true;
    	}
    
    	for (var i = 0; i < rows.length; i++)
    	{
    		if (rows[i].className == "feedbackVisible")
    		{
    			rows[i].className = "feedbackHidden";
    		}
    		if(rows[i].className == "rowSelectedShow")
    		{
    			rows[i].className = "rowSelectedHide";
    		}
    	}
    
    	if (hideAll == true) {
    		rowToShow.className = "feedbackHidden";
    		rows2ToShow.className = "rowSelectedHide";
    	} else {
    		rowToShow.className = "feedbackVisible";
    		rows2ToShow.className = "rowSelectedShow";
    	}
    	sndReq(id);
    };
    The table is created correctly in FF but the last row created in the loop:
    Code:
    echo "<tr id=\"" . $feedback['id'] . "\" class=\"feedbackHidden\"><td colspan=\"7\"><div id=\"hidden" . $feedback['id'] . "\"></div></td></tr>\r\n";
    for some reason doesn't display properly.

    It is hidden by default, but as soon as a show is triggered that's when I get strange results. See the IE and FF images below to compare how they look in IE and FF.

    NOTE: If I take out the class attribute for the last row in the loop the table displays correctly. This is why I believe it is a CSS issue, however I'm really just guessing.

    Can anyone see what I'm missing or doing wrong?

    Regards

  2. #2
    SitePoint Enthusiast FSan's Avatar
    Join Date
    Dec 2005
    Location
    San Martin de los Andes, Patagonia Argentina
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I smell an html/css problem.
    Can you post a link to the page or the FULL html code?

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Hobart, Australia
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by FSan View Post
    I smell an html/css problem.
    Can you post a link to the page or the FULL html code?
    I don't have the page live on a website. But I will post the code from the IE browser after it has been loaded. Unfortunately this doesn't include the code brought across from the AJAX. But this code is only being put inside the current table row anyway so I don't expect it would affect this test.

    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link rel="stylesheet" type="text/css" media="screen, projection" href="css/screen.css" />
    <script type="text/javascript" src="js/script.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Information Services / Feedback Form</title>
    </head>
    <body>
    <h1>Information Services Feedback Form</h1>
    <div style="float: right;"><a href="index.php">Feedback Form</a></div>
    <h2>Feedback Administration</h2>
    <p>Listed below are the last 20 entries:</p>
    <table class="data">
    <thead>
    <tr>
    <th>Feedback ID</th>
    <th>Date</th>
    <th>Client</th>
    <th>Helpdesk ID</th>
    <th>Rating</th>
    <th>Comments</th>
    <th>Follow-up</th>
    </tr>
    </thead>
    <tbody>
    <tr id="row26" class="rowSelectedHide">
    <td><a href="javascript:javascript:showRow('26');">26</a></td>
    <td>Thursday, 17th April, 2008 01:06:09 pm</td>
    <td>clifforda</td>
    <td><em>None</em></td>
    <td>5</td>
    <td>This is a test with multiple lines.
    
    Line feeds ...</td>
    <td style="background-color: #b71d01; color: #ffffff;">Required</td>
    </tr>
    <tr id="26" class="feedbackHidden"><td colspan="7"><div id="hidden26"></div></td></tr>
    <tr id="row25" class="rowSelectedHide">
    <td><a href="javascript:javascript:showRow('25');">25</a></td>
    <td>Tuesday, 15th April, 2008 03:33:06 pm</td>
    <td>sandersonm</td>
    <td><em>None</em></td>
    <td>2</td>
    <td><em>None</em></td>
    <td>No</td>
    </tr>
    <tr id="25" class="feedbackHidden"><td colspan="7"><div id="hidden25"></div></td></tr>
    <tr id="row24" class="rowSelectedHide">
    <td><a href="javascript:javascript:showRow('24');">24</a></td>
    <td>Tuesday, 15th April, 2008 01:20:12 pm</td>
    <td>sandersonm</td>
    <td><em>None</em></td>
    <td>5</td>
    <td>I had a great time thanks!</td>
    <td>No</td>
    </tr>
    <tr id="24" class="feedbackHidden"><td colspan="7"><div id="hidden24"></div></td></tr>
    <tr id="row23" class="rowSelectedHide">
    <td><a href="javascript:javascript:showRow('23');">23</a></td>
    <td>Tuesday, 15th April, 2008 12:37:56 pm</td>
    <td>garthc</td>
    <td><em>None</em></td>
    <td>2</td>
    <td>Looks cheap :P</td>
    <td>No</td>
    </tr>
    <tr id="23" class="feedbackHidden"><td colspan="7"><div id="hidden23"></div></td></tr>
    <tr id="row22" class="rowSelectedHide">
    <td><a href="javascript:javascript:showRow('22');">22</a></td>
    <td>Tuesday, 15th April, 2008 11:59:11 am</td>
    <td>clifforda</td>
    <td><em>None</em></td>
    <td>5</td>
    <td><em>None</em></td>
    <td>No</td>
    </tr>
    <tr id="22" class="feedbackHidden"><td colspan="7"><div id="hidden22"></div></td></tr>
    <tr id="row21" class="rowSelectedHide">
    <td><a href="javascript:javascript:showRow('21');">21</a></td>
    <td>Tuesday, 15th April, 2008 11:58:55 am</td>
    <td>clifforda</td>
    <td><em>None</em></td>
    <td><em>None</em></td>
    <td>test</td>
    <td>No</td>
    </tr>
    <tr id="21" class="feedbackHidden"><td colspan="7"><div id="hidden21"></div></td></tr>
    <tr id="row20" class="rowSelectedHide">
    <td><a href="javascript:javascript:showRow('20');">20</a></td>
    <td>Tuesday, 15th April, 2008 11:55:13 am</td>
    <td>greenb</td>
    <td>666</td>
    <td>1</td>
    <td>Bring the Pain Boy</td>
    <td>No</td>
    </tr>
    <tr id="20" class="feedbackHidden"><td colspan="7"><div id="hidden20"></div></td></tr>
    <tr id="row19" class="rowSelectedHide">
    <td><a href="javascript:javascript:showRow('19');">19</a></td>
    <td>Tuesday, 15th April, 2008 11:53:00 am</td>
    <td>smithg</td>
    <td><em>None</em></td>
    <td>3</td>
    <td>I am satisfied with Alex Cliffords performance in ...</td>
    <td style="background-color: #b71d01; color: #ffffff;">Required</td>
    </tr>
    <tr id="19" class="feedbackHidden"><td colspan="7"><div id="hidden19"></div></td></tr>
    <tr id="row18" class="rowSelectedHide">
    <td><a href="javascript:javascript:showRow('18');">18</a></td>
    <td>Tuesday, 15th April, 2008 11:49:11 am</td>
    <td>smithg</td>
    <td><em>None</em></td>
    <td>5</td>
    <td>Glenn Smith worked really really hard today and de...</td>
    <td>No</td>
    </tr>
    <tr id="18" class="feedbackHidden"><td colspan="7"><div id="hidden18"></div></td></tr>
    <tr id="row17" class="rowSelectedHide">
    <td><a href="javascript:javascript:showRow('17');">17</a></td>
    <td>Tuesday, 15th April, 2008 11:33:55 am</td>
    <td>clifforda</td>
    <td><em>None</em></td>
    <td>1</td>
    <td><em>None</em></td>
    <td style="background-color: #b71d01; color: #ffffff;">Required</td>
    </tr>
    <tr id="17" class="feedbackHidden"><td colspan="7"><div id="hidden17"></div></td></tr>
    <tr id="row16" class="rowSelectedHide">
    <td><a href="javascript:javascript:showRow('16');">16</a></td>
    <td>Tuesday, 15th April, 2008 11:32:18 am</td>
    <td>clifforda</td>
    <td>8009</td>
    <td>5</td>
    <td>This is a test comment!</td>
    <td>No</td>
    </tr>
    <tr id="16" class="feedbackHidden"><td colspan="7"><div id="hidden16"></div></td></tr>
    <tr id="row15" class="rowSelectedHide">
    <td><a href="javascript:javascript:showRow('15');">15</a></td>
    <td>Tuesday, 15th April, 2008 11:31:48 am</td>
    <td>clifforda</td>
    <td>8009</td>
    <td>1</td>
    <td>This is a test comment!</td>
    <td style="background-color: #b71d01; color: #ffffff;">Required</td>
    </tr>
    <tr id="15" class="feedbackHidden"><td colspan="7"><div id="hidden15"></div></td></tr>
    </tbody>
    </table>
    </body>
    </html>

  4. #4
    SitePoint Enthusiast FSan's Avatar
    Join Date
    Dec 2005
    Location
    San Martin de los Andes, Patagonia Argentina
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I still can't replicate the problem. Post the entire css too.
    One thing... all your id values are numbers and that's invalid. It probably has nothing to do with your issue but you might want to consider correcting it... perhaps just prepend a letter (a_)

    Post the css

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Hobart, Australia
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by FSan View Post
    I still can't replicate the problem. Post the entire css too.
    One thing... all your id values are numbers and that's invalid. It probably has nothing to do with your issue but you might want to consider correcting it... perhaps just prepend a letter (a_)

    Post the css
    It does it without the rest of the CSS. It's definately only to do with this CSS or JS

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You set a <tr>'s display property to "inline"? That's your problem. Except in IE5-7 the <tr>s have a default display property value of "table-row". Setting it to anything other than that and "none", like "inline" or "block", causes strange problems.

    Why are you setting the display and visibility properties anyway?

    Do you really need the "feedbackVisible" class?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    SitePoint Enthusiast FSan's Avatar
    Join Date
    Dec 2005
    Location
    San Martin de los Andes, Patagonia Argentina
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK. But without the rest of the css I can't see the problem. And since you are using the js to generate/manipulate the html and the html you posted looks ok, apart from the id s thing which doesn't seem to be triggering quirks mode, it's got to be something with the css

  8. #8
    SitePoint Enthusiast FSan's Avatar
    Join Date
    Dec 2005
    Location
    San Martin de los Andes, Patagonia Argentina
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    You set a <tr>'s display property to "inline"? That's your problem. Except in IE5-7 the <tr>s have a default display property value of "table-row". Setting it to anything other than that and "none", like "inline" or "block", causes strange problems.

    Why are you setting the display and visibility properties anyway?

    Do you really need the "feedbackVisible" class?
    Even I still can't replicate your problem Kravvitz is right. Try only display:table-row/none and see if it fixes it

  9. #9
    SitePoint Enthusiast FSan's Avatar
    Join Date
    Dec 2005
    Location
    San Martin de los Andes, Patagonia Argentina
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Better yet. Use visibility: hidden/collapse
    Collapse: When used in table elements, this value removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content. If this value is used on other elements, it renders as "hidden"
    http://www.w3schools.com/css/pr_class_visibility.asp

  10. #10
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE5-7 support neither visibility:collapse nor display:table-row.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  11. #11
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,603
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Try specifying the tr display property as '' and none for the switch. Hopefully '' will be taken to be whatever value the given browser expects it to have.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  12. #12
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Hobart, Australia
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you VERY much for all your feedback everyone! Yes the problem was that I was setting the display style for the tr to inline/block. If I set it to ANYTHING else it takes on the browser's default setting. So I just set it to display: ''; and that works a charm.

    Your help was much appreciated, I was pulling my hair out!

    Regards.


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
  •