Forum Moderators: not2easy

Message Too Old, No Replies

SPAN with fixed width setting

Doesn't seem to work in Mozilla

         

adb64

7:40 am on Jan 4, 2005 (gmt 0)

10+ Year Member



I want to use the following construct to have four items in my header with a fixed width:

<span style="width:100px;">100</span><span style="width:150px;">150</span><span style="width:200px;">200</span><span style="width:250px;">250</span>

This works in IE6 but in Mozilla (1.5) all four items are put right next to each other without any spacing in between. In NN4 they are put right below each other. Does someone has any idea whats wrong here?

Thanks in advance

Arjan

createErrorMsg

1:42 pm on Jan 4, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Spans are inline elements, which, according to the W3 specs, cannot be set to an explicit width. This means any compliant browser will not respect that width setting.

IE is giving the span a width because (I assume) your page does not have a valid doctype. Without a doctype IE enters Quirks Mode, one aspect of which is that it allows inline elements to take width and height settings.

Instead of using spans, use a block level element like <div>. If you cannot change the html code for some reason, you can style the spans with display:block (which turns them into block level elements).

cEM