Author Topic: Layouts, Fonts & IE9  (Read 1115 times)

T-Bone

  • Full Member
  • ***
  • Posts: 170
    • View Profile
Layouts, Fonts & IE9
« on: November 25, 2011, 10:04:54 AM »
Working on a new layout and attempting to solve the pesky "screen keeps changing sizes as the clock ticks down" problem. Searched an old hard drive and discovered I had Monotype's Arial Monospaced Bold postscipt font. Aha, that should do it! Installed and screens remained constant...it's just the font appeared to be something like Times New Roman. Well, maybe IE9 has a problem with postscript fonts? Let's drop 25-bucks on the TrueType version. Now the font looks correct but the screen is "jumping" as the clock counts down. Finally used Arial Unicode MS and display--while not exactly matching proportional Arial--looked OK and cell size remained the same throughout a full 20 minute round. What this world needs is a good visual layout editor and more free fonts!

Hope everyone is enjoying the Thanksgiving holiday. I was until I spent $25 which could have gone toward Black Friday.
If it ain't naked, deep-fried or poker-related, I ain't interested!

jodybingo

  • Hero Member
  • *****
  • Posts: 656
    • View Profile
    • Personal Web Site
Re: Layouts, Fonts & IE9
« Reply #1 on: November 25, 2011, 03:40:06 PM »
I solved this by giving the cell a static size (width and height) in pixels..nothing shifted after that

Corey Cooper

  • Administrator
  • Hero Member
  • *****
  • Posts: 5381
    • View Profile
Re: Layouts, Fonts & IE9
« Reply #2 on: November 25, 2011, 09:25:04 PM »
Going a step further, you can "encase" your clock in an HTML <div> element, and by giving it the right style attributes you can prevent it from shifting anything around.  You'll need to determine the height and width of your clock, but you can experiment to obtain that.  Change the HTML of your clock cell to:

<div style="height: 200px; width: 500px; overflow: hidden"><clock></div>

Setting the overflow attribute to hidden tells the div that even if the contents (the clock in this case) is bigger than 500x200 pixels, to crop it (just chop it off).  Basically, this means the div will be 500x200 pixels no matter what.  You can adjust this until it fits your clock exactly.

T-Bone

  • Full Member
  • ***
  • Posts: 170
    • View Profile
Re: Layouts, Fonts & IE9
« Reply #3 on: November 26, 2011, 02:36:17 AM »
Thanks, guys. I had already set the clock to a static size via height & width but had completely forgotton about the <div> trick which I've used in the past on other layouts. I'll give it a try. In my own defense, most of my experience in I.T. was in management--not actually doing anything!  ::)
If it ain't naked, deep-fried or poker-related, I ain't interested!