Search code examples
csssafarirefreshstylesheet

CSS changes on refresh


The contacts page of this website is fully functional, but when you refresh the page the CSS property display:inline; for the navigation list becomes void. This problem only exists in Safari.

The same CSS stylesheet is used for two other pages and they are fine, so I'm very confused!

http://www.katieburchett.co.uk/Contacts.html


Solution

  • For starters, your HTML markup is invalid. As long as that's the case, I'd expect any behavior to be undefined and browser-specific. You have this:

    <ul>
        <a href="index.html">
            <li>Home</li>
        </a>
        <!-- and so on -->
    </ul>
    

    According to the spec, only li elements are permitted as immediate children of ul elements. So the markup should be this:

    <ul>
        <li>
            <a href="index.html">Home</a>
        </li>
        <!-- and so on -->
    </ul>
    

    After making that change, of course, you may need to adjust your CSS selectors/rules to account for the new markup.

    Any time you're seeing strange markup/style behavior, especially when it's browser-specific, the first thing you should do is validate your code.