?
Solved

Firefox and Chrome in full screen - one link on page does not work

Posted on 2011-04-20
11
Medium Priority
?
347 Views
Last Modified: 2012-06-21
This has got to be one of the oddest things I have seen yet. It is affecting one of our internal users, but I cannot reproduce it on other machines.

On our website there is a particular link. In IE that link works normally for this user. However, in both Firefox and Chrome for this particular user, when the browser is full screen, the link does not function as a link. That is, no "hand" shows on hover, there is no text in the status bar, and clicking does nothing.

However, while examining this issue, I made the browser window less than full screen. Suddenly, the links work as expected in both Firefox and Chrome.

From her machine, doing a "view source" in all browsers show normal code with nothing that should be suppressing the link. And even so, why would the "full screen" block the functioning of a link?

Here is the code:


 
<table>
	<tr>
		<td><a href="/index.php">Home</a></td>
		<td><span class="fpsep">|</span></td>
		<td><a href="/whats-new.php">What&rsquo;s New</a></td>
		<td><span class="fpsep">|</span></td>
		<td><a href="/testimonials.php">Testimonials</a></td>
		<td><span class="fpsep">|</span></td>
		<td><a href="/display-ads.php">Display Ads</a></td>
	</tr>
</table>

Open in new window



The link that does not work is the one to display-ads.php.

0
Comment
Question by:jasimon9
  • 8
  • 3
11 Comments
 
LVL 13

Expert Comment

by:jonahzona
ID: 35437133
Could you post a link to the website for debugging purposes?
0
 

Author Comment

by:jasimon9
ID: 35437151
I was going to make an addition, but you already posted a response.

My addition was as follows: on her screen there is a border of a div that was running though the link text. However I am thinking this is an artifact as it does not affect other users.

You can check this out on our production site at http://www.rephunter.net. Scroll to the bottom of the page (or half way where there is a "sort-of bottom") and find the link to Display Ads.
0
 

Author Comment

by:jasimon9
ID: 35437569
We have discovered more information which should give some definite insight into what is going on.

It turns out that under some conditions, there is a border on a div which cuts through the text of the link. When it cuts through the text, sometimes the link does not work. By resizing or re-arranging the window, you can make changes in the way the layout appears, so that the place the border "cuts though" can be changed.

I am attaching a screen shot showing Firefox with the border of the div cutting through the text of the "Display Ads" link. In this odd case, when the cursor is hovered over the text "Disp" to the left of the border, the link functions. However, moving the cursor over to the text to the right of the border, the link fails. Unfortunately the screen shot does not show the border very well -- it is extremely light. I'll try to get a better image and post it later.

 Firefox showing thin gray border of a div cutting a link and making the link non-functional
I still need to see if I can produce that overlapping border effect in IE. For some reason I have not been able to produce that so far.
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 

Author Comment

by:jasimon9
ID: 35437651
Found another clue: due to IE having to have the parent container positioned in order for positioning to work on a child, there is a discrepancy as to whether the "Blog Posts" section is appearing.

First I need to resolve that issue. When that is done, then it remains to be seen whether the issue will then also occur in IE.

Then next level workaround fix would be to make sure the div does not extend in such as way as to cause the border line to cut into the links.

It is still a mystery as to why properly formed links cease to function depending upon the changes in the layout as the browser window size and shape is changed.
0
 

Author Comment

by:jasimon9
ID: 35441988
I have resolved the issue of IE not displayed a positioned div unless the immediate parent is positioned.

Now I have established that the problem occurs in Firefox, Chrome and Safari, but not in IE. Where it fails, the link is present to the left of the vertical line but on the right of it, the link is not present.

As previously mentioned, I think I can work around this odd situation by controlling the vertical line better.
0
 

Author Comment

by:jasimon9
ID: 35442078
I am posting an enhanced screen shot that makes the "border slicing of the link" easier to see.
Border-slicing-kills-link-in-non.png
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35442188
I have tried IE8, Safari 4 and FF4. None of them recreate this issue.
0
 

Accepted Solution

by:
jasimon9 earned 0 total points
ID: 35442268
Well that depends upon when you tried it!

Just a minute ago I rolled out a permanent workaround. All I had to do was reduce the height of the blog posts div from 500px to 440px, which prevents the line from slicing down through the link.

Also, if you were following my initial instructions, you would not see the problem. To see it you would have had to log in as one of our users and position the page so that the vertical line is as shown in the most recently posted screen shot. Of course, I did not provide instructions on how to log in as one of our users, so in fact there was no way you would have been able to reproduce the problem in any case. This situation was because we only unfolded the real situation during the course of this ticket.

But as I say, I have now found myself the permanent solution as described.

However, I would still award points for an explanation of what causes this issue. That is, when there is a div that is visually slicing though the link, that the link is made partly ineffective (link works outside of overlapping div, but not within it). This seems odd to me, because the underlying link is "just there" and the browser must be interpreting this in a special way. (But not IE).
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35442304
I think it has to do with the z-index of the elements. Basically, the div was literally a LAYER over the link. Navigation can't happen beneath it, because it is being obstructed by a layer above it.

Alternatively, you might be able to give the div that was obstructing a low z-index and the div containing the links a high z-index to layer everything properly.

here is a link explaining the z-index property.

http://www.w3schools.com/css/pr_pos_z-index.asp
0
 

Author Comment

by:jasimon9
ID: 35442419
Afaik, the z-index on all the elements is the same, being the default of zero. At least, some preliminary exploration in Developer Tools does not show any z-index set for any of the relevant elements.
0
 

Author Closing Comment

by:jasimon9
ID: 35496427
Permanent solution discovered by me, and no further useful comment apparently forthcoming.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
Citrix XenApp, Internet Explorer 11 set to Enterprise Mode and using central hosted sites.xml file.
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…
Suggested Courses

621 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question