SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Singapore
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pre tag styles doesn't get executed in Safari

    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...s-part-1-html/

    Thanks!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Looks fine in Safari to me. Have you since added the <code> tags?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Singapore
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I see Source Code Pro in Chrome and Safari.

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

    Code:
    pre {word-wrap: break-word;}
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Singapore
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Weird.

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

    Thanks for checking it out for me ralph

    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. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Zell Liew View Post
    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..
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Singapore
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Zell Liew View Post
    Must I set overflow to none in the media queries for mobile if I were to set word wrap?
    Nah, leave it as is.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Singapore
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great. Thanks for the help ralph. You rock


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •