<a href> not working only on cellphones - html

This code works on all desktops and tablets, in every browser, but for some reason I cant find, it is not working on cellphones, android or apple!
I cannot even select the text on cellphones..
<div class="inner-content block-content-style-2">
<a href="index.php/fr/services-fr/moule">
<div class="icons-molding"> </div>
</a>
<h3 class="title">Conception</h3>
</div>
I tried moving the href to a couple of place, but didnt change anything, but anyways, even if it is not a link, i should be able to select the text when using a cellphone
I tried to add a href inside the h3 tag for mobile to click on it, but it is not working either.
you can try it live here: http://www.qualiplast.com
On desktop or tablet, it works just as intended, but not on any cellphone.
Thanks for helping me out.

There is a div with an id of 'avatar-body-middle-block' that is appearing above the links on mobile, and preventing them from being clickable. Remove (or more likely hide) this div on mobile and the links will work.

I faced the same problem. Here's how I solved it in my case.
I tried inspecting on the 'a href' element. Turns out that some other element shows up in the developer console. After some pondering, I realized that some other div element was showing up above my link.
After reading through the css styling for the overlapping element and disabling the overlapping css command, the link started working for me. (float: none had to be deleted in my case, from an overlapping div)
Hope this helps someone else out there

Related

Anchor links to wrong place

I am having a problem with what seems like it should have a simple solution.
I have anchor links set up in a html page and am having a problem with one of the links.
Here is the code I am using...
<div class="top-menu">
About</br>
Jersey</br>
SocialMedia</br>
Art</br>
</div>
The links
<a id="about"></a>
<a id="jersey"></a>
<a id="social"></a>
<a id="art"></a>
The anchors
The problem I am having is that 'About','Jersey' and 'Art' work perfectly fine, but 'social' keeps linking to 'jersey'.
I am using nice scroll, and a scroll to anchor script, however I have removed these and get the same effect.
As said previously I have also tried linking with name="" and id="".
The anchors were not inside a div, but I have tried that also.
EDIT: Also just tried using div tags instead of a.
It means you have multiple element having same Id also there is another possibility that Id is in scroll limit
I am still unsure as to this problem however I have found a solution. I have placed the anchor inside the div below it.

Web browser jumps to particular H1/div on website

Right...
I am working on a client's website and so far most of it is working well.. until today...
The URL: http://www.chris-loweth.co.uk/shoaib-hassan-photography/site_demo_1/
When the page displays it is jumping to a H1 on the page that is half way down the page...
There are a few <a href="#"> links for dummy content but these shouldn't be working like scroll anchors... and there's definitely not an anchor in the div that the browser seems to be scrolling down to...
Spent hours on this and wondered if some fresh eyes might help...
I've tried to validate the markup but as this is a test site some of the div IDs duplicate so validation fails.
Thank you guys n gals!
I don't think it's jumping to the H1. I think it's this line near the top of your tools.js file that is doing it:
$('input[type="text"]:first').focus();
It is scrolling to put this in view, and depending on your browser size, this could well put the H1 above at the top of the window.
The problem is caused by this line in the javascript file:
// Set focus to event title on page load
$('input[type="text"]:first').focus();
The first input field is way down on the page. Setting the focus to it is causing the browser to scroll to the input field instead of remaining at the top of the page.

Horizontally align images within a div

Would like to horizontally align multiple images and have them flow down the page if there are too many. (This is a mini gallery in the middle of a wordpress post).
After trying multiple code variations found on this site, I still can not get it working. However it works fine at JSFiddle...
Links needed here here:
Working code at JSFiddle
Non-working code at my website (even though the exact same code is being used as above).
Is anyone able to assist me as to what's going wrong?
*HTML and CSS are evident in the first 'JSFiddle' link
*Using latest version of wordpress
PROBLEM SOLVED: (can't answer my own question for another 8hrs due to being new)
There is Auto Formatting and AutoText in wordpress that was automatically adding 'breaks' to the end of my image hyperlinks.
Added ".photographs br {display: none;}" to the CSS and it works fine!
You have <br> tags in between your images. Remove them and it will fix itself.
remove <br/> in your code.
PROBLEM SOLVED!
There is Auto Formatting or AutoText in Wordpress that was automatically adding <br /> to the end of my image hyperlinks.
Added .photographs br {display: none;} to the CSS, and it works a treat.

img won't display

So I'm very confused and never seen something like this happen before. I have a simple link displaying an img in html. When I load my page, the img does not display. There is no CSS applied to the link or the img. Here's my code, I just need somewhere to start because I have no clue what the problem is.
<li>
<a class="dropDownGif" id="dropDownGifLink" href="#"><img src="../../images/darr.png" /></a>
</li>
EDIT:
When pulled up in chrome inspector the link shows the style as display:none; however this is written nowhere in my code, when I put css in to make sure it displays, it still automatically changes to display:none;. And the img path is correct, not sure how to change it to an absolute path though..
Thanks for all the help! hope this extra info helps.
Works fine must be the path to the image http://jsfiddle.net/YuqVu/
Check the served images and their location with inspect element on Chrome. You can right-click --> inspect element --> click on resources
There is nothing wrong with you code at all unless you apply some style. The problem must be your image path.

Not working Title attribute for image tag?

I am facing bit strange problem with my application. I have an image
<img title="New (Alt+N)" alt="New (Alt+N)" src="images/icon_new.gif" tabindex="-1" id="Ax14490_image">
This code is found inspecting document withfirebug.
which is displaying properly but title is not coming on mouseover of that image. can any one help me out in this context.
I am using firefox 4.0 browser
In case anyone else finds this thread via a search, I was having the same problem as described by the original poster. Here's what turned out to be the cause, in my case.
My layout involved two div objects placed horizontally next to one another. One on the left, and the other on the right. The left div was set to have a width of 100%, although it's contents did not cover all of that space due to internal padding. the right div contained the img which was not triggering any mouse events (including the "title" attribute not working, but onMouseOver and onMouseOut also did not work.)
So this was due to z-ordering. The mouse events were instead being handled by the div object on the left, because it's 100% width encompassed the full browser window. Since the left div had a "position" attribute of "absolute", it could legally have it's z-value set, and so I set its z-value to "-1". This fixed the issue.
Yes, it works for me too.
However, here is a useful guide to the correct usage of both the alt and title tags:
http://www.456bereastreet.com/archive/200412/the_alt_and_title_attributes/
Too Late..But Try This...This is working for me
<img src="images/icon_new.gif" title="New (Alt+N)" tabindex="-1" id="Ax14490_image">
src tag at the first.
Thanks
I know I'm way late to the party but things are radically different today (Dec. 2018) than they were when this post was created (Jun. 2011).
In case someone is having this problem with images not showing the tooltip of the title="" attribute, well, make sure you are not testing in Responsive Mode.
The title="" attribute obviously isn't going to work because Responsive Mode in browsers, at least in Firefox and Chrome, emulate touchscreen devices and the title="" attribute only works with a mouse pointer.
Yep, I know what you're thinking…