There are two reasons why the #ballon doesn't show up in Chrome. First is this:
Code:
<div hidden
class="notice" id="notice">
As far as I know that's non-standard. But it has the effect of rendering that div display: none; in Chrome, which is also why you could use such a large top margin on the columnblock div and not have it look as it does in IE 10.
Get rid of it (the non-standard hidden
attribute), and use the styles from my last post to correct what that will do to the layout.
Second is this (the code used to show #ballon when the required information hasn't been chosen yet). Look at the end:
Code:
$("#getResults").click(function(e) {
e.preventDefault();
var Food = $('#Food').val();
var Place = $('#Place').val();
var Filter = $('#Filter').val();
if(Food&&Place&&Filter){
//alert("Three Selections Made! 335")
$.post("Scripts/threeSearch.php?t="+new Date().getTime(),
{"Food":Food,"Place":Place,"Filter":Filter}, function (html) {
$("#ballon").css('visibility','hidden');
$("#results").html(html);
$("#results").addClass("beautifulData").beautify({ pageSize : 25, pagerSize : 5 });
});
}
else if(Food&&Place) {
//alert("Two Selections Made! 344")
$.post("Scripts/twoSearch.php?t="+new Date().getTime(), {"Food":Food,"Place":Place}, function (html) {
$("#ballon").css('visibility','hidden');
$("#results").html(html);
$("#results").addClass("beautifulData").beautify({ pageSize : 25, pagerSize : 5 });
});
}
else {
//alert("Please Select One From Each Box 353")
$("#ballon").css('visibility','display');
}
});
That's also non-standard. It needs to be:
Code:
$("#ballon").css('visibility','visible
');
The browser cache may need to be cleared and/or the page refreshed to see changes.
Bookmarks