Selector/attribute problem

some work and some do not

[gettinthere]

Hello all
Normally I can figure these things out but I am no HTML5 or CSS3 expert and I am stumped. So here is the problem.
A fairly straightforward aside list

<aside width="10px">
<nav>
<ul>
<a href="index.html" alt="Smiley face" width="42" height="42"><li>Home</li></a>
<a href="index.html" alt="Smiley face" width="42" height="42"><li>Refresh</li></a>
<a href="about.html" alt="Smiley face" width="42" height="42"><li>About Us</li></a>
<a href="contact.html" alt="Smiley face" width="42" height="42"><li>Contact Us</li></a>
</ul>
</nav>
<br><br><br><br><br><br>
<img src="images/html5.png" height="100" width="100" style="position:relative; left:0px;">
<br><br><br><br><br><br>
</aside>

Nothing remarkable there so here is the corresponding CSS

nav a li:hover{text-decoration: underline overline; 
font-size:36; 
font-weight:bold; 
color:green;}/* Does work */
nav a li:active{text-decoration: none;
color:white;} /* Does work */
nav a li:link{color:blue;}/* Does not work */
nav a li:visited{color:red;}/* Does not work */

Should work I think but the hover and active do while the link and visited do not. I can change all attributes for the working two, font, color, underline, overline etc. I have played with the order of the lines, XP and Win8.1, FF IE Opera and Chrome. It plain does not work but it looks to me like it should. Does anybody have any ideas?

P.S. Sorry about any formatting issues. This is my first post on this forum.

[not2easy]

Hello gettinthere and welcome to the forums. Unfortunately there are many errors in your code, if this is copied/pasted and not subject to typos. The first basic rule of html is to make sure that your opening tags have a corresponding closing tag. The second basic rule is to make sure that tags open and close in the proper order. Then there are pixels.

First, this code:

<a href="contact.html" alt="Smiley face" width="42" height="42"><li>Contact Us</li></a>

generally, the <li> tag contains the <a (link) tag and not the anchor text.

<li><a href="contact.html" alt="Smiley face" width="42" height="42">Contact Us</a></li>

is the usual order. The way it is written, the 'li' element controls the appearance of your link text, not the 'a:' element.

Then there is the size issue. The <aside container width is "10px" which is less than one character width for most font settings, while the width setting for the link is "42px" so some of your code may appear to work, but only because the <li gives it enough width. The "Contact Us" anchor text will not normally fit in a 42px wide area, much less a 10px wide area when each character is more than 10px wide.

Note - the "alt" tag is used for images, not links. You have no images in your links. You have not shared your doctype but generally,

width="10px"

is not used with html5. These coding/doctype mismatches cause browsers to use "Quirks Mode" where they try to guess at things.

I do not like to recommend the w3schools site but one needs to start somewhere and given the number of coding errors in this small sample, you could benefit from starting at the beginning to learn better basic html. We all started somewhere and that site is a good hands on way to learn basics.

[lucy24]

These coding/doctype mismatches cause browsers to use "Quirks Mode"

Citation?

[not2easy]

In this case I do not know that it is an issue, it is something to be aware of when creating html documents. Using no doctype at all will make most browsers render in quirks mode. The OP here did not mention a doctype so I do not know that it applies. HTML5 was mentioned and it is supposed to completely bypass rendering issues, but even html5 can render differently in newer versions of IE - and even the new Edge browser want us to use specific UA tags and headers.

At the whatwg site: [quirks.spec.whatwg.org...] the use of psuedo-classes ( as in :active and :hover for links) and lengths without units (as in width="42") are cited as quirks, legacy coding that may need additional tags to avoid quirks mode.

Another article that offers doctype/quirks mode information across browsers and versions is at wikipedia: [en.wikipedia.org...]

This last site, regarding doctype/quirks mode issues is from Henri Sivonen at [hsivonen.fi...] and has the most interesting background on the IE issues.

If you want to try it at home, use

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

and no matter how perfectly the html is coded, it will render in quirks mode. Some of the html given as an example here has instances of coding that were common in html 4.01 which was the reason I had wondered whether it used an old doctype.

[Hoople]

where i add meta tag in my website

Between the head tags.

<head>
<meta abc xyz>
</head>