Need help with styles for hyperlinked graphics

Forum Moderators: not2easy

Message Too Old, No Replies

Need help with styles for hyperlinked graphics

MKwebnovice

4:31 pm on May 5, 2008 (gmt 0)

Hi,

Need some help with stylesheet issue :

We need to change the style for all hyperlinked content under a div tag except for hyperlinked graphics under the tag.

For example we need to add a dotted line underneath the hyperlinked text but the image should not have the dotted line.

<code>

#mydivname p a {
color: #0087BF;
border-bottom: 1px dotted #0087BF;
}
</code>

I tried putting following but that doesn't work.

<code>
#mydivname p a img {
text-decoraton: none;
}
</code>

Any ideas ?

I am new to this forum and stylesheets, so please let me know if I should post more details to clarify the issue.

Thanks for your help,
Meg

D_Blackwell

3:02 am on May 6, 2008 (gmt 0)

How about putting a <span> around the text only?

<html>
<head>
<style>
#mydivname p a {
color: #0087bf;
text-decoration: none;
}
#mydivname p span {
border-bottom: 1px dotted #0087bf;
}
#mydivname p a img {
border: none;
}
</style>
</head>
<body>
<div id="mydivname">
<p>
<a href="www.example.com">
<img src="aaa.jpg" style="width: 50px; height: 50px;"/>
<br />
<span class="border-bottom">
Link text.
</span>
</a>
</p>
</div>
</body>
</html>

rolandsea

6:24 am on May 6, 2008 (gmt 0)

You could float the image left to line up with the text and give the "#mydivname p a" a specified specified height just enough to put the border under the Text. Note: you will need to use the "clear" property on subsequent elements.

CSS:
#myDiv p {
clear: left; /* This clears contents to flow under the floated image */
}
#myDiv p a{
color: #0087BF;
border-bottom: 1px dotted #0087BF;
text-decoration: none; /* Removes the standard underline from anchors */
width: 60px; /* Gives element enough room for the image */
height: 1.2em; /*This sets the border at the bottom of 1 line of text */
}
#myDiv p a img {
border: none; /* removes image borders */
float: left;
padding-top: 10px; /*gives image breathing room */
}

HTML:
<div id="myDiv">
<p><a href="#">A Link<img src="img.jpg" width="60" height="30" alt="" /></a></p>
<p> More Stuff</p>
</div>

MKwebnovice

1:30 pm on May 7, 2008 (gmt 0)

D_Blackwell,
Thanks for your reply. Using a span is a good idea, except the site already has lot of content and I would have to add span in front of all the existing content.

rolandsea,
Thanks for your reply as well. Your suggestion sounds promising but didn't work for me.
Here's the html, did I miss something ?

<code>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

#myDiv p {
clear: left; /* This clears contents to flow under the floated image */
}
#myDiv p a{
color: #0087BF;
border-bottom: 1px dotted #0087BF;
text-decoration: none; /* Removes the standard underline from anchors */
width: 60px; /* Gives element enough room for the image */
height: 1.2em; /*This sets the border at the bottom of 1 line of text */
}
#myDiv p a img {
border: none; /* removes image borders */
float: left;
padding-top: 10px; /*gives image breathing room */
}

</style>

</HEAD>

<BODY>

<p> More Stuff
<a href="http://www.abc.com" > <img src="img.gif"></a>
</p>
</div>

</BODY>
</HTML>
</code>

rolandsea

11:33 pm on May 7, 2008 (gmt 0)

MKwebnovice,

DOCTYPE has a huge implications on how this works (especially IE!)

Try this:

<code>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>
<head>
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>
<body>
<div id="myDiv">
<p><a href="http://www.abc.com/link1.html">The First Link<img src="img.jpg" width="200" height="200" alt=""></a></p>
<p class="clear"> <a href="http://www.abc.com/link2.html">The Second Link<img src="img.jpg" width="200" height="200" alt="" /></a></p>
<br class="clear" />
</div>
</body>
</html>

<code>

I am also assuming you have several images you are linking in such a way. I would suggest instead of a <p> tag to use an an unordered list, then wrap the the link in an header tag and follow the image with a <p> tag for a description. this can give you some nice display options also (vertical or horizontal).

Best of Luck

Marshall

5:56 am on May 8, 2008 (gmt 0)

Try:

#mydivname img a {
text-decoration: none;
border: none;
}

or simply

img a {
text-decoration: none;
border: none;
}

Marshall

Setek

8:41 am on May 8, 2008 (gmt 0)

Marshall wrote:

#mydivname img a {
text-decoration: none;
border: none;
}
or simply
img a {
text-decoration: none;
border: none;
}

That makes no sense... how can you have an anchor within an image, an empty element?

The problem here, MKwebnovice, is that CSS cascades downwards, not upwards. We cannot change a property of the parent due to what children it has within it.

The anchor is the one with the bottom border... but the image is the part you don't want to have it.

I agree; the best options are to encase the text in a

<span>

, or try a train of thought similar to that suggested by rolandsea, but hopefully with less complication.

I suggest this:

HTML:

<a href="#">Text <img src="#" /></a>

CSS:

a { border-bottom: 1px solid #f00;
text-decoration: none; }

a img { position: relative;
bottom: -5px;
border-left: 5px solid #fff;
vertical-align: baseline; }

What is happening:

A bottom border is applied to anchors;
While the decoration of text (underline) is removed;
The image is being taken out of normal document flow by removing the static positioning and applying one of relative. This will stop IE 6 & 7 from having the parent (anchor) encompassing the image because it feels like it (it will if we simply used negative bottom margin on the image, though that would work as a standards-compliant only solution);
A negative value is applied to the bottom property which will cover up the border applied by the anchor;
A white border is applied to the left of the image to give it horizontal breathing space from the text itself (if your background colour is different from white it will have to be coloured in this fashion); and finally
The vertical-alignment is explicitly set to baseline (it should be baseline by default, but this is mostly just in case!)

So there you have it. IE 6, 7, FF 2, Safari 3, Opera 9 all tested.

Why this is better than rolandsea's float method:
rolandsea wrote:

.clear { 
clear: left; 
} 
#myDiv p a { 
color: #0087BF; 
border-bottom: 1px dotted #0087BF; 
text-decoration: none; 
width: 100%; 
/*height: 1em;*/ 
} 
#myDiv p a img { 
border:none; 
float: left; 
margin-top: .4em; 
}

applying
```
width
```
to an inline element such as an anchor will only work in IE, not in standards-compliant browsers, so I'm not sure what the point of that is;
floating is bad because it requires more code (clearing it afterward) not to mention float problems;
It can be used in fewer places in more specific situations, not generic ones; and
I don't think it will work in IE 6 or 7 anyway. The anchor should still encompass the float (because IE wrongly encompasses floats) and apply the bottom border below the image.

[edited by: Setek at 8:44 am (utc) on May 8, 2008]

rolandsea

9:40 am on May 8, 2008 (gmt 0)

Maybe I read way too much into this post. I was under the impression that MKwebnovice needed the image under the Link Text, hence the float and of course the need for the clear. After re-reading the post I noted the flaw in my original thinking (I have a knack of making something complicated out of something simple..). The use of the <img> border to cover the bottom <a> border is eloquent if you just want the elements displayed inline.