We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

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

jasimon9
jasimon9 asked
on
Medium Priority
364 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.

Comment
Watch Question

Top Expert 2011

Commented:
Could you post a link to the website for debugging purposes?

Author

Commented:
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.

Author

Commented:
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.

Author

Commented:
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.

Author

Commented:
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.

Author

Commented:
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
Top Expert 2011

Commented:
I have tried IE8, Safari 4 and FF4. None of them recreate this issue.
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview
Top Expert 2011

Commented:
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

Author

Commented:
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.

Author

Commented:
Permanent solution discovered by me, and no further useful comment apparently forthcoming.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.