Search code examples
javascriptphphtmlcssmobile-safari

Safari mobile (iOS 10.2.1) not finding CSS link

I am making a website with HTML, PHP Javscript and CSS. I have HTML, PHP and Javascript in the same document and a link to the CSS file. Am now checking for compatibility with different browsers and noticed that Safari in iOS 10.2.1 doesn't seem to find the CSS. Why is this?

First I tried having all the HTML code printed from inside the <?php ?> (and the Javascript before the PHP code). This worked in most browsers, but at least one version of Firefox had some trouble finding the link to my CSS file (the CSS link was printed from the PHP, but I didn't have the <html>, <head> or <body> tags in this version).

After adding the above mentioned HTML tags outside of the PHP code (and including the CSS link in the head), the HTML now surrounds the PHP and Javascript code (see code below). This solved the Firefox issue. But the CSS now doesn't work in Safari in iOS 10.2.1 (maybe didn't earlier either, never tested).

Basic structure of code:

<!DOCTYPE html>
<html>
    <head>
        <title>Title<title>
        <link rel="stylesheet" href="styles.css">
    </head>

    <body>

    <span class="menu_icon" onclick="openMenu()">&#9776;</span>
    <div class="menu" id="menuId">
        <a href="javascript:void(0)" class="closebtn" onclick="closeMenu()">&times;</a><br>
        <a href="subtests.php?t=7&q=0">Subtest 7</a><br>
        <a href="subtests.php?t=8&q=0">Subtest 8</a>
    </div>
    </body>

<script>
function openMenu() {
    document.getElementById("menuId").style.width = "200px";
}

function closeMenu() {
    document.getElementById("menuId").style.width = "0";
}

function onImageClick(index) {
    document.getElementById("submit_button").style.display = "block";
    document.getElementById("image"+index).style.border = "solid black";
}
</script>

<?php 

//PHP code that sends info to database etc, this code works

?>

</html>
Solution

  • I realised that the Javascript should be inside the body or head of the HTML! Apparently worked for most browsers even with the Javascript outside of head and body, but changing it solved the issue for Safari mobile iOS 10.2.1.