Unclickable anchor tag - html

I use this html code
<div class="titleIn">
<h2>link2</h2>
</div>
and for some reason the link2 is not clickable (no hand cursor)
The CSS is:
.titleIn {
direction: rtl;
margin-bottom: 10px;
margin-right: 0;
margin-top: -10px;
position: relative;
text-align: right;
z-index: -1;
}
Any idea?

I can't say I know why, but I know what's causing it: Your z-index: -1. If you remove that, the problem goes away (at least, it does for me on Chrome, Firefox, and Opera; not on IE6 or IE7, though). Here's a live copy of your example, and an updated copy with z-index: 0 instead.
By giving it a z-index less than zero, you're putting it below the main flow content, and I guess the document isn't letting the event pass through it (just like any element with a non-transparent background setting).
IE seems to have a separate issue with the combination of direction: rtl; and position: relative;, but I think it is a separate issue. If I remove every style in .titleIn except direction: rtl; position: relative;, IE still breaks (the link is unclickable). If I remove either of those, IE starts working (but of course, your layout doesn't do what you want).

Unless you made the body's z-index <-1, you are essentially putting the link behind the entire body of the page, of course it's not click-able. (Elements such as body and headings will span the entire width that it is defined, thus invisibly blocking other elements that maybe visible, but not click-able)
If you used Firebug, it will illustrate that pretty well by highlighting the area of the tag.

Well, when I try this in IE, the link becomes active only after I remove position: relative; and margin-top: -10px;. Soooo, do you really need the position: relative? :)

Related

Sticky/Fixed Header with Anchor Tags - Other solutions found not working

The problem I have is the same as the link below where a sticky header is present and clicking on the anchor tags causes the anchor to put whatever I had anchored right behind the sticky header. I'm looking for a non-JS solution to this problem.
I looked at:
offsetting an html anchor to adjust for fixed header.
and
HTML position:fixed page header and in-page anchors
So in my the html I had:
And the anchor tag as follows:
<a class="anchor" id="first"> </a>
Then in the style sheet I have:
.anchor { display: block; position: relative; top: -100px;}
That didn't work (as in the header kept blocking the anchor). So I tried:
a.anchor{ display: block; position: relative; top: -100px; visibility: hidden;}
copied verbatim from the first link.
That also didn't work so I tried:
.anchor{
padding-top: 100px;
margin-top: -100px;
}
Other attempts:
.anchor {
display: block;
position: relative;
top: -100px;
visibility: hidden;
}
a.anchor {
padding-top:600000px;
height:0px;
}
Suffice to say, this did nothing either.
I tried changing the <a> tags to <spans> and <divs>.
I tried adding text inside the <a> tags because I read somewhere that some browsers don't support empty anchor tags.
I'm currently using Chrome, and have tested on Safari as well. I have tried clearing the cache in case that was the issue.
Apparently, one of my CSS rules: display:table-header-group; conflicted with the padding rules. Now I can't display tables but I can get it to pad to the correct location.
You may use a non-breaking space:
<a class="anchor" id="first"> </a>
I extended this method with the :target pseudo element, which is pretty handy.
:target {
margin-top: -30px;
border-top: 60px solid transparent;
background-clip: padding-box;
}
You can then set the margin-top and the border-top accordingly to the height of your sticky header.
IF I'm understanding your problem, other than adding padding to #first you probably will not accomplish this without JS. SO add padding-top to the #first element so that it scrolls to a stop before the heading covers things up.
Hard to illustrate this but basically your page will stop scrolling immediately when the top of the #first element meets the top of the page, so pushing the content inside the #first element down will bring it below the sticky header.
Apparently the issue was conflicting CSS rules within my style sheet. As for why (the anchor link didn't even encapsulate the tables that the rules were referring to so I don't know) but changing the rules to the tables fixed the issue.

zIndex issue in Internet Explorer 9 & 10

Reading this question you're probably thinking 'not again' and want to mark it as duplicate. But after I've tried about every fix I could find up here and in other parts of the internet I couldn't think of another way to get a solution than asking here.
The problem is: I have a container, which should be completely clickable. The problem in this particular website is, that we can not control what elements will be inside of the container. Since there could be block-elements inside, we can't use an <a> tag instead of <div> as the container. We also want to the site to work in a no-js environment, so an onclick on the container is a no-go unfortunately.
That's why we choose an absolutely positioned <a> which will be an overlay for the entire container. This works well in every browser, except for IE.
In IE all content of the container is painted above the <a>, thus making it a non-clickable area. This isn't really much of a problem with the example here: just a small piece of text. But in other container we have images, tables etc. which completely fill the size of the container.
Even if I'd change the z-index of the <p> to 0 and the z-index of the <a> to 1, the paragraph is still on top of the link. How is this possible? I've read all about stacking contexts and levels, and I still can't find a single thing wrong in my code.
Note: there's a display: hidden; <span> in the <a>, but that's for internal use and I don't think it will affect this issue.
Note: the div.content__container has a parent from which it can get the 100% dimensions.
HTML:
<div class="content__container">
<p class="__align-to-bottom __right" >text <span class="__icon">f</span></p>
<span>text</span>
</div>
CSS:
.content__container {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.content__container > *{
position: relative;
}
.__align-to-bottom {
position: absolute !important;
bottom: 0;
left: 0;
}
.__align-to-bottom.__right {
left: auto;
right: 0;
}
a.__link {
position: absolute !important;
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
a.__link span{
display: none;
}
As said this works fine in every browser out there except for IE. I'm currently testing in 9 & 10 and I'm guessing IE<9 isn't going to be a walk in park either.
EDIT
As suggested I've created a fiddle. In this fiddle I've already implemented some remarks. Such as the display: block; line for a.__link and removing the content__container > *{} from my css. I've added some JS to clarify which element is being clicked on. In IE it's still not working: the onclick event from the paragraph is being triggered.
I came across an issue like this once where I had a blank link positioned absolutely over the top of some content I wanted to be clickable - I tried everything to get it to work and finally found a really dirty hack:
Make a transparent gif or png (has to be at least 50x50) and then use it as the background of the anchor. It should then be clickable, if it is the highest z-index
I take it your link is a block element and actually covers the 100% height and width too
Since there could be block-elements inside, we can't use an <a> tag instead of <div> as the container.
Why not? Are block-level elements allowed inside inline-level elements in HTML5?
ps. Your fiddle code works in IE8.

IE7 Absolute Position starts at top of line as opposed to other browsers

I created a fiddle that exemplifies the problem:
http://jsfiddle.net/vZtBb/
This is working exactly as I want it, but the problem is that in IE7 the absolutely positioned span (hover-tooltip-container) starts at the top of the line instead of at the bottom like it does in the other browsers. If you add a border to hover-tooltip-container, you can see this.
This is a problem because I want the tooltip to go up, but the anchor to still be exposed. You should be able to mouse over the tooltip as well, but the gap in IE7 makes this impossible.
If there is any way to get the hover-tooltip-container span to start in the same place on the line in IE7, IE8, and FFX, that would be perfect.
Javascript is not a solution.
The most simple thing you could do with the code you already have, is add a star hack to adjust the bottom rule within .hover-tooltip, for IE7.
.hover-tooltip {
display: block;
padding: 15px;
position: absolute;
margin: 0 auto;
bottom: 1em;
*bottom: 0;
width: 100%;
border: 2px outset #c0c0c0;
background-color: #f0f0f0;
text-align: center;
}
However, the double, nested absolute positions of .hover-tooltip-container and .hover-tooltip seem unnecessary.
I did something quite different (also renamed your classes, to much of a hassle to play with those looooooooooong name).
http://jsfiddle.net/vZtBb/16/
I removed the nested absolute positionning : They are the one causing the issue, since element in absolute position are taken out of context. So, 2 solo, nested absolute positionned element means that one element is in nothing (glitchy and really not wanted).
Instead of that, I placed your tooltip box in absolute, but made it start higher than the anchor by use of a negative position (top:-70px). It's sketchy a bit, but you should get my point.
Trying putting this after the .hover-tooltip div:
<div class="clear fix"></div>
and this css:
.clearfix:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
.clearfix {display: inline-block; }
html[xmlns] .clearfix {display: block; }* html .clearfix {height: 1%; }
I was able to solve the problem by having the "container" element float left and have relative position. This achieves the appearance of breaking out of containers but still provides a reference for the tooltip to go up from.

Anchor-Link skips too far

At the top of a website I'm currently working on, I defined a «Skip to content»-Link with the following markup:
Skip to content
I placed this link somewhere outside the viewport, using CSS position: absolute. As soon as somebody focusses the link (when «tabbing» trough the page), the link gets moved back to the viewport and it pushes the content below down a bit, so it gets the space it needs.
#skip-to-content {
display: block;
text-align: center;
position: absolute;
top: -999px;
}
#skip-to-content:focus {
position: static;
outline: 0 none;
border: 1px solid #681;
top: 0;
}
If you now click the link, my browser skips to the content correctly, but after that the link looses focus, so the content slips up again a little bit (because the link above gets moved out of the viewport again). So in the end, you need to scroll up a little bit to see the beginning of the content. It looks, as if the anchor link would skip too far.
Is there any way I can make sure, the link always skips to the content and not some pixels below?
Please don't suggest any JavaScript-Solutions, this is basic functionality that needs to work in every browser. Thanks for your help.
— André
While not an elegant solution, try adding this to your CSS, it may give you an idea of how to fix it.
#content {
margin-top: -60px;
padding: 60px 1.1em 1.1em;/*add approx 1.1em in px for top padding here*/
}
Where 60px is the approximate added height when the skip link is visible. It's just moving the top edge of #content up a little bit. You can try different measurements to get the padding back to where it needs to be. I didn't want to suggest wrapper divs or anything, but that could work to give you the exact 1.1em top padding you originally had.
If you can figure out the exact total added height when the link is visible, use that measurement in ems instead of px.
You could just not reset the position back to static in your :focus rule.

CSS styling problems

I'm a beginner and I have been battling to get this site to work as desired. Thanks to advice on this forum to include an IE7 specific style sheet I am almost there, but with a couple of minor issues remaining. Some of the styles just won't work and I'm starting to despair! I have three issues and if anyone can shed some light on these I'd be super happy!
Across all browsers (both stylesheets), 'main p' text padding on the right is only appearing on pages 'studios.htm' and 'contactus.htm' - I have no idea why and have tried playing around with all the styles without success.
On the 'location.htm' page I am unable to position the footer "behind" the Google Map, like the picture rows are positioned on the other pages. I have tried changing margins, padding and z-index, but nothing seems to change it - I can manage to position the footer in the right place but the Google Map stays "behind" it so that the bottom part of it can't be seen.
On IE7 ONLY: CSS text formatting doesn't seem to change the font size at all. As a result the text is too large and on pages 'studios' and 'thingstodo', this results in the very bottom part of the text to go down too low and hide behind images. If the text was the right
The site is here: http://bit.ly/gaAthc
Main CSS: http://jsfiddle.net/ykbhd/
IE7 specific CSS: http://jsfiddle.net/bdwrY/
Thanks in advance!
1) The reason this appears correct sometimes is simply how the text breaks in your paragraphs. Your p tags are taking the full width of your main div, so putting right padding isn't doing to help. Instead, just put some padding on your image.
Line 190:
#target2
{
float: right;
padding-left: 5px;
}
2) You can use negative margins the same way you do for the picture rows.
Line 178:
#googlemap
{
margin-bottom: -130px;
}
3) Remove margin-bottom: -10px; from this rule:
#container #main #rotxt
{
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 0.8em;
margin-top: 35px;
padding-left: 1px;
}
Update
For the Google map footer issue in IE7, try adding this rule to a IE7 stylesheet (see here for info on conditional comments):
#footer
{
z-index: -1;
position: relative;
}
Add overflow: hidden; to #main p