PDA

View Full Version : XHTML and IE problem


petersmart
13-11-2006, 08:12/08:12AM
Hi,

I have a problem with XHTML and IE.
I am running XP Pro SP2 (all updated) and IE7 (the latest version).

I am converting a site to XHTML from HTML.

I've found it fairly easy so far, but have hit an odd prob with IE.

The development can be seen at :

http://www.123-now.co.uk

The index page validates correctly for strict XHTML, and looks ok in Opera and Firefox - but the photo navigation on the right hand side is really odd in IE !

The first photo is the correct height and width (120 x 85 px), but the photos underneath it are all at 100 x 85 px , even though they are all 120 x 85 px in the CSS file !

The CSS file validates correctly .

The REALLY odd thing is that if I remove the first photo div then the next div shows the photo correctly, but all the photos below it are still 100 x 85 px !

It appears to be something to do with the self closing on the href because if i put in </a> as shown then all the photos come out the right size, but then the validation is incorrect !!

This is the coding:

<div id="photonav1">
<a href="navigor/latest-news/index.php"
onmouseover="return escape('The attacker of Tom Walter was allowed to walk free from court after Lincolnshire police \'forgot\' all about the case !')" />
<img src="navigor/photonav/tom-walter.jpg" alt="" />
</div>

<div id="photonav2">
<a href="navigor/latest-news/tania-moore.php" onmouseover="return escape('Abysmal failures on the part of Derby police allowed Mark Dyche to murder Tania Moore !')" />
<img src="navigor/photonav/tania-moore.jpg" alt="" />
</div>

Although the coding validates correctly, photonav1 shows correctly, but photonav 2 and all the others in IE show wrongly !
---------------------------------
<div id="photonav1">
<a href="navigor/latest-news/index.php"
onmouseover="return escape('The attacker of Tom Walter was allowed to walk free from court after Lincolnshire police \'forgot\' all about the case !')" />
<img src="navigor/photonav/tom-walter.jpg" alt="" />
</a></div>

<div id="photonav2">
<a href="navigor/latest-news/tania-moore.php" onmouseover="return escape('Abysmal failures on the part of Derby police allowed Mark Dyche to murder Tania Moore !')" />
<img src="navigor/photonav/tania-moore.jpg" alt="" />
</a></div>

If I close the a href as shown then the photos show correctly in all browsers but show validation errors !

Can anyone shed any light ?

The real site which runs correctly in ordinary HTML is at:

http://www.navigor.org.uk

srikanthsh
13-11-2006, 08:48/08:48AM
anchor tags are container tags. As far as I know, should be like this:

<a href="urlHere">text/image</a>

See what exactly is going wrong while validating.

petersmart
13-11-2006, 09:10/09:10AM
PERFECT !!!

Thanks very much !!

The solution was as you said - I simply removed the self closing tags ans re-inserted the </a> :

<div id="photonav1">
<a href="navigor/latest-news/index.php"
onmouseover="return escape('The attacker of Tom Walter was allowed to walk free from court after Lincolnshire police \'forgot\' all about the case !')">
<img src="navigor/photonav/tom-walter.jpg" alt="" />
</a></div>

I was being thrown by the fact that it validated ok but showed up wrongly !

Now it does both - validates and shows correctly !

Something to remember for the future.

Back to the string replacement program - lol

Once again - MANY THANKS !!!