PDA

View Full Version : Proper Way to Write a Linked <li> Without JavaScript


kremo5le
07-27-2012, 05:50 AM
Hello,

I am working on 4 icons that are styled with images and other goodies as you see here: devDOTottercreativestudioDOTcom (top right).

If I write:

<a href="mailto:my@email.com" class="icon" title="Let's talk!"><li id="contact">Contact</li></a>

...it works but it does not pass the HTML5 verification (which I want).

If I write:

<li id="contact"><a href="my@email.com" class="icon" title="Let's talk!">Contact</a></li>

...it does not work but it passed the validation.

I am not sure what I'm doing wrong here. :?:

edbr
07-27-2012, 06:14 AM
passes with warnings
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body><ul><li id="contact"><a href="mailto:my@email.com" class="icon" title="Let's talk!">Contact</a></li></ul>
</body>
</html>

domedia
07-27-2012, 03:19 PM
kremo5le, The error message, when you validate, will say what you are doing wrong, you just have to read it and take action.

You cannot put a block element inside an inline element.

Your second example is correct, and works.

kremo5le
07-28-2012, 12:10 AM
passes with warnings
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body><ul><li id="contact"><a href="mailto:my@email.com" class="icon" title="Let's talk!">Contact</a></li></ul>
</body>
</html>


Hey there,

Let me simplify it: http://dev.ottercreativestudio.com/ < The "Contact" icon does not work.

The other 3 do because I linked them the "wrong way."

kremo5le
07-28-2012, 02:15 AM
Hi guys,

I eliminated the <ul> + <li> and simplified the whole thing with a few <div>. It works flawlessly and it passes W3C 100%.

Thanks!