CSS class for <a> not working in N6

CSS Help

Dev Shed Forums Sponsor:

June 2nd, 2003, 12:16 PM

blursotong

Contributing User

Join Date: Apr 2003

Posts: 45

Time spent in forums: < 1 sec
Reputation Power: 6

CSS class for <a> not working in N6

I'm trying to convert the following codes which worked in IE5.5up, to be Netscape 6 compatible.

What it's supposed to do is to display a few images in a horizontal row, which links to another page when clicked. I'm using a css file to set the class for the <a> link to display the images.

I know a workaround is to simply enclose the <a> tag around an <img> tag, where the "src" of the <img> is the "url" of the original <a> class, like this:

<a href="http://www.google.com"><img src="image1.gif"></a><a class="btnorg" href="http://www.yahoo.com"><img src="image2.gif"></a>

But that will mean an extensive change in all of the original codes.

I've also tried to include "position: absolute" and "position: relative" in the css class, but it didn't help.

I was wondering what could be wrong, and whether it could be just something small I missed out.

Here are the codes:

File: adm.css:

a.btnorg { color: white; font-family: Arial; text-decoration: none; background: url(image1.gif) no-repeat; text-align: left; width: 74px; height: 74px; clip: auto }

a.btnpeople { color: white; font-family: Arial; text-decoration: none; background: url(image2.gif) no-repeat; text-align: left; width: 74px; height: 74px }

File: test.html
<html>
<head>
<link rel="stylesheet" href="../styles/adm.css">
<style media="screen" type="text/css"></style>
</head>

<body bgcolor="#444444">
<div id="consolepanel">

<table border="2">
<tr>
<td>
<table border="1">
<tr>
<td>
<span>
<a class="btnpeople" href="http://www.google.com"></a><a class="btnorg" href="http://www.yahoo.com"></a>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>

</div>
</body>
</html>

June 2nd, 2003, 04:21 PM

jerom

Contributing User

Join Date: May 2003

Posts: 1,014

Time spent in forums: 1 Day 17 h 34 m 25 sec
Reputation Power: 9

Add 'float:left;' to both classes.
This way, both 'a' elements become blocks AND are displayed next to each other.

Hope this helps,
Jeroen

June 2nd, 2003, 10:23 PM

blursotong

Contributing User

Join Date: Apr 2003

Posts: 45

Time spent in forums: < 1 sec
Reputation Power: 6

Great!! You've saved me!!

Viewing: Dev Shed Forums > Web Design > CSS Help > CSS class for <a> not working in N6

« Previous Thread | Next Thread »

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox

Forum Jump