Width problem in FF; Works fine in IE 2

[ecobb]

I have a simple problem trying to set the width in <a> tags in FF and I can't figure it out. Everything looks fine in IE. I have a horizontal list of links, and I want each one to be 110px wide. In IE I get this (which is what I want)

      Link 1     -     Link 2     -     Link 3     -

But in FireFox, it looks like this:

Link 1-Link 2-Link 3-

Here's the CSS I'm using:

.NavHeader{
	background-color: #B5A68C;
	border-bottom: 1px solid Black;
	border-top: 1px solid Black;
	height: 22px;
}
.NavHeader A {
	text-decoration: none;
	color: Maroon;
	border: 1px solid #B5A68C;
	width: 110px;
}
.NavHeader A:Hover {
	color : white;
	background-color: Maroon;
	border: 1px solid black;
	text-decoration: none;
}

And here's the HTML:

<tr>
  <td colspan="2" align="center" class="NavHeader">
    <a href="index.cfm">Link 1</a> -
    <a href="index.cfm">Link 2</a> -
    <a href="index.cfm">Link 3</a> -
  </td>
</tr>

Any ideas as to what I'm doing wrong that FF doesn't recognize the width? I tried adding 'style="width:110px"' directly to the <a> tags, but that didn't work. I tried "display: block;" in my CSS, but that just put it in a verticle row. What am I missing?


Hope This Helps!

ECAR
ECAR Technologies

http://www.ecartech.com

"My work is a game, a very serious game." - M.C. Escher

 

[Foamcow]

<a> is an inline element and as such can't have a width.

To assign it a width and keep it in line you must declare it as a block level element and then float it.

a {
    display:block;
    width: 100px;
    float:left;
}

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[ecobb]

Thanks! That's getting a little closer, but now it looks like this in both IE and FF

Link 1                     - - - -
         Link 2     Link 3          Link 4

Hope This Helps!

ECAR
ECAR Technologies

http://www.ecartech.com

"My work is a game, a very serious game." - M.C. Escher

 

[ca8msm]

That's because of the "-" signs. Simplest answer is to remove them e.g.

<tr>
  <td colspan="2" align="center" class="NavHeader">
    <a href="index.cfm">Link 1</a>
    <a href="index.cfm">Link 2</a>
    <a href="index.cfm">Link 3</a>
  </td>
</tr>

but if you want to keep them you have to apply a class to them as well so that they float.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[ecobb]

PERFECT!! You guys rock!!

I had no idea the "-" signs would be causing that, and I never would have thought to put a class on them!

Thanks!!



Hope This Helps!

ECAR
ECAR Technologies

http://www.ecartech.com

"My work is a game, a very serious game." - M.C. Escher

 

[ca8msm]

Yeah, I just did a quick test with them in span tags e.g.

<tr>
  <td colspan="2" align="center" class="NavHeader">
    <a href="index.cfm">Link 1</a><span> - </span>
    <a href="index.cfm">Link 2</a><span> - </span>
    <a href="index.cfm">Link 3</a>
  </td>
</tr>

.NavHeader span {
    color: Maroon;
    border: 1px solid #B5A68C;
    display:block;
    width: 10px;
    float:left;
}

and that appears to be what you want.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[ecobb]

Yep, that's it!

Thanks again!



Hope This Helps!

ECAR
ECAR Technologies

http://www.ecartech.com

"My work is a game, a very serious game." - M.C. Escher

 

[kaht]

ECAR, since you are displaying a horizontal list of links, I think you might be interested in reading up on this site. It explains how using an unordered list set to display:inline can simplify how you structure your horizontal lists (with lots of examples):

http://css.maxdesign.com.au/listamatic/index.htm

(under the horizontal lists section)

-kaht

How much you wanna make a bet I can throw a football over them mountains?