Welcome to WebmasterWorld Guest from 35.173.234.237

Forum Moderators: open

Message Too Old, No Replies

Selector/attribute problem

some work and some do not

     
1:04 pm on Jul 30, 2015 (gmt 0)

New User

joined:July 30, 2015
posts: 1
votes: 0


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.
2:19 pm on July 30, 2015 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4402
votes: 316


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.
5:56 pm on Aug 1, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15765
votes: 831


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

Citation?
8:08 pm on Aug 1, 2015 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4402
votes: 316


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.
10:47 pm on Aug 9, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 21, 2002
posts: 772
votes: 14


where i add meta tag in my website

Between the head tags.

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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members