<a> tag combined with mouseover

[pierre.meli]

I have actually 2 problems that I try to resolve since a couple of days:
http://swiss-unitrade.com/index.php?products-de (view with IE)

1. The header is 150px high and so are the images in the header. There is always a 2px white line below the header pics and the gray bar in the header with the language selector (with both FF and IE). What's the problem??

Image Preload:

Code: Select all

<script LANGUAGE="JavaScript">
<!--
titrepic = new Image(445, 150);
titrepic.src = "picture/layout/titre-01-norm.jpg";
titrepic = new Image(222, 150);
titrepic.src = "picture/layout/titre-02-norm.jpg";
titrepic = new Image(111, 150);
titrepic.src = "picture/layout/titre-03-norm.jpg";
titrepic = new Image(111, 150);
titrepic.src = "picture/layout/titre-04-norm.jpg";
titrepic = new Image(111, 150);
titrepic.src = "picture/layout/titre-05-norm.jpg";
//-->
</script>

Image Display in Header section:

Code: Select all

<table width="1000" border="0" cellpadding="0" cellspacing="0">

<tr valign="top">

<td>
<a href="index.php?garden-acc-de" onMouseover="titrepic01.src='picture/layout/titre-01-norm.jpg';" onMouseout="titrepic01.src='picture/layout/titre-01-lines.jpg';">
<img src="picture/layout/titre-01-lines.jpg" border=0 alt="loading images..." name="titrepic01">
</a>
</td>
     :
     :
</table>

2. The second level (see under products) menus are not displayed correctly in IE, only in FF. Also here I can not figure out why?

Any ideas?

Thanks a lot

Pierre

[DeXXus]

JUST A QUICK LOOK:
For starters, this is how IE is seeing your code. Note the blank space (whitespace) before each closing </A> !

Code: Select all

<TD><A onmouseover="titrepic01.src='picture/layout/titre-01-norm.jpg';" onmouseout="titrepic01.src='picture/layout/titre-01-lines.jpg';" href="index.php?garden-acc-de"><IMG alt="loading images..." src="picture/layout/titre-01-lines.jpg" border=0 name=titrepic01> </A></TD>
<TD><A onmouseover="titrepic02.src='picture/layout/titre-02-norm.jpg';" onmouseout="titrepic02.src='picture/layout/titre-02-lines.jpg';" href="index.php?stone-con-de"><IMG alt="loading images..." src="picture/layout/titre-02-lines.jpg" border=0 name=titrepic02> </A></TD>
<TD><A onmouseover="titrepic03.src='picture/layout/titre-03-norm.jpg';" onmouseout="titrepic03.src='picture/layout/titre-03-lines.jpg';" href="index.php?decoration-de"><IMG alt="loading images..." src="picture/layout/titre-03-lines.jpg" border=0 name=titrepic03> </A></TD>
<TD><A onmouseover="titrepic04.src='picture/layout/titre-04-norm.jpg';" onmouseout="titrepic04.src='picture/layout/titre-04-lines.jpg';" href="index.php?olive-trees-de"><IMG alt="loading images..." src="picture/layout/titre-04-lines.jpg" border=0 name=titrepic04> </A></TD>
<TD><A onmouseover="titrepic05.src='picture/layout/titre-05-norm.jpg';" onmouseout="titrepic05.src='picture/layout/titre-05-lines.jpg';" href="index.php?balustrades-de"><IMG alt="loading images..." src="picture/layout/titre-05-lines.jpg" border=0 name=titrepic05> </A></TD></TR>
<TD><A onmouseover="titrepic01.src='picture/layout/titre-01-norm.jpg';" onmouseout="titrepic01.src='picture/layout/titre-01-lines.jpg';" href="index.php?garden-acc-de"><IMG alt="loading images..." src="picture/layout/titre-01-lines.jpg" border=0 name=titrepic01> </A></TD>
<TD><A onmouseover="titrepic02.src='picture/layout/titre-02-norm.jpg';" onmouseout="titrepic02.src='picture/layout/titre-02-lines.jpg';" href="index.php?stone-con-de"><IMG alt="loading images..." src="picture/layout/titre-02-lines.jpg" border=0 name=titrepic02> </A></TD>
<TD><A onmouseover="titrepic03.src='picture/layout/titre-03-norm.jpg';" onmouseout="titrepic03.src='picture/layout/titre-03-lines.jpg';" href="index.php?decoration-de"><IMG alt="loading images..." src="picture/layout/titre-03-lines.jpg" border=0 name=titrepic03> </A></TD>
<TD><A onmouseover="titrepic04.src='picture/layout/titre-04-norm.jpg';" onmouseout="titrepic04.src='picture/layout/titre-04-lines.jpg';" href="index.php?olive-trees-de"><IMG alt="loading images..." src="picture/layout/titre-04-lines.jpg" border=0 name=titrepic04> </A></TD>
<TD><A onmouseover="titrepic05.src='picture/layout/titre-05-norm.jpg';" onmouseout="titrepic05.src='picture/layout/titre-05-lines.jpg';" href="index.php?balustrades-de"><IMG alt="loading images..." src="picture/layout/titre-05-lines.jpg" border=0 name=titrepic05> </A></TD></TR>

Also, there's a visual width difference regarding right-hand column in IE vs. FF. Don't know if any of these will change that:

First <A href=...> is missing the closing </A>:

Code: Select all

<TD align=middle><A href="index.php?products-de&print=1" target=_blank>Seite drucken<A href="index.php?products-de&print=1" target=_blank> <BR></A></TD></TR>

Also this code in your Footer has wrong wrapping quotes for vAlign:

Code: Select all

<TD vAlign='middle"' bgColor=#808080 height=22>

Hope that is a start

[pierre.meli]

Dear DeXXus,

I corrected all these errors - Thank you very much. Do you have a HTML editor that is finding, problems with open/closing issues quotes, etc? I would be interested in having a tool for that.

Situation Now:
- Problem 1 (2px line) is fixed in FF, but still there in IE
- Menu problem is still there in IE

I will further analyse this kind of spaced and CR/LF problem. Thanks for now - really great!

Cheers, Pierre

[DeXXus]

Dear DeXXus,

I corrected all these errors - Thank you very much. Do you have a HTML editor that is finding, problems with open/closing issues quotes, etc? I would be interested in having a tool for that.

I do use a number of different tools and recommend the FireBug extension for FF, but The HTML Validator extension for FF (in HTML Tidy mode) was showing those missing items:
https://addons.mozilla.org/en-US/firefox/addon/1843
http://users.skynet.be/mgueury/mozilla/

BTW the same extension in SGML Parser or SERIAL mode will show that you need to add numerous <space><forward slash><closing brackets> in your HEAD to comply with the XHTML DOCTYPE

Situation Now:
- Problem 1 (2px line) is fixed in FF, but still there in IE
- Menu problem is still there in IE

I will further analyse this kind of spaced and CR/LF problem. Thanks for now - really great!

Cheers, Pierre

It seems you still haven't cleared up the first item I mentioned (now IE sees the whitespace as moved to AFTER each closing </A>). I'm seeing this with the FULL SOURCE option of an old IE Tool (either Web Accessories for Internet Explorer 5 -or- Internet Explorer 5 Web Developer Accessories) but I believe you can even examine the same thing with something like this:
http://www.thundermain.com/FullSource.html

Not sure what you mean about the menu? The size of the font and dot separators? You don't seem to specify a Font Size in your .c_language class like you do for others like .navLevel and H2,3,4,5,6 ETC. ? Their defaults are obviously slightly different.