Multiple "a href" classes - what am I doing wrong?

[jwayne]

I'm trying to implement a navigation bar with multiple a href classes. The
following example works exactly as I want it to, but for Internet Explorer only.
Firefox does not indent each link.

http://jonathanwayne.com/test/test.html

Here's the relevant snippet:

<div class="nav">
<a href="#">link 0</a>
<a class="1" href="#">link 1 indentation - in IE but not FF</a>
<a class="2" href="#">link 2 indentation - in IE but not FF</a>
<a class="3" href="#">link 3 indentation - in IE but not FF</a>
</div>

The stylesheet is at:

http://jonathanwayne.com/test/test.css

Here's a snippet:

.nav a.1
{
margin-left: 30px;
}
.nav a.2
{
margin-left: 60px;
}

What am I doing wrong?

Thanks -

jon

[boclair]

jwayne@_no_spam .com wrote:

I'm trying to implement a navigation bar with multiple a href classes. The
following example works exactly as I want it to, but for Internet Explorer only.
Firefox does not indent each link.
.nav a.1
{
margin-left: 30px;
}
.nav a.2
{
margin-left: 60px;
}

Start class selector names with an alpha, say a.mi, a.m2 for example.

I would think that padding might be more appropriate.

Louise

[jwayne]

boclair <bo*****@bigpon d.net.au> wrote:

jwayne@_no_spa m.com wrote:

I'm trying to implement a navigation bar with multiple a href classes. The
following example works exactly as I want it to, but for Internet Explorer only.
Firefox does not indent each link.

.nav a.1
{
margin-left: 30px;
}
.nav a.2
{
margin-left: 60px;
}

Start class selector names with an alpha, say a.mi, a.m2 for example.

I would think that padding might be more appropriate.

Yep, yer right - I had forgotten the naming convention rule. Since IE worked ok
with a numeric, I overlooked the obvious.

(BTW, padding doesn't really work for my purpose here, as the area to the left
of the text will also be highlighted when hovering.)

Thanks -

jon

[Spartanicus]

jwayne@_no_spam .com wrote:

<div class="nav">
<a href="#">link 0</a>
<a class="1" href="#">link 1 indentation - in IE but not FF</a>
<a class="2" href="#">link 2 indentation - in IE but not FF</a>
<a class="3" href="#">link 3 indentation - in IE but not FF</a>
</div>

What am I doing wrong?

Start by using proper markup:

<ul class="nav">
<li><a href="#">link 0</a></li>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
</ul>

--
Spartanicus