CSS messed up in Safari

  • Hi Folks,

    I’m designing a document page for a friend and using a child theme for a theme called “Simpelli”. I’ve enqued a specific style sheet to deal with the typography and layout we need for document styles.

    I’m using a particular style for blockquote sections (which are actual quotes), and then a separate style for the quote-author’s attribution. On Firefox, things don’t look too bad. But in Safari, the Quote Author class is squashed up against the blockquote itself.

    Also, in Safari, bold sub-headlines are not rendered properly in bold.

    Thanks for any hints on how I can correct this.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • This is what I would do:
    Firstly, have you checked that the css and html are well formed ? Browsers vary considerably as to how they deal with irregularities, some seem to say “I get what you mean”, while a stricter one says “not doing it”. Use one of the online testing sites like:
    https://validator.w3.org/
    https://jigsaw.w3.org/css-validator/
    I see errors like: “Element blockquote not allowed as child of element ol in this context.”

    If you are still stuck, then, using the browser inspectors in safari and say firefox, I would compare how the composing blocks/paragraphs etc (div and p) are behaving. How are they nesting and spacing, how do they flow ? I would probably even sketch what was happening.

    How fonts render can vary on the fonts available, same as to which weights are available. For example “font-weight: 400;” may render the same as a weight of 500, while on a different browser it jumps to a heavier render.

    Welcome to the pitfalls of web design and development!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS messed up in Safari’ is closed to new replies.