Dock font displays awful in IE

Dock font displays awful in IE

by Miriam Laidlaw -
Number of replies: 4
Picture of Plugin developers

Does anyone know how to get around this?

Browsers from left to right:

Firefox 10, Google Chrome 17.0.963.56, Opera 11, IE 9

IE fail

When I turn compatibility view on:

Compatibility

It looks like this:

Compatibility on

However, I want it to look like the other browsers even when the text is going sideways. And no amount of font-weight: normal seems to be helping.

Edit: Ok, for some reason nothing I do to the fonts in the dock items gets applied. I can't seem to change their colour or size. Have been at the computer for way too long. If someone has a solution, great. Otherwise, I will tackle it again in the morning!

Average of ratings: -
In reply to Miriam Laidlaw

Re: Dock font displays awful in IE

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi,

I am just smiling at the title of your theme. After a discussion in this Forum last week, I made a theme on a FREE template called Pink Round, but changed the name to Pretty in Pink!  I just loved the movie! smile

Getting back to the docked titles in IE9 have you tried looking at the CSS which triggers this by using F12 (Function Key 12) this opens a window simiar to Firebug and allows you to look at and adjust the CSS. By finding the YUI Combo file that adds the CSS into this page you can uncheck the various CSS selectors which govern the styles.

I keep meaning to try this for the dock but haven't found the time, but did spend hours faffing about when we had the problem with YUI CSS and the custommenu, where IE always added the opaque overlay ontop of the menu bar. So this text shadow in the docked title could well be YUI CSS as I dont see why IE9 should decide to add such, do you?

You can also mimic IE7 & IE8 behaviour by changing IE9 Browser Mode and IE9 Document Standards to IE7 or IE8 mode and standards, as well as throw IE9 into Quirks mode with IE7 Standards...this really screws up the page!

Hope this helps?

Mary

In reply to Miriam Laidlaw

Re: Dock font displays awful in IE

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Further to my last comment...I can confirm it is YUI CSS that is overriding theme CSS and making the H2 title BOLD (see image below - achived using F12)



You could try...

h2.filterrotate { font-weight: normal !important;}

Hope this helps?

Mary

In reply to Miriam Laidlaw

Re: Dock font displays awful in IE

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi,

Just incase you are trying this out and run into problems...I missed off the first part of this in my explanitory diagram. You need to FIRST select the CSS section next to HTML. Then SELECT the tile name in the dock using the arrow pointer. Then click 'Trace CSS'. It then jumps back to the HTML page itself to reveal the highlighted sections.

Hope you are haing some success with this. Now thing I did find out that if the text is white there is no font-weight applied as it looks perfect.

Mary

In reply to Mary Evans

Re: Dock font displays awful in IE

by Miriam Laidlaw -
Picture of Plugin developers

Hi there Mary,

I can confirm that when the font is white, it does indeed display normal! How odd. I even tried specifying the black font color in case for some strange reason having the color element was affecting it. No such luck.

Font white (same range of browsers - Firefox, Chrome, Opera then IE):

white font

I added in various different forms of the suggested code, right down to:

#dock .dockedtitle .filterrotate h2 { font-weight: normal !important;}

When using IE to inspect the element, from what I can TELL from looking at the CSS at the right, the font weight should be normal?

font weight normal

And using Trace Styles

trace styles

Yet it is definitely not displaying normal. Ugh.