Pre tag styles doesn't get executed in Safari

HTML & CSS
1

Hi, I’m just wondering how do you guys remedy the problem with pre tags styles not rendering in Safari?

I’m having an issue placing codes on my site and Safari is driving me absolutely nuts since its not rendering anything that I styled with pre tags. Chrome however, renders fine.

Here’s an example page to show my problem: http://www.zell-weekeat.com/creating-web-layouts-part-1-html/

Thanks!

2

Looks fine in Safari to me. Have you since added the <code> tags?

3

Yup. I 've wrapped each code blocks with <pre> and <code>.

Did you see the font as Proxima Nova in Safari? I changed my fonts to Source Code Pro in my style sheets and my Safari is still showing Proxima Nova. Also, I configured word wrap but it didn’t get wrapped. Instead, it flowed right out of my text content block.

4

I see Source Code Pro in Chrome and Safari.

How did you try to set word wrap? Did you try—

pre {word-wrap: break-word;}
5

Weird.

I did a restart on my computer and everything now seemed fine.

Thanks for checking it out for me ralph :slight_smile:

Am now thinking whether a word wrap or a overflow would do better for code blocks. I usually see overflow-x more often than word wrap…

6

I do overflow: auto for the <pre> and I add word-wrap for mobiles (via @media), as I find overflow on mobiles either doesn’t work or is really difficult to use.

7

Sounds like a great plan.

Must I set overflow to none in the media queries for mobile if I were to set word wrap?

8

Nah, leave it as is.

9

Great. Thanks for the help ralph. You rock :slight_smile: