Help required to sort glich between Safari & Firefox

[jhatter]

Hi,

Please can someone make a suggestion to iron out a glich when viewing a site in Safari & Firefox. Here is the page:

www.johnhathway.co.uk

On the page there are two links which have been styled in red with an underline on hover. (Contact Me & Enter Flash Site) The code can be viewed in the source and the style in the Head.

If I view it online, on a Mac in Firefox everything appears OK.
If I view it in Safari from my hard drive everything appears OK.
But If I view it online, on a Mac in Safari the link text "Enter Flash Site" is larger and in grey!

If I replace the link code on "Enter Flash Site" to "mailto:.....", everything appears OK.

Thanks in anticipation of your help

[almostbob]

pixel measurements, seriously suck,
table layout -suck, tables delay page display until everything is downloaded,

CSS layout, ems %ages

I have 2040 x 1536px resolution, 10px is invisible, the entire page does not occupy 10% of the screen
all sizes should be relative, in em or % so that the sizes adjust around the base font on the user's computer, and screen size.

For example Grandma has her base font set to 26px her eyes are bad, your 10px link text is a blurry blob, Granny goes to google to find a site she can read.

images should be scalable so that and be effective at
800*600 1024*768 1200*900 2040*1536,
with the window taking any proportion of the screen

the color/size change, dunno, the css specifies grey on mouseover, red, I am getting 50-50 for the link to be the wrong size in Opera, IE as well as safari, no consistent response in either, in IE its working some of the time

look at your page in a different view, a mobile phone browser

http://demo.opera-mini.net/demo.html?http://www.users.waitrose.com/~johnhathway/

[Fest3er]

... If I view it online, on a Mac in Firefox everything appears OK.
If I view it in Safari from my hard drive everything appears OK.
But If I view it online, on a Mac in Safari the link text "Enter Flash Site" is larger and in grey!

If I replace the link code on "Enter Flash Site" to "mailto:.....", everything appears OK.

Thanks in anticipation of your help

You're welcome.

Geez. Ask a simple question involving an undocumented feature of a browser and you get excoriated for not writing perfect code that would please 6 billion people all at once using every possible browser and every possible size display.

[begin rant] Welcome to the wonderful, wild world of every browser using its own renderer. As was said of the X.25 protocol many years ago, everyone implements the spec differently, and none of them implement it right. And the spec leaves a bit to be desired as well. Specifically, inheritance doesn't always work the way it should. Safari, Konqueror, Firefox, Netscape, Mozilla, IE, Opera, Ephiphany on various platforms all render HTML differently. They all get different things right, and they all get different things wrong. That's fine for them, but it reflects poorly on the industry and makes writing web sites a living hell for many. [end rant]

If I had to guess, I'd say that there's a difference between the default <p> style and the parsed <p> style between the Safari online and direct. Or the parser simply handles the two differently, regardless of style.

You could try enclosing the 'enter' reference within a <span> or <p> pair that sets the style. You could try setting the style in the <td> tag or in the <a> tag. Shoot, just putting plain <p>...</p> around the reference (but inside the <td> tags) might change the way it works.

[MidiMagic]

There are also browser settings that can override any changes a page makes to link colors.

It is bad business to change link colors, because it can render the page inaccessible to people who set standard link colors for accessibility reasons.