Page 1 of 1
<a> tag combined with mouseover
Posted: Tue 4. Sep 2007, 13:06
by 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>
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
Re: <a> tag combined with mouseover
Posted: Tue 4. Sep 2007, 18:22
by 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
Posted: Tue 4. Sep 2007, 19:08
by 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
Posted: Tue 4. Sep 2007, 20:54
by DeXXus
pierre.meli wrote: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
pierre.meli wrote: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.