I am working through the “Build Your Own Web Site The Right Way” book and I’ve come across a bit of markup that doesn’t work for me. It seems to work correctly in the book archive code, but when I apply it, it goes wrong. Here it is:
When I save the page in HTML and launch it, the whole paragraph highlights if you hover over it, as if it is a link. Only the email address launches when you click on it, the rest of the sentence doesn’t, but it still has the wrong color and it highlights as if it is a link.
These rule seem to apply to the paragraph text as well as to the link within it, only the text that is not an email address, doesn’t turn into an email msg. But it is colored in black, rather than navy and highlights like a link when you hover over it.
I think, the easiest way to identify why this <p> acts as it does, might be to install the Firebug Addon for Firefox and from there simply check what CSS definitions are ascribed to it.
And also you could check whether this lovely hover effect shows up in different browsers as well.
If you are not familiar with how Firebug works, you can get familiar with it here: https://getfirebug.com/whatisfirebug. It is anyways a most helpful tool for creating a website, so it is definitely worth to learn how to use it.
Are you sure you are posting the SAME code here? I tested the HTML and CSS you have posted and ONLY THE LINK highlights.
Another possibility is that your this rule is in conflict with another. For this you will need to inspect ALL your CSS and ALL your HTML not just the part you consider ‘relevant’
Thank you. I looked at all of the CSS and the HTML carefully (will do again tomorrow), but what seems clear is that the anchor declaration in CSS i.e.
a {
font-weight: bold;
}
for instance, impacts on ALL of the HTML paragraphs. I hadn’t noticed that before, but all paragraphs and all Headings, go bold. If I take the above declaration out, they go normal, but so do the links.
There is a conflict between the link declarations and everything else. Can’t find a reason why…
It is likely then that you have tag in your HTML that you did not close. If your code editor does not validate HTML , you can use this free online tool:http://validator.w3.org/
Thank you. This proved to be the case. I had done <a/> in a navigation list element instead of </a>. The validator web page spotted the error right away