Weird discoloration in IE

[Mike]

Don't we love the incompatilibities of Mozilla and IE. At a site I'm
working on which domain is jnation and which is at a dot com (must
fool spiders) the poll looks smooth and perfectly gray in Mozilla. Go
to IE and the radio buttons seem to have a slight discoloration around
them and I'm not sure why. Could there be some style sheet that is
affecting only IE? I'm sure that others have come across this issue
many times.

Thanks much for your help in advance.

Sam

 

[Toby Inkster]

Don't we love the incompatilibities of Mozilla and IE. At a site I'm
working on which domain is jnation and which is at a dot com (must
fool spiders) the poll looks smooth and perfectly gray in Mozilla. Go
to IE and the radio buttons seem to have a slight discoloration around
them and I'm not sure why.

IE's radio buttons are drawn by the operating system, which is why they
cause certain visual artifacts.

That said, slight dicolouration around the radio buttons is the least of
your problems.

Firstly you are forcing microfonts. You have "font-size:10px" everywhere.

Your design also includes vast quantities of wasted space on the left and
right of the content.

See:

http://examples.tobyinkster.co.uk/jnationshot.jpeg
(1920x1440, 207 kbytes)

http://examples.tobyinkster.co.uk/jnationshot-scaled.jpeg
(960x720, 64 kbytes)

 

[Mike]

IE's radio buttons are drawn by the operating system, which is why they
cause certain visual artifacts.

That said, slight dicolouration around the radio buttons is the least of
your problems.

Firstly you are forcing microfonts. You have "font-size:10px" everywhere.

Your design also includes vast quantities of wasted space on the left and
right of the content.

See:

http://examples.tobyinkster.co.uk/jnationshot.jpeg
(1920x1440, 207 kbytes)

http://examples.tobyinkster.co.uk/jnationshot-scaled.jpeg
(960x720, 64 kbytes)

Awesome graphic!!! Thanks for the reply. What I don't understand is
why it is "wasted space." I've made the design a fixed width so that
it is easy to view within a browser and it centers itself.

Regarding the font-size: 10px, I have to find out whether that is the
poll box (which seems a bit of a mess thanks to ta script that I'm not
altogether please with) or elsewhere which should be css enabled. I'm
not sure why 10px is bad unless you are talking about it being a
visual issue for many viewers. I plan to resize the right nav to
appear larger.

Lastly, I fixed the discoloration around the buttons (It is #C7C7C7)
by modifying the colors around it to match. Weird that Mozilla doesn't
do this and works perfectly. IE, IE, IE....

Many thanks for your input and truly much appreciated.

Mike

 

[Toby Inkster]

I'm not sure why 10px is bad

Three reasons:

1. It is probably not the user's preferred font size. Browser allow users
to choose their favourite font size. Your site does not respect this
choice.

2. To make matters worse, as it's specified in pixels (rather than
percentages, ems, exs or key words) it triggers a particularly annoying
bug ("feature") in Internet Explorer that prevents the user from being
able to resize it.

3. And to make matters even worse, it's likely to be pretty small. On a
typical monitor (1024x768, 15" CRT, 14" viewable) it is going to be about
2.75mm high. The typical print in a book is about 4.25mm high. And
whatsmore, the fonts in a book have crisper edges and better defined
lines and curves than on-screen fonts.

So your font will likely be too small to read easily and impossible to
resize in Internet Explorer (which is used by about 85% of the market
right now, though dropping pretty quickly).