I am sure it was on here, but now I can't find it, but I have a hard copy as follows:
In the body: <span class="image1"></span>
and in an external css doc:
.image1 {width:150px; height:150px; background-image: url("graphics/image1.jpg");} and this works fine on its own. However, I want to use something like:
<A HREF=http://www.webdeveloper.com/forum/archive/index.php/"myfile.html"><SPAN class="image1"></SPAN></A> (with an equivalent text link as well) to have a small clickable button. It works in IE but in a proper browser like Mozilla the width is one pixel so it shows as a vertical bar and that's only because I put a border round it! Am I trying to do something that is not possible, or is there a coding error? Also is there an equivalent version of the ALT parameter?It works in IE but in a proper browser like Mozilla the width is one pixelMaybe it has something to do with a SPAN not being a BLOCK object. Or it's a bug. Does it do the same if you use DIV instead of SPAN?
is there an equivalent version of the ALT parameter?The latest attribute is TITLE.In my opinion, you are abusing CSS. This is not intended use of CSS. Its not meant to put content for you (image in your example), its meant to style your content. Here is how I believe you should do.
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link.html"><img src="link.gif" alt="Cool Gizmo" title="Hey, drop in and look at Gizmo's world"></a>
Couple of points to note:
1. Here HTML provides the content (i.e. image). Alt text provides alternative content for non-visual browsers.
2. Title provides tool-tip. IE incorrectly displays alt text as tool tip. So, title is NOT the text equivalent of alt.
Now, coming to a related method: text-replacement. Here, the idea is to have text replaced by an image, much the same way you have in your example, but with an important difference - the text is replaced for visual browser... content is accessible to all browsers.
<!-- m --><a class="postlink" href="http://www.stopdesign.com/articles/css/replace-text/">http://www.stopdesign.com/articles/css/replace-text/</a><!-- m -->
Personally, I wont implement this, but just to inform you that a valid and accessible method exists to do what you intend to. Getting to the HTML/CSS for this:
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link.html" title="Hey, drop in and look at Gizmo's world" class="coolgizmo"><span>Cool Gizmo</span> </a>
a { width: 150px; height: 150px; background: url('link.gif'); }
a span {display: none}
This will keep the link inline. If you want it block (ie linefeed before and after the link), enclose it within <div>...</div>.
I dont know if the is necessary or not. I added it in there to make sure that the link is clickable.Thanks for your comments, it looks like I should have kept the code that I originally had, but since the code I posted came from somewhere on these forums (CSS topic I thought), I wrongly presumed it was legal code.
In the body: <span class="image1"></span>
and in an external css doc:
.image1 {width:150px; height:150px; background-image: url("graphics/image1.jpg");} and this works fine on its own. However, I want to use something like:
<A HREF=http://www.webdeveloper.com/forum/archive/index.php/"myfile.html"><SPAN class="image1"></SPAN></A> (with an equivalent text link as well) to have a small clickable button. It works in IE but in a proper browser like Mozilla the width is one pixel so it shows as a vertical bar and that's only because I put a border round it! Am I trying to do something that is not possible, or is there a coding error? Also is there an equivalent version of the ALT parameter?It works in IE but in a proper browser like Mozilla the width is one pixelMaybe it has something to do with a SPAN not being a BLOCK object. Or it's a bug. Does it do the same if you use DIV instead of SPAN?
is there an equivalent version of the ALT parameter?The latest attribute is TITLE.In my opinion, you are abusing CSS. This is not intended use of CSS. Its not meant to put content for you (image in your example), its meant to style your content. Here is how I believe you should do.
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link.html"><img src="link.gif" alt="Cool Gizmo" title="Hey, drop in and look at Gizmo's world"></a>
Couple of points to note:
1. Here HTML provides the content (i.e. image). Alt text provides alternative content for non-visual browsers.
2. Title provides tool-tip. IE incorrectly displays alt text as tool tip. So, title is NOT the text equivalent of alt.
Now, coming to a related method: text-replacement. Here, the idea is to have text replaced by an image, much the same way you have in your example, but with an important difference - the text is replaced for visual browser... content is accessible to all browsers.
<!-- m --><a class="postlink" href="http://www.stopdesign.com/articles/css/replace-text/">http://www.stopdesign.com/articles/css/replace-text/</a><!-- m -->
Personally, I wont implement this, but just to inform you that a valid and accessible method exists to do what you intend to. Getting to the HTML/CSS for this:
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link.html" title="Hey, drop in and look at Gizmo's world" class="coolgizmo"><span>Cool Gizmo</span> </a>
a { width: 150px; height: 150px; background: url('link.gif'); }
a span {display: none}
This will keep the link inline. If you want it block (ie linefeed before and after the link), enclose it within <div>...</div>.
I dont know if the is necessary or not. I added it in there to make sure that the link is clickable.Thanks for your comments, it looks like I should have kept the code that I originally had, but since the code I posted came from somewhere on these forums (CSS topic I thought), I wrongly presumed it was legal code.