When you add a button on a Mailchimp template, only the text within the button is clickable. Not sure why they designed it this way...is there a good reason for this?
If not, is there an easy way to make the entire button clickable...I've thought about just creating a button image...and making it linked...but trying to avoid that if possible.
Give this article and technique a go.
https://www.emailonacid.com/blog/details/C13/bulletproof_buttons_for_office_365_and_everything_else
I use it every where and it has a fall back for Outlook.
Be sure to check the comments for any tips from users who have figured a few quirks out from the originally supplied snippet.
Like my comment about adding stroke="f" to the snippet to remove the default stroke on linked buttons.
The easiest way to get a button fully clickable is to build the button with an HTML table and wrap the table in an anchor, like so:
<a href="http://www.website.com">
<table border="0" width="">
<tr>
<td><span>Click Here</span></td>
</tr>
</table>
</a>
It is not valid in HTML4, but is valid in HTML5, but not much of what goes into an HTML email is valid, so I do not worry about it.
The problem with this approach is that it is still hard to edit in most, if not all, HTML Email platforms, such as Mail Chimp or Campaign Monitor. A non-coder who sends email will have to go into HTML view to edit the email - not ideal.
In MailChimp, their editor breaks the parent anchor, stripping it out altogether.
Test it in your email platform of choice, it is a simple solution.
I have a webpage, which has an overall form element surrounding all the code on the page between the <body> ... </body> tags on the page.
As part of the webpage, there are two additional forms inside this to add and edit rows on a tables contained on the webpage.
How are the form elements handled on a webpage? Will the browser know what to process a webpage laid out:
<body>
<form id="FullPageForm">
Content here.
<form id="AdditionalFomr1">
Form1 elements only
</form>
<form id="AdditionalFomr2">
Form2 elements only
</form>
</form>
</body>
Can the browser isolate the various different form sections on the page correctly?
Having <forms> nested inside other <forms> is not valid in HTML4 or HTML5.
See the relevant part of the HTML5 Specification below:
4.10.3 The <form> element - Content model: Flow content, but with no <form> element descendants.
They can however, be siblings, e.g.
<form id="AdditionalFomr1">
Form1 elements only
</form>
<form id="AdditionalFomr2">
Form2 elements only
</form>
<form id="AdditionalFomr3">
Form3 elements only
</form>
Now that your forms are separated, it's easy to differentiate between what action should happen when each one is submitted etc.
it will not work. nested variables is not supported by any browser.
ya your code is working
but you have done silly mistake in above code
see in tag you used '?' instead of '>' sign
and put forms in a table form
so you can get formal look
I declared an iFrame in my html, and the source is my XQuery file. In my XQuery, I defined a <div>, within which I also declared a button named "convert".
My XQuery file basically looks like this (this is the source for the iFrame）
return
<div id="content">
<table>
....
<tbody>
{
...
<td>
<a id="{$t/#id}"
rel="nofollow"
target="_new"
name="{util:document-name($t)}:{util:node-id($t)}"
href=
"http://localhost:8080/exist/rest/db/motorola/xquery/toDita.xql?xml={
util:document-name($t)
}&xsl=mot2dita.xsl">
<input type="submit" value="convert"/>
</a>
</td>
...
}
</tbody>
</table>
</div>
As you can see, in a td, I declared a button called "convert", and the "href" gives the link. Right now this button works perfectly in Firefox and Chrome(opening a new window to do the task), but in IE, after clicking it, it just doesn't do anything.
I wonder if this is a browser issue or my XQuery script has problems. Thanks in advance for helping out.
<input> tags are not valid inside <a> tags. The XHTML code is therefore not valid, which will account for the inconsistent behaviour - some browsers are better at compensating for odd cases like this than others.
Recommend you remove the <input> entirely and use CSS to style your <a> tag to look like a button, if it's just the look of a button that you're after.
Unless you're inside a form, it's not going to submit anything...definitely not an A tag.
I prefer to do these with Jquery UI's button feature. It gets the desired behavior you're looking for, is progressively enhanced and tested to handle the full gamut of browsers, and can be done use a href links, button elements, or input type=submit elements. Plus, styling looks great and is instantaneous.
Here's a quick tut: http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/
Locked. This question and its answers are locked because the question is off-topic but has historical significance. It is not currently accepting new answers or interactions.
HTML being the most widely used language (at least as a markup language) has not gotten its due credit.
Considering that it has been around for so many years, things like the FORM / INPUT controls have still remained same with no new controls added.
So at least from the existing features, do you know any features that are not well known but very useful.
Of course, this question is along the lines of:
Hidden Features of JavaScript
Hidden Features of CSS
Hidden Features of C#
Hidden Features of VB.NET
Hidden Features of Java
Hidden Features of classic ASP
Hidden Features of ASP.NET
Hidden Features of Python
Hidden Features of TextPad
Hidden Features of Eclipse
Do not mention features of HTML 5.0, since it is in working draft
Please specify one feature per answer.
Using a protocol-independent absolute path:
<img src="//domain.example/img/logo.png"/>
If the browser is viewing an page in SSL through HTTPS, then it'll request that asset with the HTTPS protocol, otherwise it'll request it with HTTP.
This prevents that awful "This Page Contains Both Secure and Non-Secure Items" error message in IE, keeping all your asset requests within the same protocol.
Caveat: When used on a <link> or #import for a stylesheet, IE7 and IE8 download the file twice. All other uses, however, are just fine.
The label tag logically links the label with the form element using the "for" attribute. Most browsers turn this into a link which activates the related form element.
<label for="fiscalYear">Fiscal Year</label>
<input name="fiscalYear" type="text" id="fiscalYear"/>
The contentEditable property for (IE, Firefox, and Safari)
<table>
<tr>
<td><div contenteditable="true">This text can be edited<div></td>
<td><div contenteditable="true">This text can be edited<div></td>
</tr>
</table>
This will make the cells editable! Go ahead, try it if you don't believe me.
I think the optgroup tag is one feature that people don't use very often. Most people I speak to don't tend to realise that it exists.
Example:
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
My favourite bit is the base tag, which is a life saver if you want to use routing or URL rewriting...
Let's say you are located at:
www.anypage.example/folder/subfolder/
The following is code and results for links from this page.
Regular Anchor:
Click here
Leads to
www.anypage.example/folder/subfolder/test.html
Now if you add base tag
<base href="http://www.anypage.example/" />
Click here
The anchor now leads to:
www.anypage.example/test.html
<img onerror="{javascript}" />
onerror is a JavaScript event that will be fired right before the little red cross (in IE) picture is shown.
You could use this to write a script that will replace the broken image with some valid alternative content, so that the user doesn't have to deal with the red cross issue.
On the first sight this can be seen as completely useless, because, wouldn't you know previously if the image was available in the first place? But, if you consider, there are perfect valid applications for this thing; For instance: suppose you are serving an image from a third-party resource that you don't control. Like our gravatar here in SO... it is served from http://www.gravatar.com/, a resource that the stackoverflow team doesn't control at all - although it is reliable. If http://www.gravatar.com/ goes down, stackoverflow could workaround this by using onerror.
The <kbd> element for marking up for keyboard input
Ctrl+Alt+Del
<blink>
Must be used for anything important on the site. Most important sites wrap all of content in blink.
<marquee>
Creates a realistic scrolling effect, great for e-books etc.
Edit: Easy-up fellas, this was just an attempt at humour
Not very well known but you can specify lowsrc for images which will show the lowsrc while loading the src of the image:
<img lowsrc="monkey_preview.png" src="monkey.png" />
This is a good option for those who don't like interlaced images.
A little bit of trivia: at one point this property was obscure enough that it was used to exploit Hotmail, circa 2000.
DEL and INS to mark deleted and inserted contents:
HTML <del>sucks</del> <ins>rocks</ins>!
The button tag is the new input submit tag and a lot of people are still not familiar with it. The text in the button can for example be styled using the button tag.
<button>
<b>Click</b><br />
Me!
</button>
Will render a button with two lines, the first says "Click" in bold and the second says "Me!". Try it here.
Specify the css for printing
<link type="text/css" rel="stylesheet" href="screen.css" media="screen" />
<link type="text/css" rel="stylesheet" href="print.css" media="print" />
the <dl> <dt> and <dd> items are often forgotten and they stand for Definition List, Definition Term and Definition.
They work similarly to an unordered list (<ul>) but instead of single entries it's more like a key/value list.
<dl>
<dt>What</dt><dd>An Example</dd>
<dt>Why</dt><dd>Examples are good</dd>
</dl>
Not exactly hidden, but (and this is IE's fault) not enough people know about thead, tbody, tfoot for my tastes. And how many of you knew tfoot is supposed to appear above tbody in markup?
The wbr or word-break tag. From Quirksmode:
(word break) means: "The browser
may insert a line break here, if it
wishes." It the browser does not think
a line break necessary nothing
happens.
<div class="name">getElements<wbr>ByTagName()</div>
I give the browser the option of
adding a line break. This won't be
necessary on very large resolutions,
when the table has plenty of space. On
smaller resolutions, however, such
strategically placed line breaks keep
the table from growing larger than the
window, and thus causing horizontal
scrollbars.
The there is also the HTML entity mentioned on the same page. This is the same as wbr but when a break is inserted a hypen (-) is added to signify a break. Kind of like how it is done in print.
An example:
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
A much underused feature is the fact that just about every element, that provides visible content on the page, can have a 'title' attribute.
Adding such an attribute causes a 'tooltip' to appear when the mouse is 'hovered' over the element, and can be used to provide non-essential - but useful - information in a way that doesn't cause the page to become too crowded. (Or it can be a way of adding information to an already crowded page)
Applying multiple html/css classes to one tag. Same post here
<p class="Foo Bar BlackBg"> Foo, Bar and BlackBg are css classes</p>
We all know about DTD's or Document Type Declarations (those things which make you page fail with the W3C validator). However, it is possible to extend the DTDs by declaring an attribute list for custom elements.
For example, the W3C validator will fail for this page because of behavior="mouseover" added to the <p> tag. However, you can make it pass by doing this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
[
<!ATTLIST p behavior CDATA #IMPLIED>
]>
See more at about Custom DTDs at QuirksMode.
We can assign base 64 encoded string as a source/href attribute of image, JavaScript,iframe,link
e.g.
<img alt="Embedded Image" width="297" height="246"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA..." />
div.image {
width:297px;
height:246px;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA...);
}
<image>
<title>An Image</title>
<link>http://www.your.domain</link>
<url>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA...</url>
</image>
<link rel="stylesheet" type="text/css"
href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />
<script type="text/javascript"
href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>
References
How can I construct images using HTML markup?
Binary File to Base64 Encoder / Translator
I recently found out about the fieldset and label tags. As above, not hidden but useful for forms.
<fieldset> explanation
Example:
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form>
You can use the object tag instead of an iframe to include another document in the page:
<object data="data/test.html" type="text/html" width="300" height="200">
alt : test.html
</object>
<optgroup> is a great one that people often miss out on when doing segmented <select> lists.
<select>
<optgroup label="North America">
<option value='us'>United States</option>
<option value='ca'>Canada</option>
</optgroup>
<optgroup label="Europe">
<option value='fr'>France</option>
<option value='ir'>Ireland</option>
</optgroup>
</select>
is what you should be using instead of
<select>
<option value=''>----North America----</option>
<option value='us'>United States</option>
<option value='ca'>Canada</option>
<option value=''>----Europe----</option>
<option value='fr'>France</option>
<option value='ir'>Ireland</option>
</select>
Most are also unaware of the fact that you can distinguish the form button pressed by just giving them a name/value pair. E.g.
<form action="process" method="post">
...
<input type="submit" name="edit" value="Edit">
<input type="submit" name="delete" value="Delete">
<input type="submit" name="move_up" value="Move up">
<input type="submit" name="move_up" value="Move down">
</form>
In the server side, the actual button pressed can then be obtained by just checking the presence of the request parameter associated with the button name. If it is not null, then the button was pressed.
I've seen a lot of unnecessary JS hacks/workarounds for that, e.g. changing the form action or changing a hidden input value beforehand depending on the button pressed. It's simply astonishing.
Also, I've seen almost as many JS hacks/workarounds to gather the checked ones of multiple checkboxes like as in table rows. On every select/check of a table row the JS would add the row index to some commaseparated value in a hidden input element which would then be splitted/parsed further in the server side. That's result of unawareness that you can give multiple input elements the same name but a different value and that you can still access them as an array in the server side. E.g.
<tr><td><input type="checkbox" name="rowid" value="1"></td><td> ... </td></tr>
<tr><td><input type="checkbox" name="rowid" value="2"></td><td> ... </td></tr>
<tr><td><input type="checkbox" name="rowid" value="3"></td><td> ... </td></tr>
...
The unawareness would give each checkbox a different name and omit the whole value attribute. In some JS-hack/workaround-free situations I've also seen some unnecessarily overwhelming magic in the server side code to distinguish the checked items.
Colgroup tag.
<table width="100%">
<colgroup>
<col style="width:40%;" />
<col style="width:60%;" />
</colgroup>
<thead>
<tr>
<td>Column 1<!--This column will have 40% width--></td>
<td>Column 2<!--This column ill have 60% width--></td>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
</table>
If the for attribute of a <label> tag isn't specified, it is implicitly set as the first child <input>, i.e.
<label>Alias: <input name="alias" id="alias"></label>
is equivalent to
<label for="alias">Alias:</label> <input name="alias" id="alias">
Button as link, no JavaScript:
You can put any kind of file in the form action, and you have a button that acts as a link. No need to use onclick events or such. You can even open-up the file in a new window by sticking a "target" in the form. I didn't see that technique in application much.
Replace this
Download file
with this:
<form method="get" action="myfile.pdf" target="_blank">
<input type="submit" value="Download file">
</form>
Simplest way to refresh the page in X seconds - META Refresh
<meta http-equiv="refresh" content="600">
The value in content signifies the seconds after which you want the page to refresh.
[Edit]
<meta http-equiv="refresh" content="0; url=foobar.example/index.html">
To do a simple redirect!
(Thanks #rlb)
<html>, <head> and <body> tags are optional. If you omit them, they will be silently inserted by the parser in appropriate places. It's perfectly valid to do so in HTML (just like implied <tbody>).
HTML in theory is an SGML application. This is probably the shortest valid HTML 4 document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title//<p/
The above doesn't work anywhere except W3C Validator. However shortest valid HTML5 text/html document works everywhere:
<!DOCTYPE html><title></title>
The lang attribute is not very well known but very useful. The attribute is used to identify the language of the content in either the whole document or in a single element. Langage codes are given in ISO 2-letter Language code (i.e. 'en' for English, 'fr' for French).
It's useful for browsers who can adjust their display of quotation marks, etc. Screen readers also benefit from the lang attribute as well as search engines.
Sitepoint has some nice explanation of the lang attribute.
Examples
Specify the language to be English for the whole document, unless overridden by another lang attribute on a lower level in the DOM.
<html lang="en">
Specify the language in the following paragraph to be Swedish.
<p lang="sv">Ät din morgongröt och bli stor och stark!</p>
The "!DOCTYPE" declaration.
Don't think it's a hidden feature, but it seems it's not well known but very useful.
e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">