CSS / Mozilla question

Simebaby · 10 Apr 2006 at 22:57

Hi All

I'm having problems with my <a> tags (I think) in Mozilla (FF 1.5): The following CSS:

Code:

#anchorcar {
	 width: 80px;
	 height: 40px;
	 background-color: blue;
}

And HTML:

Code:

<div>
  <a href="foo.html" id="anchorcar"></a>
</div>

Works fine in IE7 (I get a blue box), but in FF i get nothing - if I put text in the <a> tags, I get a blue background under the text (i.e. it "streches" behind the text).

Can someone help me out, as I'm sure I'm missing something obvious now!

TIA

Si.

Al Vallario · 10 Apr 2006 at 22:59

Code:

#anchorcar {
  width: 80px;
  [b]display: block;[/b]
  height: 40px;
  background-color: blue;
}

Should work

Simebaby · 10 Apr 2006 at 23:09

Wahey! Thanks

Is that an IE problem, or a FF problem?

Al Vallario · 10 Apr 2006 at 23:28

It's an IE problem as far as I know.

From what I can recall of the W3C standards, inline non-replaced elements (such as anchors and spans) can't be given height or width attributes; they have to be given the properties of a block-level element (display: block;) first

Note: I may be talking out of my bottom; I know nigh on everything about code (well, just about), but the theory defeats me!

Simebaby · 10 Apr 2006 at 23:33

I'm going to pick your brains again, if that's OK:

If I want to align the link (i.e. the link "box") centrally in relation to the container (the "navigation" div in the example above), how do I do this?

The vertical-align: middle property doesn't work (think I read it doesn't work in IE). Is there another way to do it, other than using top padding?

Al Vallario · 10 Apr 2006 at 23:50

I'm not altogether sure to be honest. If the container has a fixed height, adding padding is by far the easiest solution. If, on the other hand, it has a variable height, it's going to be a lot trickier! Even if you manage to get something working in Firefox, less standards-compliant browsers like Internet Explorer are bound to mess it up!

You could try something along the lines of:

Code:

#container {
  [b]position: relative;[/b]
}

#anchorcar {
  [b]position: absolute;
  top: 50%;
  left: 0px;[/b]
  width: 80px;
  display: block;
  height: 40px;
  background-color: blue;
}

Simebaby · 11 Apr 2006 at 00:02

I suspected padding would be the way to go (container is fixed height - or at least it can be).

Cheers for all the help!