width working in IE but not FF

[Davka]

I'm used to Firefox displaying CSS correctly and IE being a royal pain, so this particular issue came as a surprise: I can't get FF to display the declared width of a hyperlink. Here's the relevant code:

Code: Select all

<STYLE TYPE="text/css">
A.nav {
    width: 80px;
    background-color: #C0C0D0;
}

A.nav:hover {
    width: 80px;
    background-color: #D0D0DC;
}
</style>

And the link tag says:

Code: Select all

<A  href="#" class="nav">Products</A>

This displays fine in ie, but FF just refuses to display any width other than the width of the linked text itself. I tried using min-width and _width, but no luck.

Using FF 2.0, ie 7.

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

Anybody got a clue?

[karinne]

That's because the a element is not a block-level (like div) element, so in this instance, FF is right (again)

Add a display: block; to a.nav and you should be fine.

[Davka]

Hmm - OK, you're right (and thanks for the feedback), but the thing is, I don't want it to be a block. That causes the link to be displayed all by it's lonesome, on a line by itself. But I want to use a graphic as a bullet next to the link - IOW to use the default display:inline element.

I played around with a bunch of display: arguments but haven't found one that works. I'm about to give up and use a table to force the alignment, which will make me weep uncontrollably for at least 3 seconds.

[karinne]

Well ... this is a menu then? You should be using a unordered list for this (<ul>). And just float the li element to the left, set up a width and display: block in the a.

As for the bullet, put it as a background.

Code: Select all

.somenamehere ul {
	list-style: none;
}

.somenamehere ul li {
        float: left;
	padding: 2px 0 2px 20px;
	background: #001d1d url(/i/bullets/link.jpg) no-repeat 0 3px;
}
.somenamehere ul li a {
        width: 80px;
        display: block;
        font-size: 15px;
}

etc,....

[Davka]

Ah - that explains everything. I started out trying to write

ul.nav {}

li.nav {}

...etc. Bad syntax doesn't work, for some odd reason.

Thanks a lot!

[Davka]

*sigh*

Well, that didn't work either. To heck with it, I'm using tables.

[karinne]

The code you posted above would imply the html below

Code: Select all

<ul class="nav">
  <li class="nav">
 .....

and yes ... bad syntax

[karinne]

Originally Posted by Davka

*sigh*

Well, that didn't work either. To heck with it, I'm using tables.

well ... hold on a minute now ... give us a link so we can help!!! (as per the guidelines for post)

PLEASE READ: How and When to post your question!

[spinal007]

IT'S EASY KIDS! Use float!
ul.nav{ whatever }
ul.nav li{ width:120px; } /* or whatever */
ul.nav li a{ display:block; float:left; } /* now the link with fill the entire li */

if that fails, add the following:
ul.nav li a{ width:100%; }
(I'm only saying this because I haven't tested it)

[spinal007]

Originally Posted by Davka

*sigh*
Well, that didn't work either. To heck with it, I'm using tables.

Blasphemy!

[Ryan Fait]

Try:

Code: Select all

#nav ul {
  width: 400px;
  height: 24px;
  margin: 0 auto;
  text-align: center;
}
#nav ul li {
  float: left;
}
#nav ul a {
  width: 100px;
  height: 24px;
  display: block;
  float: left;
}