html mailto mystery

[swee'pea99]

An odd one, this. I discovered quite by chance that the mailto links on my site were working fine in Internet Explorer, but not in Firefox or Opera (doubtless Chrome and Safari too - I don't have them). You float the cursor over, nothing happens.

The basic code is fine - <a href="mailto:mail@mysite.com">mail@mysite.com</a>, and other sites using exactly the same coding produce my default Outlook Express popup as they should, in any browser.

After a lot of head-scratching and poking around, I've zero'd in on the tags surrounding the link. In order to put it where I want on the page (and with the right attributes) I've given it its own div in the stylesheet. So the full line is:

<div id="mail"><a href="mailto:mail@mysite.com">mail@mysite</a></div>

Sure enough, if I delete the <div id="mail"> and </div> tags, the link works fine. But of course it ends up in the wrong place, wrong appearance, all that.

Has anyone come across this problem? Better yet, anyone know of a solution? Thanks if you can help.

 

[Angelfishsolo]

mail@mysite.com[/email]</a>, and other sites using exactly the same coding produce my default Outlook Express popup as they should, in any browser.

After a lot of head-scratching and poking around, I've zero'd in on the tags surrounding the link. In order to put it where I want on the page (and with the right attributes) I've given it its own div in the stylesheet. So the full line is:

<div id="mail"><a href="mailto:mail@mysite.com">mail@mysite</a></div>

Sure enough, if I delete the <div id="mail"> and </div> tags, the link works fine. But of course it ends up in the wrong place, wrong appearance, all that.

Has anyone come across this problem? Better yet, anyone know of a solution? Thanks if you can help.

Was this written in raw HTML or did you use MS Frontpage?

 

[gaz]

Can you tell us what style properties #mail has in the style sheet?
If possible can you send us a link to so we can have a gander.

You may be able to get around it with <a id="mail" href="mailto:mail@mysite.com">mail@mysite</a> but if the problem lies with styling that is on a parent element then that won't solve it.

 

[MattL]

It is very unlikely that CSS will stop the link from working as CSS controls the display properties. If you have any non-visible elements (not display:none) and they're sat over the top then that will cause it.

Can you inspect the element in Firebug?

One thing I might look at is if there is any JavaScript running on the page. Use the web developer toolbar add-on to disable all JavaScript and the reload the page. It's unlikely that's it but it's worth asking.

If you rename the div's ID from "mail" to "mail2" or something, does it then begin to work?

As mentioned before, post the link and we can see it for a more informed decision.

 

[swee'pea99]

Thanks all.

Ok, it was written using Microsoft Expression.

The relevant style properties are:

#mail{
position:relative;
float:right;
text-align:right;
left:295px;
top: 77px;
font-size: 0.8em;
color: red;


"If you rename the div's ID from "mail" to "mail2" or something, does it then begin to work?" - Tried that! Nope!

(I don't know what Firebug is, or a 'web developer toolbar add-on' either...but thanks. If no-one can think of an easy fix, they at least give me a lead to google around a bit more. There is Java on the page, by the way.)

You can see it in situ at http://www.wherewordswork.com/index.html

Thanks again.

 

[Angelfishsolo]

[quote name='swee'pea99' timestamp='1313235127' post='1796277']
Thanks all.

Ok, it was written using Microsoft Expression.

The relevant style properties are:

#mail{
position:relative;
float:right;
text-align:right;
left:295px;
top: 77px;
font-size: 0.8em;
color: red;


"If you rename the div's ID from "mail" to "mail2" or something, does it then begin to work?" - Tried that! Nope!

(I don't know what Firebug is, or a 'web developer toolbar add-on' either...but thanks. If no-one can think of an easy fix, they at least give me a lead to google around a bit more. There is Java on the page, by the way.)

You can see it in situ at http://www.whereword....com/index.html

Thanks again.


[/quote]

Just based on experience of MS and not the product but MS does seem to like making its products IE friendly and non IE very unfriendly!

 

[gaz]

The problem is #bodywrapper1 is overlapping on #headercontainer
headercontainer contains your mail link but because bodywrapper1 overlaps it, you can't actually click on it.

It's overlapping because the elements in the header container are floated and the height is not tall enough. Easiest thing to do is change the height element of #headercontainer to 94px. But this pushes the rest of your content down.

What i suggest you do is the following.
Change the height of #headercontainer to 94px
change the margin-top of #leftcontent to 0

That is the best fix with minimal effect on how it looks.

 

[swee'pea99]

Brilliant! It works! You are a prince among men. Many thanks.

 

[lozcs]

I'd never recommend using mailto links on a website.

You'll end up receiving loads of spam...

 

[gaz]

I'd never recommend using mailto links on a website.

You'll end up receiving loads of spam...

So you us javascript?
What happens if someone doesn't have javascript?

Each method has it's ups and downs, spam is fairly easy to deal with.

 

[lozcs]

So you us javascript?
What happens if someone doesn't have javascript?

Each method has it's ups and downs, spam is fairly easy to deal with.

Agree re Java, and hiding mailto links with java doesn't remove the issue with not knowing what the user's device does with a mailto link (which really depends on the user being on their own machine and the machine configured to handle these)

I'd recommend some sort of contact us form - would still need some for of spam filtering in place as these can also be spammed.

 

[MattL]

Pedantic I know but it's not Java but JavaScript. Java is the product of Sun Microsystems. JavaScript is the browser language. They are alike in name only.

Java is to JavaScript as ham is to hamster.

 

[ASC1951]

Java is to JavaScript as ham is to hamster.

Excellent!