Alternative to <span>

[mooncancook]

I used to use <span> tag to format width of some text like this:

<span style="width:100">Text</span>

This works fine in IE, but doesn't seem to work in Firefox and Safari. Any suggestion for an alternative to accomplish the same thing? Thanks.

 

[Titan]

make sure you set units in CSS. "width:100px" is accurate.

Otherwise, what doesn't "work"? If the line is wrapping it's because default padding and margins can be different. But what's the problem?

 

[mooncancook]

For instance when I use this in my page, <span style="width:100px">EMail:</span><input name=email>
In IE, it looks properly like this: Email:     _________________
But in Firefox or Safari, it looks like there's no space like this: Email:_______________

Basically I'm trying to line up the input fields in a form to look more organized

 

[Crusty]

Originally posted by: mooncancook
For instance when I use this in my page, <span style="width:100px">EMail:</span><input name=email>
In IE, it looks properly like this: Email:        _________________
But in Firefox or Safari, it looks like there's no space like this: Email:_______________

Basically I'm trying to line up the input fields in a form to look more organized

You should use <label> tags to label a form field.

I wrap both my <label> and <input> tags with an individual <span> with appropriate styling on it and then both spans in a <p>. I could replace the <p> with a <div>, but really I was just looking to keep the label + input in a block element of their own.

 

[mooncancook]

I actually also tried <label> instead of <span>, still doesn't give me the specified width in Safari. Also all my <fieldset> don't look right in Safari either. It's frustrating.

 

[Markbnj]

You could simply be running into a case where one browser interprets a style differently from another. It's not exactly uncommon .

 

[Ken g6]

Looks like Label is unrelated to the spacing issue.

If all else fails, you can try a <table>.

 

[PhatoseAlpha]

IE is actually doing this 'wrong', as are you. Inline elements like span are not supposed to be able to have a width assigned.

 

[sourceninja]

Originally posted by: PhatoseAlpha
IE is actually doing this 'wrong', as are you. Inline elements like span are not supposed to be able to have a width assigned.

this is the correct answer. If you want to set height and width, use a block element like div.

 

[brianmanahan]

And please Please PLEASE put a closing /> bracket on that input element. Improperly-formatted HTML is bad for the environment.

 

[MrChad]

Originally posted by: brianmanahan
And please Please PLEASE put a closing /> bracket on that input element. Improperly-formatted HTML is bad for the environment.

That's not improperly formatted HTML. It's improperly formatted XML or XHTML.