entry.

Internet Explorer CSS Issue: Inline Element Has Width

Issue

Inline elements such as <span>, <a>, <label> are not suppose to have width. According to the W3C standards, the following snippet should not work and is invalid:

span {
	width: 40px;
}

However, the above code will actually work in IE, making the inline element 40 pixels wide.

Internet Explorer (IE) has been well known as the most W3C incompatible browser. In particular Internet Explorer 6 (IE6), is far most the worst of its kind. Most web development jobs involving front-end design, will spend most of their debugging time on issues relating to IE6 and other IE. For a complete list of issues, see Internet Explorer CSS Issues & Solutions.

Solution

To fix the problem, is to turn the inline into a block element by using the display property.

span {
	display: block;
	width: 40px;
}

I strongly recommend not to use this fix unless you absolutely have to, since this essentially breaks the inline and block element definitions.


meta.

META+ expand

Categorized under Blog Programming Knowledge and tagged with .
Posted at 03:11:2204.30.2009.
Has 1 comment, view or add a comment below.

comments.

COMMENTS+ expand


add comment.

ADD COMMENT+ expand

If you have not been here or registered before, your comment might need approval before being displayed. Please wait patiently.
E-mail field is mandatory and will never be publisized.