SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    May 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    SitePoint Addict Kakarot720's Avatar
    Join Date
    Feb 2001
    Location
    Washington DC
    Posts
    208
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It sounds like there is some CSS associated with the <p> tag. Are you using a framework or starting from a blank screen?

  3. #3
    SitePoint Member
    Join Date
    May 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kakarot720 View Post
    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 ). 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

  4. #4
    SitePoint Member
    Join Date
    May 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Member
    Join Date
    May 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,725
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    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'

  7. #7
    SitePoint Member
    Join Date
    May 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    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...

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,725
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    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/

  9. #9
    SitePoint Member
    Join Date
    May 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •