ansaurus

Question

Answer 1

+3 A:

Add display:block; to the anchors (block vs inline-block). Once you do that though, you may need to float:left; the anchors to keep them side-by-side. If you go that route, follow them all up with a clear:both; div.

a.box  { float:left; width:100px; height:25px; margin:0 8px; }
.clear { clear:both; }

<a href="#" class="box">Foo</a> 
<a href="#" class="box">Foo</a> 
<a href="#" class="box">Foo</a> 
<div class="clear"></div>

Jonathan Sampson 2010-02-14 17:35:28

-1: Use `inline-block`, which IE6 understands perfectly on inline elements instead of using floats.

Andrew Moore 2010-02-14 17:39:09

You're downvoting based on that alone?

Jonathan Sampson 2010-02-14 17:40:21

Yes, but on second thought that might be a bit harsh, vote removed.

Andrew Moore 2010-02-14 17:41:10

@Andrew: `inline-block` doesn't seem to work for FF2 according to quirksmode.

Jonathan Sampson 2010-02-14 17:42:04

@Jonathan Sampson: Firefox 2 is used by < 1% of the web users today. Do we still support IE4 and IE5 on the basis that < 1% are using them? You are being very selective on your argument.

Andrew Moore 2010-02-14 17:45:09

@Andrew: Not at all. Using block/float takes care of everybody all the way back to IE5.5. Using inline-block excludes FF2 users.

Jonathan Sampson 2010-02-14 17:46:36

Answer 2

+2 A:

<a> is an inline element. Inline elements cannot have a set width and height.

You therefore need to change the display mode of the element using the CSS property display.

Use display: block; if you want your elements to be taken out of the flow of text and considered a block (ie.: stacked vertically, one block per line).

Use display: inline-block; if you want your element to behave like an inline element position wise but have block-like properties.

Note: inline-block is supported by IE6 on <a>. In IE6, inline-block display style is only supported on elements which has an inline default style.

Andrew Moore 2010-02-14 17:38:17

According to http://www.quirksmode.org/css/display.html - inline-block is not a solid option.

Jonathan Sampson 2010-02-14 17:41:19

@Jonathan Sampson: According to the same link you posted: *IE 6/7 accepts the value only on elements with a natural `display: inline`.* An anchor has a natural `display: inline` therefore it is solid on that element. I even stated as such in my post.

Andrew Moore 2010-02-14 17:42:21

@Andrew: Yes, that's correct, but what do you plan on doing for FF2 users?

Jonathan Sampson 2010-02-14 17:43:23

@Jonathan Sampson: Firefox 2 is used by < 1% of the web users today. Do we still support IE4 and IE5 on the basis that < 1% are using them? You are being very selective on your argument.

Andrew Moore 2010-02-14 17:46:05

@Andrew: Not at all. Using block/float takes care of everybody all the way back to IE5.5. Using inline-block excludes FF2 users.

Jonathan Sampson 2010-02-14 17:47:30

@Jonathan Sampson: Then its a choice. I can understand people not upgrading IE due to enterprise restrictions. I cannot understand people not upgrading Firefox. At that point, people are making a conscious choice to be left behind. I will never support < 5% market share if it means I sacrifice maintainability.

Andrew Moore 2010-02-14 17:53:23

With all due respect, Andrew, I don't see how using the widely-accepted method of block'n'float "sacrifices maintainability." The difference between our two method is pretty small, so I don't mind splitting paths here out of respect for you and the great contributions you've made here.

Jonathan Sampson 2010-02-14 18:06:17

ansaurus

tags:

views:

answers:

a element not showing background image.

related questions