Apparent incompatibility between IE6 and Mozilla Firefox 1

[colin4228]

I am a complete newcomer to HTML., attempting to teach myself how to put a simple website together.

The website will comprise of a main page and several sub-pages, with the means supplied of navigating freely between these.

To do this, I inserted "a href" tags such as this :-

<a href="page1.htm"><p style = "font-family:arial;color:#ffffff;">Page 1 : Who are we and how to contact XYZ ltd.</a></p>

The purpose of this line of code is to establish a link to another page, stored as file "page 1" and for the text of the link to be displayed in WHITE font.

This works fine if I read the page using IE6. However if I use the Mozilla Firefox browser, it appears to ignore the color instruction and opens the text in BLUE. Since my page background colour is also BLUE, this results in the link being invisible.

Originally I wrote the code .....color:white..... but the effect was the same. IE6 understood it, but more than one Mozilla Firefox versions did not.

Can anyone please suggest why these two browsers appear to interpret the same code differently?

colin4228

 

[vacunita]

You have to maintain parity with your tags.

If you open a tag inside another tag as you are doing with the paragraph tag inside the href tag, then that tag must close inside the href tag as well. Not oustside it.

[red]<a href="...">[/red][blue]<p>[/blue]...[blue]</p>[/blue][red]</a>[/red]


Also just so you know IE6 tends to not do things according to the norm unless a full and valid doctype is specified. So make sure you have that first, so that you are sure all browsers will attempt to render you code in the same fashion.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[johnwm]

Also you can't put a block level element (such as a <p>)inside an inline element (such as an <a>) accordong to W3C spec. Always use a validator to find and resolve simple validation errors.

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[Vragabond]

And finally, try to learn the basics of HTML & CSS before attempting to create the pages. A set of nice tutorials can be found here:

http://htmldog.com/guides/

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[colin4228]

Thank you vacunita (phil) for your reply (good to hear from you again in a different area of Tek Tips).

You were quite correct. My error was in trying to close the <p> tag outside of, not inside the <a> tag. With the closing tags correctly sequenced, Mozilla and IE6 read the code as desired - ie. displayed the page link text in white.

I was encountering a similar problem with a hyperlink to an e-mail address. Adjusting the code to the following fixed it, and the hyperlink text ("Send Mail") displayed correctly as desired in white font.

<p style = "font-family:arial;color:yellow;">This is a mail link: <a href="mailto:info@XYZ.com?subject
=X%20Y%20Z%20Request"><p style = "font-family:arial;color:white;">Send Mail
</p> </a> </p>

The golden rule is that if tags are opened within tags, they must be closed within tags in the exact inverse order of opening. Then, in these simple instances anyway, IE6 and Moxilla work in the same manner.

My version of Firefox was 2.0.0.14 (the last version which is Win 98 compatible. Version 3 plus requires Win 2000).

So I learnt two important lessons :

1. Write correct HTML code!

2. Test website code with more than one browser. I would never have found this problem had I not tried both IE6 and Firefox - because they react differently to code errors. It seems that IE6 is more tolerant to errors, so Firefox would seem to be the better browser to use for testing. Of course a website must work as designed with ALL likely browser programs, so the more with which it can be tested the better.

Doubtless the above will be well known to seasoned HTML writers. I have only just started, and so have to learn the basic rules.

With thanks,

colin4228

 

[pease]

Iwould also add a very simple one to look for in cases where links are appearing differently across browsers.

Make sure you havent visited the link in one of the browsers and not the other otherwise you'll be seeing any a:visited definition in one and a standard a: in the other.

That once threw me at the start of my css/html development. Its a simple mistake to make but a frustrating one if you havent thought of it!