Search code examples
htmlcssinternet-explorercompatibility

Internet Explorer failing to show elements


For some reason, my website (find-minecraft-servers.com) sometimes displays oddly in Internet Explorer. The number underneath Servers Listed in the green-ish banner sometimes fails to show altogether, like the image below, however when I check the source the number is in there, so it's not an error server-side.

This error is only occasional and appears on IE10. The site is using the Bootstrap framework. Here is the code for the Servers Listed and other statistics elements:

<div class="banner">
        <div class="container" style="background: transparent;">
            <div class="row">
                <div class="col-sm-4 text-center whiteborder">
                    <h1>
                        <?php
                            // connect to mysql
                            require('includes/mysql.php');
                            $totalplayers = mysql_fetch_assoc(mysql_query("SELECT SUM(players) FROM servers WHERE suspended=0"));
                            echo number_format($totalplayers['SUM(players)']);
                        ?>
                    </h1>
                    <h3>PLAYERS ONLINE</h3>
                </div>
                <div class="col-sm-4 text-center whiteborder">
                    <h1>
                        <?php $totalservers = "SELECT * FROM servers WHERE verified=1 AND enabled=1 AND suspended=0"; echo number_format(mysql_num_rows(mysql_query($totalservers)));?>
                    </h1>
                    <h3>SERVERS LISTED</h3>
                </div>
                <div class="col-sm-4 text-center whiteborder">
                    <h1>
                        <?php echo number_format(mysql_num_rows(mysql_query("SELECT * FROM votes")));?>
                    </h1>
                    <h3>TOTAL VOTES</h3>
                </div>
            </div>
            <br />
        </div>
    </div>

SERVERS LISTED number not showing


Solution

  • Well seeing as the div that accompanies the <h1> also accompanies the <h3>, and you say that the h3 consistently displays; I'd hazard a guess and say that the problem lies exclusively with the CSS associated exclusively with the h1.

    The only CSS that is directly associated with the h1 is

    h1{margin:.67em 0;font-size:2em}
    

    Now there isn't anything obviously wrong with this (and it validates fine) though is it possible that that 0 is triggering some strange quirk with IE?

    Sticking the page through an IE6 emulator results in this:

    ie6 emulator

    Clearly broken - BUT the server number still displays.

    FWIW font-size has been supported since IE 5.5.

    So in summation: it is probably just you. If it isn't it is probably because some detail concerning the css (possibly that "0") has made IE go into a panic concerning the isolated set of rules, and do the equivalent of display:none. It is possible that there is some additional rule in your CSS doing odd things (the code isn't exactly setup well for maintainability). But I would say that that is unlikely.