CODEWITHSUNDEEP
phphtmlcss
Guitrum
Guitrum

Reputation: 191

CSS that is only applying on mobile without anything to tell it to do so

I am trying to have the sprite that shows up beneath these links to change based on what the URL says so when you click on the link for "Home" and are directed to index.php, the button in the menu bar now has a separate sprite.

The interesting thing, is that it works beautifully whenever I visit my site on mobile, however it does not want to work when I view it on a computer.

Here is a summary of my code:

<div id="nav">
    <span>
        <br><br>
        <?php
        $host = $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
        if (strpos($host, 'index.php') !== false) {
            echo "<span><a href='index.php'>Home</a></span>";
        } else {
            echo "<a href='index.php'>Home</a>";
        }
        ?>
    </span>  
</div>

With the corresponding CSS:

span span a {
    display: block;
    background: url(../images/button_sprite_selected.png) no-repeat;
    height: 80px;
    width: 164px;
}

span a {
    display: block;
    background: url(../images/button_sprite.png) no-repeat;
    height: 80px;
    width: 164px;
}

This is also my first post here and am fairly new to coding with php! Let me know if there is any other information I must include or if the URL to my website would help or not.

Thanks!

Upvotes: 0

Views: 41

Answers (1)

Amo
Amo

Reputation: 2944

I suspect the issue is because of the second 'span a' in the CSS causing selector rules not to be set correctly. I'd consider using a class rather than relying on spans.

Setting an 'active' class to the link you wish to change is a good way to solve the issue:

<div id="nav">
    <span>
    <br><br>
    <?php
    $host = $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
    if (strpos($host, 'index.php') !== false) {
        echo "<span><a class='active' href='index.php'>Home</a></span>";
    } else {
        echo "<a href='index.php'>Home</a>";
    }
    ?>
 </span>  
</div>

span span a.active {
    display: block;
    background: url(../images/button_sprite_selected.png) no-repeat;
    height: 80px;
    width: 164px;
}

span a {
    display: block;
    background: url(../images/button_sprite.png) no-repeat;
    height: 80px;
    width: 164px;
}

Upvotes: 1

Related Questions