WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > dotted a:link on text, not on images

Reply
  Thread Tools Display Modes
Old 1st July 07, 07:05 PM   #1
lovesdesign
WLC Member
 
Join Date: Jul 2007
Posts: 2
Default dotted a:link on text, not on images

My problem is two-fold: I'm trying to get a dotted underline on all my links, but not on images on the page that are links. I've succeeded with the images not having borders, but for some reason the links directly below the images are not showing the dotted underline, even though I have it declared in my code.

I read in another site's post that the way to get the text links w/o image links is to declare a class in the a:link, which I did.

Other text links on the page show the dotted underline, just not the ones below the images. Can anyone help?

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Welcome to Recipe Paintings</title>

<style type="text/css">


body {
background: #f8c286;

}


#wrapper {
margin: 0 auto;
width: 962px;
border: 3px solid #f7d0a5;

}

p {
font-family: "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif;
font-size: 1.0833em;
line-height: 1em;
color: #000;
margin-top: 0;

}



#toptext, #toptext p {
margin: 15px auto;
width: 962px;
text-align: center;
font-family: "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif;
font-size: 1.0833em;
line-height: 1em;
color: #000;

}


#leftcol {
width: 150px;
padding: 25px 0 0 35px;
float: left;

}

#leftcol a.one:link {
color: #000;
border-bottom: 2px dotted;

}

#leftcol a.one:visited {
color: #662c91;
border-bottom: 2px dotted;

}


#header {
background: #f8c286 url(images/rp-header.gif) top left no-repeat;
width: 274px;
height: 69px;

}


#middlecol {
float: left;
width: 547px;
height: 625px;
padding: 25px 0 0 50px;
background: #f7c185 url(images/feature-img.jpg) 50px 150px no-repeat;

}

#rightcol {
float: left;
padding: 25px 35px 0 0;

}


#footer {
font-family: "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #000;
text-align: center;
width: 900px;
margin: 0 auto 20px auto;

}


a.one:link {
color: #000;
border-bottom: 2px dotted;
text-decoration: none;

}



a.one:visited {
color: #662c91;
border-bottom: 2px dotted;
text-decoration: none;

}


a img {
border: 0;

}


</style>

</head>


<body>

<div id="toptext">As seen in Sturbridge Yankee Workshop Catalog: <a class="one" href="http://www.sturbridgeyankee.com">www.sturbridgeyankee.com </a></div>
<div id="wrapper">
<div id= "leftcol">
<a href="http://recipepaintings.com/brenda.htm"><img src="images/about-artist.png" alt="About The Artist" /></a>
<a class="one" href="http://recipepaintings.com/brenda.htm"><p>About the Artist</p></a>
<a href="http://recipepaintings.com/Prints.htm"><img src="images/prints.png" alt="Prints" /></a>
<a class="one" href="http://recipepaintings.com/Prints.htm"><p>Prints</p></a>
<a href="http://recipepaintings.com/Originals%20hyperlink.htm"><img src="images/originals.png" alt="Originals" /></a>
<a class="one" href="http://recipepaintings.com/Originals%20hyperlink.htm"><p>Originals</p></a>
<a href="http://recipepaintings.com/Prices%20hyperlink.htm"><img src="images/prices.png" alt="Prices Plus Shipping" /></a>
<a class="one" href="http://recipepaintings.com/Prices%20hyperlink.htm"><p>Prices Plus Shipping</p></a>
</div><!--closes leftcol-->

<div id= "middlecol">
<div id="header"></div>
<p style="padding-top: 15px;">Buy a framed print or have your favorite recipe painted.</p>
</div><!--closes middlecol-->

<div id= "rightcol">
<a href=""><img src="images/where-to-find.png" alt="Where To Find Us" /></a>
<a class="one" href=""><p>Where To Find Us</p></a>
</div><!--closes rightcol-->

<br style="clear: both;" />

<div id="footer">PO Box 294, Round Pond, ME 04564 | 207-529-5367 | <a class="one" href="http://www.recipepaintings.com">recipepaintings.com</a> | <a class="one" href="mailto:"recipepaintings@tidewater.net">recip epaintings@tidewater.net</div><!--closes footer -->




</div><!--closes wrapper -->



</body>
</html>
lovesdesign is offline   Reply With Quote
Old 1st July 07, 07:53 PM   #2
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: dotted a:link on text, not on images

because you specify that an <img> that is inside an anchor <a> has no border by using
a img {

use
a img {
border-bottom:2px dotted [color];
}

This
Code:
<a class="one" href="http://recipepaintings.com/Prices%20hyperlink.htm"><p>Prices Plus Shipping</p></a>
is invalid code in any version of HTML

A <p> is a block element so cannot be contained inside an inline element such as an anchor element <a>
chrishirst is offline   Reply With Quote
Old 15th July 07, 07:27 PM   #3
lovesdesign
WLC Member
 
Join Date: Jul 2007
Posts: 2
Default Re: dotted a:link on text, not on images

Thank you. The simple change of swapping the <p> tag with the <a> tag worked. Guess I should have validated first!
lovesdesign is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Text based navigation (no buttons or images) Bouzy CSS 2 12th July 07 06:31 AM
Text length overrides "width" in IE jkiv Browser Compatibility 8 11th July 07 11:00 PM
Content, expanding with content, and text. Bouzy CSS 0 25th June 07 09:31 PM
Use Link Background Color -- But Not On Images deedod CSS 4 20th June 07 09:38 PM
images over images... missruby CSS 8 4th February 07 01:57 PM


All times are GMT. The time now is 12:50 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.