Basic HTML Question from a complete newbie?

Dear all,

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:

<p>To find out more, contact Club Secretary Bob Dobalina on
01793 641207 or email <a href="mailto:bob@bubbleunder.com">
bob@bubbleunder.com</a>.</p>

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.

Where am I going wrong?

Many thanks.

Nick

It sounds like there is some CSS associated with the <p> tag. Are you using a framework or starting from a blank screen?

Hi,

Starting with a blanc screen (notepad :slight_smile: ). The CSS associated with the above is:

p {
font-size: small;
color: navy;
}

This is for all parahraphs, but the one with <a… doesn’t conform to the rule.

Also this CSS may be relevant:

a {
font-weight: bold;
color: black;
}

a:visited {
color: navy;
}

a:hover {
text-decoration: none;
color: white;
background-color: navy;
}

a:active {
color: yellow;
background-color: navy;
}

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.

Thank you

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.

Thanks, I’ll check it out.

Actually, there is another paragraph with an anchor in it on another page in the same website, that behaves the same… :frowning:

Welcome to Sitepoint, Nikola

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 :slight_smile: