Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS display:none for one div causes font change in an unrelated div(Safari only)

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #294947
    TLF
    Participant

    I’m making a publishing tool for our podcast hosts. It validates fully and is fine on Firefox, Chrome and Opera. But on Safari there is an issue that is visible and concerns two elements.

    There is a div in the top of the screen with id “top-table-div”, containing small blue text.
    There are columns beneath contained in

    <

    ul>s with larger silver text such as “Meet the new key, same as the old key”.

    Problem: When “top-table-div” has ‘display’ set to ‘none’, the silver font in the columns below appears visibly ‘fatter’.
    Further problem: Web Inspector shows no sign of any property actually changing to cause the text, which is already bold, to become ‘fatter’.

    When it’s set back to ‘block’, the text looks fine again. This property is switched every 5 to 10 seconds by some Javascript, but even with JS disabled, changing the property in the browser inspector has the same effect.

    Can anyone put me out of my misery? I’ve tried removing all Javascript references to my CSS files (inline CSS still exists) and removing the Google Font, but the behavior is the same.

    Page in question: http://amigausers.ie/LCARSpractical/LCARS.html
    Validation https://validator.w3.org/nu/?doc=http%3A%2F%2Famigausers.ie%2FLCARSpractical%2FLCARS.html

    For those without Safari, this is the font on page load https://ibb.co/bQ63MPK and this is it after the unexplained effect https://ibb.co/6WsqFCR

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.