Button not clickable |
Button not clickable |
AAG1991 |
Jun 13 2023, 12:36 PM
Post
#1
|
Group: Members Posts: 3 Joined: 13-June 23 Member No.: 28,955 |
Hey everyone! I am using this code section for an HTML template to create a button. While the button appears, it isn't clickable, and there isn't a space to add to the website. This is beyond my basic HTML ability.
Can you assist in making the button clickable and go to a website? Here is the code: <table style="font-family: 'Open Sans',sans-serif;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="v-container-padding-padding" style="overflow-wrap: break-word; word-break: break-word; padding: 10px; font-family: 'Open Sans',sans-serif;" align="left"><!-- [if mso]><style>.v-button {background: transparent !important;}</style><![endif]--> <div align="center"><!-- [if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:38px; v-text-anchor:middle; width:128px;" arcsize="10.5%" stroke="f" fillcolor="#253e85"><w:anchorlock/><center style="color:#FFFFFF;font-family:'Open Sans',sans-serif;"><![endif]--> <a class="v-button" style="box-sizing: border-box; display: inline-block; font-family: arial,helvetica,sans-serif; text-decoration: none; -webkit-text-size-adjust: none; text-align: center; color: #ffffff; background-color: #253e85; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; width: auto; max-width: 100%; overflow-wrap: break-word; word-break: break-word; word-wrap: break-word; mso-border-alt: none; font-size: 15px;" target="_blank" rel="noopener"> <span style="display: block; padding: 10px 20px; line-height: 120%;"><span style="line-height: 18px;">Call to Action</span></span> </a> <!-- [if mso]></center></v:roundrect><![endif]--></div> </td> </tr> </tbody> </table> This post has been edited by AAG1991: Jun 13 2023, 12:38 PM |
coothead |
Jun 13 2023, 12:58 PM
Post
#2
|
Advanced Member Group: Members Posts: 210 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
coothead |
AAG1991 |
Jun 13 2023, 01:01 PM
Post
#3
|
Group: Members Posts: 3 Joined: 13-June 23 Member No.: 28,955 |
coothead Thanks for the post. I have used href= before; just not sure where to place it in this section of code. |
coothead |
Jun 13 2023, 02:05 PM
Post
#4
|
Advanced Member Group: Members Posts: 210 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
coothead This post has been edited by coothead: Jun 13 2023, 02:15 PM |
AAG1991 |
Jun 13 2023, 02:16 PM
Post
#5
|
Group: Members Posts: 3 Joined: 13-June 23 Member No.: 28,955 |
coothead Excellent! Thank you so much! |
coothead |
Jun 13 2023, 02:19 PM
Post
#6
|
Advanced Member Group: Members Posts: 210 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
coothead |
Christian J |
Jun 13 2023, 06:03 PM
Post
#7
|
. Group: WDG Moderators Posts: 9,687 Joined: 10-August 06 Member No.: 7 |
|
pandy |
Jun 14 2023, 03:17 AM
Post
#8
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,744 Joined: 9-August 06 Member No.: 6 |
A funny thing about Office HTML. It's meant to cater to IE, but more often than not IE is the browser it doesn't work in...
And IE is pretty much dead now which adds to the pointlessness. |
Jason Knight |
Jun 15 2023, 06:18 PM
Post
#9
|
Advanced Member Group: Members Posts: 109 Joined: 25-December 22 Member No.: 28,719 |
It seems to have been made with a MS Office program, resulting in lots of proprietary/unnecessary code. If possible, it's better to avoid using Office programs for HTML code. Thus the table for nothing, static style in the markup, made up fairy tale "mso:" BS that has nothing to do with HTML, pixel metrics, and host of other "delta alpha foxtrot uniform quebec" that means the entire mess should be pitched in the trash. The only thing you can learn from Microshaft is how NOT to use web technologies. This post has been edited by Jason Knight: Jun 15 2023, 06:18 PM |
Jason Knight |
Jun 15 2023, 06:26 PM
Post
#10
|
Advanced Member Group: Members Posts: 109 Joined: 25-December 22 Member No.: 28,719 |
Just to show what we're all talking about in how bad Microsoft's markup is...
This is roughly ALL the markup you should have. CODE <div class="callToActionLink"> <a href="#">Call to Action</a> </div> (replace the # above with the URI you want the <a>nchor to open. And it's an anchor, not a "button". <button> is a tag for scripting-only or form-only behaviors, something a CTA likely would not (and should not) be. Don't sweat that too much, the jargon and terminology takes a lot of adjustment. It's just that if you don't know the right words, it makes it harder for the rest of us to help you. Sucks huh? Microsofts incompetent nonsense has saddled you with a table for nothiing, style in the markup, and a whole host of other just plain garbage code. To the tune of 1456 characters of code doing 350 bytes job! That's over four times the code actually needed for such a simple centered anchor. STYLE does not belong in your HTML. If anyone or anything is telling you to say what things look like in your markup in all but the rarest of corner cases? Be it style="", <style>, or even classes that say what style to use? They're talking out their arse. The style belongs in an external file called a "stylesheet" which for this would go something like: CODE .callToActionLink { text-align:center; padding:1rem; font-family:"open sans",arial,helvetica,sans-serif; } .callToActionLink a { display:inline-block; padding:0.5rem 1rem; text-decoration:none; background:#238; color:#FFF; border-radius:0.25rem; } Note that by using REM it dynamically scales to the user preference so they don't have to zoom. Anyone telling you it's ok to design in pixels is equally full of manure. Here's a pen showing that in action. https://codepen.io/jason-knight/pen/eYQJXmz This post has been edited by Jason Knight: Jun 15 2023, 06:34 PM |
Lo-Fi Version | Time is now: 24th June 2024 - 01:51 AM |