Opera mouseover/click detection problems

[Kolyana]

I've got a problem with Opera 8.0 and *ONLY* with Opera ... in IE 6, Netscape and Firefox things are working correctly.

I've got a table with multiple rows and columns. The final two columns contain images that can be clicked on for further information and so on (see below for an example), but there are two problems here.

1) The mouseover event does not fire if the user puts the cursor over the image (it doesn't bubble through the heirarchy at all).

2) The regular <a> tag on the image is not even clickable ... hovering the mouse over it does not change the cursor, the status bar does not recognize it as a link and it cannot be clicked.

In other cells I have link surrounding regular text and they work fine, so why is Opera ignoring the link on the image?

Why is opera not seeing the onmouseover event on the same cell?

Code: Select all

<td align=left valign=middle
	onmouseover="highlight(event, this);"
	onmouseout="highlight(event, this);">
	<a href="addtocart.asp?sid=AwNqixoL&paid=-32756&r=027373&pid=-32728&cid=-32758"
		title="Add 000: Sample Spray, Nozzle, Handpump, BodyWash Formula to your shopping cart"
		alt="Add 000: Sample Spray, Nozzle, Handpump, BodyWash Formula to your shopping cart">
		[img]images/cart-2.jpg[/img]
	</a>
</td>

I also have an issue with Opera with a mouseover on three floated images ... the mouseover event is only being recognized on the upperright corner of the final image (all three are in a row), and is not recognized on the other images or 2 thirds of the final image ... it's like the whole event area, even though it's assigned to an image, has been either masked, covered, displaced or otherwise shrunk and I'm not sure why or even how to approach the problem.

Code: Select all

			<div class=productImgContainer>
[img]images/products/thumb_11.gif[/img]
</div>
<div class=productImgContainer>
[img]images/products/cv-1000-1.gif[/img]
</div>
<div class=productImgContainer>
[img]images/products/cv-1000-2.gif[/img]
</div>

In this code example, the detection area is a small, small part of the final image's top-right corner ... the onclick routine doesn't fire at all and the mouseover fails elsewhere.

I've searched the internet intently but found no bugs related to this for Opera ... what am I missing?

~ Natalya

[Rob]

One thing I will advise you of is to use alt text and/or title on the link OR the image... not both otherwise it will just push your page toward the upper boundary of keyword weighting limits.... the page may even be seen as spamming by some search engines under certain circumstances.

[Kolyana]

That's useful to know ... ironically I was putting in alt and title tags on both because I'm trying to be more search-engine savvy; clearly I may be slightly over doing it

I'll strip them down.

EDIT:
Fortunately I had come to a similar conclusion during the development of my site - it seems -and I hadn't doubled up in many places. I've corrected that now.

Further to my Opera woes, none of the links in this html (in Opera) work ... none of them are 'clickable'.

Code: Select all

								<table cellpadding=2 cellspacing=0 border=0 style="margin-left: 10px;">
									<colgroup>
										<col width=50% />
										<col width=50% />
									</colgroup>
									<tbody>
										<tr>
											<td colspan=2 align=center valign=middle height=103>
												<a href="package_detail.asp?sid=AwNqixoL&paid=-32768&r=084324&cid=-32758&pid=-32758" id=packageLink
													title="View May 2005: CV-1000 "
													alt="View May 2005: CV-1000 ">
													[img]images/products/noimage_sm.jpg[/img]
													</a>
												
											</td>
										</tr>
										<tr>
											<td colspan=2 align=center id=packageText>
												<span class=bold>CV-1000</span> Package <span class=bold>May 2005</span>
												</td>
										</tr>
										
										<tr>
											<td colspan=2 align=left id=packageDesc>
												1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla arcu dolor, varius aliquam, sagittis vel, pharetra eget, nibh. Sed suscipit sodales ante. Suspendisse potenti. Fusce suscipit, lacus quis ultricies accumsan
												</td>
										</tr>
										
										<tr>
											<td align=right style="padding: 0 25px 0 0;">
												View
											</td>
											<td align=left style="padding: 0 0 0 5px;">
												Add to Cart
												
											</td>
										</tr>


									</tbody>
								</table>

[Webforumz Staff]

Could you possibly give us the URL to the affecting pages?

Using the code above and the descriptions you have provided, I'm not having a problem, apart from that for some of the code additional code has not been supplied.

[Kolyana]

Absolutely!

It's a dynamic, asp driven site that hasn't been launched yet, but I'll create a static version of it and host it in a testing location.

I realized that the sheer volume of code could be off putting and in other help sites posting a link to ANYTHING is a violation of their TOS, so here I thought I'd stay on the safe side.

You can find all issues on these three pages:

1) Magnifying Glass & Cart icon not clickable
2) Product text hyperlink, 'view' and 'add to cart' hyperlinks not clickable
3) image not clickable
4) Rows highlight correctly, but final two columns (the ones with images in them) do not fire the onmouseover event.
http://www.cleanvia.com/test/packages.htm


1) Magnifying Glass & Cart icon not clickable
2) Product text hyperlink, 'view' and 'add to cart' hyperlinks not clickable
3) image not clickable
4) Rows highlight correctly, but final two columns (the ones with images in them) do not fire the onmouseover event.
http://www.cleanvia.com/test/product_category.htm


1) The two thumbnails on the right of the group of 3 are clickable, well ... in theory ... but in actuality only a 1cm square in the top right corner of the final right-most image recognizes the mouse ... if you hover over the images and sweep the cursor across the top corner, you'll see what I mean.
http://www.cleanvia.com/test/product_detail.htm


And thanks for looking at this for me ... I always appreciate someone giving me their time.

~ Natalya

[Rob]

Natalya,

Try validating this website against published doc-types..... html 4.0 transitional I think you should aim for.

Once you get this to validate I think you'll find it works.

[Kolyana]

Strange how my projects have adopted slightly different doc types over the years, this [current] one actually replacing html transitional about a year and a half ago, after transitional gave me some odd behavior in my CSS; back then another website recommended switching to:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Is this ill formed? What would you recommend using instead?



EDIT: It seems that Operas default behavior is to identify itself as 'IE' ... if this is changed to Mozilla or Opera, the pages work correctly. So this problem only occurs in Opera identifying itself as IE.

I'm currently working through all of the html to validate it, because it's an incorrect mix of html, xhtml and un-encoded urls.

[Kolyana]

I've been putting my pages through the W3C validator (ctrl+alt+v trick) and have found plenty of problems. Slowly but surely, all the pages are validating as valid 4.01 HTML Transitional (what a great feeling).

Curiously, I noticed that this code (when used) doesn't work on any page when Opera is masquerading as IE:

Code: Select all

<div id=footer>
&copy; Copyright CleanVia 1998 - 2005, All Rights Reserved.
	
	
	


      [img]http://www.w3.org/Icons/valid-html401[/img]
    </p>
</div>

And it doesn't get any more basic than that (the links do not work).
http://www.cleanvia.com/test/home1.htm

And the same page with no Navigation content (simplifies even further):
http://www.cleanvia.com/test/home2.htm

Now here's the curious thing ... in the process of uploading those test pages, I had failed to upload a modified CSS file. The pages - without the updated CSS - have a left aligned footer AND THE LINKS WORK.

When I uploaded this CSS:

Code: Select all

div#footer {
	margin: 1px 0 10px 170px;
	color: #bbb;
	text-align: center;
	}
div#footer a {text-decoration: none;}

The links FAIL TO WORK.

It seems that the presence of that css causes the links to work or not work, but I don't know why this would happen.

[Webforumz Staff]

And yet that same css, with just the relevant div code, works fine by itself...

It seems to me like something else is interfering with it somehow. You're going to have to strip things out to figure out what.

And with regards to posting links, please feel free. If anything posted is not suitable we simply remove it and let the user know - there is no penalty unless the user does so again.

[Kolyana]

This really is somewhat of a curious one. I'm going to run a few experiments and see what happens (that whole text-align: left; thing causing <a> tags not to work is ... boggling ... but then my CSS is far from super clean and Opera (in IE mode) may be picking up on something, or tripping over it (!).

If this error was more minor, I'd be inclined to think "Ah, heck to it!", but links not working in Operas default mode is pretty severe to me!

Even more odd, certain pages work and certain ones don't (and here I'm talking about just the footer links), so I'm almost inclined to think that the error is not so much with the footer or it's CSS< but something that is preceding it. There's no pattern here ... pages that have not been W3C validated are as likely to fail as those that are, and while the footer works on the package.asp page, the links on the images in the main content do not ... and this page HAS been validated.

I removed:

Code: Select all

<script language=Javascript type="text/javascript">
	window.onload=init;
	window.onresize=posTabs;
</script>

from the home page (one of the simpler pages) and nothing happened ... ie, the links still didn't work. So I'm really not sure if this is affecting the page content and links in an adverse manner.

I ripped out the cleanvia.css contents entirely, retested the homepage, and yes a previously failing link then worked. Moving to the packages page, the images still didn't work, all other links did ... bar the "View" link under the image on the right hand side (the link next to it "add to cart" worked fine!).

Upon further examination, I foudn that the first link had an area inthe top right corner of it's 'space' that was correctly hyperlinked - literally just a few square pixels (maybe as small as 1 pixel) (this is with the cleanvia.css style sheet absent).

So I ripped out EVERY style sheet and the correct behavior to all links (including the images within the table) was restored ... so somewhere in these style sheets (and more than 1 of them), there's a real issue in Opera in IE mode.

It's this! :-

Code: Select all

#tabs
{
	float:left;
	line-height: normal;
	bottom: 0px;
	left: 360px;
	top: 84px;
	position: absolute;
	overflow: hidden;
}

I stripped out the style sheets and piece by piece started to put the declarations back into place. Within just a couple of minutes of doing this I got a hunch ... the tabs across the top of the page ... dead links were always under the horizontal position taken by the tabs, which is why when you left aligned the footer, it started to work again (it moved out of the vertical dead area).

I put all the css back in save for anything to do with the tabs and the very first declaration causes the problem (they take up less space because of the missing CSS, but everything below them is now a deadzone and the mouse is not detected in that area at all ... movement, clicks, anything).

After a little research, it's the line

Code: Select all

position: absolute;

that is causing the problem ... the minute that is used, the tabs take up a vertical space for the entire height of the document.

I did a little debugging and found that the default behavior of Opera in IE mode is to make the absolutely positioned elements 100% height ... or thereabouts. On some pages the FOOTER link worked, so i suspect that I had a cleared element or something in these locations which was causing the float-like effect to stop there. I can't confirm this, only that certain pages had a variable height of the 'deadzone'.

I pondered the possibility of assigning the tab container (#tabs) a height, which either required a fixed specific pixel height and the overflow: hidden attribute, or an impossibly small height (like 1%) and the removal of the overflow.

I initially wanted to stay away from this, because I have constructed the tabs in a way so they expand as (and if) the user increases/decreases font size, and I wanted the tabs to be somewhat liquid, but I can live without it (and it didn't work too well anyway )

For now I have removed the overflow, assigned a height of 1% and Opera - in any mode - works correctly. It sticks in my craw a little, but then it's not as bad as entire swarthes of links not working!

~ Natalya