shirleyh Posted May 13, 2015 Share Posted May 13, 2015 I have built an ad with a background image which is a clickable link. However to get the link to activate, I have it outside my table. When I go to validate my code, I get an error saying I can't place the <table> within the <a> If I move the <a> into the table, the link no longer activates. No matter where I try putting it, it will not activate my link. Can anyone help me solve this? Here is a sample of the structure I'm using <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>ad</title><style type="text/css">body { background-image: url("images/best.jpg"); background-position: 100; background-repeat: no-repeat;}</style></head><body> <a href="http://webiste link" target="_blank"><table class= "container" width="650" cellspacing="0" cellpadding="0" align="left"> <tr> <td valign="top"><img src="images/image.png" width="200" height="54" style="margin: 20px 0 45px 20px;" alt="logo"><h1 style="font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 38px; color: #ffffff; text-align: left; line-height: 110%; font-weight:400; margin: 65px 300px 50px 20px;">Body copy here</h1></td></tr></table></a></body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted May 13, 2015 Share Posted May 13, 2015 What area of the page do you want to be clickable? Link to comment Share on other sites More sharing options...
shirleyh Posted May 14, 2015 Author Share Posted May 14, 2015 (edited) The entire image. It works the way I have it. But the validator gives me an error because the table tag is within the <a> The link doesn't open if I move the <a> Edited May 14, 2015 by shirleyh Link to comment Share on other sites More sharing options...
Ingolme Posted May 14, 2015 Share Posted May 14, 2015 Just wrap the tag around the image <a href="#" target="_blank"><img src="images/image.png" width="200" height="54" style="margin: 20px 0 45px 20px;" alt="logo"></a> It doesn't look like you really need a table there at all. You should only use tables to display information that must be described by rows and columns. Link to comment Share on other sites More sharing options...
shirleyh Posted May 14, 2015 Author Share Posted May 14, 2015 It's actually not that image, it's the background image I'm trying to link. That other image isn't what I want clickable. Link to comment Share on other sites More sharing options...
Ingolme Posted May 14, 2015 Share Posted May 14, 2015 The background image of which element? Link to comment Share on other sites More sharing options...
shirleyh Posted May 14, 2015 Author Share Posted May 14, 2015 at the top: body { background-image: url("images/best.jpg"); background-position: 100; background-repeat: no-repeat;} Link to comment Share on other sites More sharing options...
Ingolme Posted May 14, 2015 Share Posted May 14, 2015 You want a link that encompasses the entire page? Link to comment Share on other sites More sharing options...
dsonesuk Posted May 14, 2015 Share Posted May 14, 2015 Transitional doctype anchor link wrapping block elements is not supported, but by using HTML5 doctype this is now allowed.With Transistional doctype, you will have to use a anchor link that does not wrap anything (placed anywhere in body) that uses position: absolute; with top:0; left: 0; right: 0; bottom: 0; you would also need to adjust z-index so specific elements can be accessed, for example a additional link by giving it a higher z-index. Link to comment Share on other sites More sharing options...
shirleyh Posted May 14, 2015 Author Share Posted May 14, 2015 (edited) HTML5 is not allowed for this ad. Yes I want the entire background image clickable, hence the title of my posting. It's all working except the error with the table in my <a> However if I move it or change it, the link no longer works. Edited May 14, 2015 by shirleyh Link to comment Share on other sites More sharing options...
dsonesuk Posted May 14, 2015 Share Posted May 14, 2015 You can't target just background image with what you have, just the body elements outer edges. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ad</title> <style type="text/css"> html, body {height: 100%; padding:0; margin: 0;} body { background-image: url("clonewars_body.jpg"); background-position: 100px; background-repeat: no-repeat; } #bg_link {position:absolute; left:0; top:0; right:0; bottom: 0; z-index:0;} #bg_link ~ * {position: relative; z-index: 10;} h1 a:hover {color:red;} </style> </head> <body> <a id="bg_link" href="http://webist_link.html" target="_blank"></a> <table class= "container" width="650" cellspacing="0" cellpadding="0" align="left"> <tr> <td valign="top"> <img src="bl_main_img.jpg" width="200" height="54" style="margin: 20px 0 45px 20px;" alt="logo"> <h1 style="font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 38px; color: #ffffff; text-align: left; line-height: 110%; font-weight:400; margin: 65px 300px 50px 20px;"><a href="/"> Body copy here</a></h1> </td> </tr> </table> </body></html> Link to comment Share on other sites More sharing options...
shirleyh Posted May 14, 2015 Author Share Posted May 14, 2015 Oh well, I tried. Seemed like I was just missing something small. Thanks everyone for the feedback. Link to comment Share on other sites More sharing options...
COBOLdinosaur Posted May 15, 2015 Share Posted May 15, 2015 If the only way to do it is with the invalid code, then it is self defeating to run an add that way. the Search engine crawlers parse the same way as the validator, and when they see something like that they will not index the page. If you are doing it for an email campaign you will find that it gets blocked more frequently then email with regular ads because it wil look like a phishing scam to many email filers. Link to comment Share on other sites More sharing options...
Ingolme Posted May 15, 2015 Share Posted May 15, 2015 Search engines actually don't care if the code is invalid. It's just that valid HTML is easier to interpret than invalid code. If the browser can read it, so can the search engine robot. Link to comment Share on other sites More sharing options...
COBOLdinosaur Posted May 15, 2015 Share Posted May 15, 2015 Search engines actually don't care if the code is invalid. Wrong. I have been doing those kind of experiment for over 10 years. Every time Google makes a change I run experiments. It used to be the crawlers just tried to go around errors or worst case only partially indexed. Howeve startin in July 2013, they start ed penalizing pages with invalid code, and the penalty has been increasing. The April change to penalize pages that are not 'mobile friendly' is just an extension of that. In the last round of test I ran for invalid code in Feb 2015, A page with more than 5 structural errors or any serious mistagging lost on average 8% of ranking weight for most page that would be a drop of 1 or 2 positions in the SERPs. A relatively heavy penalty for just one weighting factor. Right now I am running similar testing to see the effect of the 'mobile frienly' thing and it looks like an even heavier penalty, but it is being narrowly appled depending on the user device. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 15, 2015 Share Posted May 15, 2015 You have two options, that will validate: 1) Apply background-image: to anchor and make it same size as image and position it 2) Is not to use background-image, but use a img tag;. (1) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ad</title> <style type="text/css"> html, body {height: 100%; padding:0; margin: 0;} body { /*background-image: url("clonewars_body.jpg"); background-position: 100px; background-repeat: no-repeat;*/ } #bg_link {position:absolute; left:50%; top:50%; ; margin-top: -390px; z-index:0; background-image: url("images/best.jpg"); width: 1022px; height: 780px;} /*margin-left = half of total width / margin-top: = half of total height; this is for centering image, but adjust for your requirements */ #bg_link ~ * {position: relative; z-index: 10;} h1 a:hover {color:red;} </style> </head> <body> <a id="bg_link" href="http://webist_link.html" target="_blank"></a> <table class= "container" width="650" cellspacing="0" cellpadding="0" align="left"> <tr> <td valign="top"> <img src="bl_main_img.jpg" width="200" height="54" style="margin: 20px 0 45px 20px;" alt="logo"> <h1 style="font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 38px; color: #ffffff; text-align: left; line-height: 110%; font-weight:400; margin: 65px 300px 50px 20px;"><a href="/"> Body copy here</a></h1> </td> </tr> </table> (2) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ad</title> <style type="text/css"> html, body {height: 100%; padding:0; margin: 0;} body { /*background-image: url("images/best.jpg"); background-position: 100px; background-repeat: no-repeat;*/ } #bg_link {position:absolute; left:50%; top:50%; ; margin-top: -390px; z-index:0;} /*margin-left = half of total width / margin-top: = half of total height; this is for centring image, but adjust for your requirements */ #bg_link ~ * {position: relative; z-index: 10;} h1 a:hover {color:red;} </style> </head> <body> <a id="bg_link" href="http://webist_link.html" target="_blank"><img alt="" src="images/best.jpg"></a> <table class= "container" width="650" cellspacing="0" cellpadding="0" align="left"> <tr> <td valign="top"> <img src="bl_main_img.jpg" width="200" height="54" style="margin: 20px 0 45px 20px;" alt="logo"> <h1 style="font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 38px; color: #ffffff; text-align: left; line-height: 110%; font-weight:400; margin: 65px 300px 50px 20px;"><a href="/"> Body copy here</a></h1> </td> </tr> </table> </body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted May 16, 2015 Share Posted May 16, 2015 Wrong. I have been doing those kind of experiment for over 10 years. Every time Google makes a change I run experiments. It used to be the crawlers just tried to go around errors or worst case only partially indexed. Howeve startin in July 2013, they start ed penalizing pages with invalid code, and the penalty has been increasing. The April change to penalize pages that are not 'mobile friendly' is just an extension of that. In the last round of test I ran for invalid code in Feb 2015, A page with more than 5 structural errors or any serious mistagging lost on average 8% of ranking weight for most page that would be a drop of 1 or 2 positions in the SERPs. A relatively heavy penalty for just one weighting factor. Right now I am running similar testing to see the effect of the 'mobile frienly' thing and it looks like an even heavier penalty, but it is being narrowly appled depending on the user device. The mobile-friendly thing was clear because they announced it themselves. When it comes to basic HTML validation, I believe it holds much less weight than proper <title>, <h1-6> and <p> usage and a whole lot less weight than having a large amount of quality backlinks. You're free to bring in your research statistics so I can review them. I hope you're counting all possible influential factors when doing your tests. Many high ranking websites have invalid HTML: http://validator.w3.org/check?uri=google.com http://validator.w3.org/check?uri=http%3A%2F%2Fwww.coca-cola.com%2Fglobal%2Fglp.html http://validator.w3.org/check?uri=nike.com 1 Link to comment Share on other sites More sharing options...
COBOLdinosaur Posted May 17, 2015 Share Posted May 17, 2015 You're free to bring in your research statistics so I can review them. The research is paid for by clients and has been used to improve ranking, user engagement, and performance. I don't need independent review or validation. I get that from clients paying for my services and asking for more. And just so you know the kinds of things I do for clients is all white hat, I have never had Google impose a penalty on any client as a result of them doing SEO based on my research instead of speculation, rumor, opinion, and misleading information from Google. As for backlinks over the past 30 months they have been dowgraded 3 times in the weighting and will continue with that trend as long as Google tries to stop the gaming of SERPs with link creation schemes. Link to comment Share on other sites More sharing options...
shirleyh Posted June 16, 2015 Author Share Posted June 16, 2015 Just as a follow up to my original posting, I sent the original version I had with the link as the entire background image and an alternate with only a button to open the link. The original was ok'd and used apparently with no problems. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now