Behaviour of links

[Ted]

I am using CSS and XHTML to create my website. When I create a hyperlink to
another page of the site from a certain piece of text within a <p> the
behaviour previewed inthe browser is as follows. On first clicking the linked
text...the text jumps down to a new line within the paragraph (occupying the
whole width of the container in which the paragraph is contained) and changes
to the 'selected' style i.e. purple text. On clicking the linked text again,
the link works OK.

Can anybody tell me how to make the link work on the first click?

 

[David Berry]

What is the CSS you're using? Is the link inside of a div tag with a
positioning style on it? Is there a URL where we can see what's happening?

 

[Ted]

David,

I can't give you a URL as I haven't published yet. I'll try giving you the
relevant bit of the CSS and the html - if this doesn't enable you to id the
problem let me know and I'll publish what I've got so far and let you have
the URL.

Relevant bit of the external CSS is:
a:link
{
color:blue;
background-color:white;
border:none;
}
a:link:active
{
color:blue;
background-color:white;
border:none;
}

a:visited
{
colorurple;
background-color:white;
border:none;
}

a:visited:active
{
colorurple;
background-color:white;
border:none;
}

Relevant bit of the html is:

<p>
...to Jaraina English Springer Spaniels. Here you can meet our dogs and
find out about their achievements in the show ring, follow links to <a
href="other ESS sites.htm">other English Springer Spaniel sites</a>, and see
photos of Jaraina dogs past and present.
</p>

Thanks a lot

Ted

 

[Ted]

David,

I think I'm one step closer to the cause of the problem. The link seems to
be picking up behaviour from the part of the CSS which governs the behavior
of the links in the menu.....which is shown below. If I comment out this
section of the CSS, the link behaves OK (though the menu screws up of
course). How do I stop all my links from picking up behaviour from the nav ?

#nav ul a
{
border-style:solid;
border-width:1px;
display: block;
text-decoration: none;
background:#CC3300;
color: #ECFFEC;
width:100%;
padding-left:.5em; padding-right:.5em; padding-top:.2em;
padding-bottom:.2em;
margin-top:1em;
}

#nav ul a:hover, a:active
{
border-style:solid;
border-width:1px;
display: block;
background:#CCCCCC;
color: #CC3300;
width: 100%;
}

#nav ul a.selected
{
border-style:solid;
border-width:1px;
display: block;
background:#FFFFFF;
color: #CC3300;
width: 100%;
}