a tag not clickable in frontend - UI Questions

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Roel Alblas 5 posts 86 karma points

Mar 04, 2016 @ 15:06

0

a tag not clickable in frontend

UI Questions

Umbraco 7

Hi,

I am trying to get clickable image and text from the masterpage to the frontend.

The a tag is there but when I click it in Edge it does not redirect.

Regards,

Roel

Copy Link
Dennis Adolfi 1082 posts 6446 karma points MVP 5x c-trib

Mar 07, 2016 @ 09:10

0

What does you markup look like in the frontend?

Copy Link
Nik 1593 posts 7151 karma points MVP 6x c-trib

Mar 07, 2016 @ 09:26

0

Hi Roel,

You'll need to share a bit more than that to help. Could you share the section of your template which renders out the image so we can see where the problem may lie.

Thanks,

Nik

Copy Link
Samira 113 posts 452 karma points

Mar 08, 2016 @ 12:53

0

Hi,

May be this is Jquery Version compatibility issue with IE

Please write some section of code and please check your jquery file

Hope this help

Regards,

Samira

Copy Link

Roel Alblas 5 posts 86 karma points

Mar 09, 2016 @ 10:29

Hi all,

Didn't have the time to respond immediately, but I'm here now.

This is the mark-up you asked for:

  <div class="col-xs-8 col-sm-12 col-md-4">
        <a href="@home.Url">
        <div class="brand" style="background-image:url('@(home.SiteLogo)?height=65&width=205&bgcolor=000')">
                <span class="sitetitle">@CurrentPage._siteTitle</span>  
            </div>
        </a>
  </div>

The a tag above does not render to a hyperlink in the frontend.

Kind regards,

Roel Alblas

Copy Link

Dennis Adolfi 1082 posts 6446 karma points MVP 5x c-trib

Mar 09, 2016 @ 11:38

0

A div tag is a block element, so it may not appear inside an a element. w3c standard

Try putting the logo inside another tag, like an img tag and wrap the a tag around it.

Copy Link
Bjarne Fyrstenborg 1280 posts 3990 karma points MVP 7x c-trib

Mar 10, 2016 @ 21:27

0

Not entirely correct depending on the version of HTML.

HTML 4.01 specifies that a elements may only contain inline elements. A div is a block element, so it may not appear inside an a.

HTML 5 states that the a element "may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)".

So if using HTML5 it is actually valid markup.

/Bjarne

Copy Link
Roel Alblas 5 posts 86 karma points

Mar 10, 2016 @ 10:49
0
Hi,

Please look at the following mark up, still no clickable tag.
```
      <div class="col-xs-8 col-sm-12 col-md-4">
        <a href="@home.Url">
                            <img src="@home.SiteLogo" />
        </a>
      </div>
```
I just don't see through it ...

Kind regards,

Roel
Copy Link
Dennis Adolfi 1082 posts 6446 karma points MVP 5x c-trib

Mar 10, 2016 @ 11:22

0

Looks correct. What gets rendered to the html? Is it only Edge, no other browser?

Copy Link
Nik 1593 posts 7151 karma points MVP 6x c-trib

Mar 10, 2016 @ 16:15

0

Are you sure that @home.SiteLogo returns the url to the image? When I've tried this before I've had to write a bit more code to get the actual url to set the src value of the img tag.

Copy Link
Roel Alblas 5 posts 86 karma points

Mar 10, 2016 @ 16:20

0

Yes an image is showing and the url gives back a /. On Safari the same issue, it's just not clickable.

Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib

Mar 10, 2016 @ 17:03

0

Hi Roel

Does the @home.Url provide a link? Does the "href" attribute have any value? If so is it a valid url?

If the url in the anchor is valid could you then try to disable javascript? If so then you need to figure out where in your javascript an event handler is cancelling the click event on the anchor tag in general.

Hope some of these pointers help.

Edit: Sorry, missed the part about the url having a value in your previous response. I suspect the issue might be related to JavaScript then - Are you working on the site alone or do you collaborate with others?

/Jan

Copy Link
Roel Alblas 5 posts 86 karma points

Mar 16, 2016 @ 14:10
1
Hi,

Just to be sure: html.
```
        <a href="/">
            <img src="/media/1042/logo.png" />
            <span class="sitetitle">Litaiji - Fei - Wushu</span>
        </a>
```
Html 5:

No javascript errors and other browsers results in the same.

Please take a look at test.litaiji.nl
Copy Link
Dennis Adolfi 1082 posts 6446 karma points MVP 5x c-trib

Mar 16, 2016 @ 14:25
100
Ah, so your section element is absolute postitioned and with top 0, so it covers the site logo.

Just set a greater z-index to the header element and you sholud be fine:
```
header {
    z-index: 1;
}
```
Copy Link
is working on a reply...

Please Sign in or register to post replies