Spans Inside Divs - Browser Compatibility

SPAN tags inside of DIV tags can sometimes result in weird appearances in some browsers but not in others, depending on their STYLE attributes.

Example

Suppose you're building a left-navigation bar on a web site, where each "link" is basically a SPAN with a background color, inside a DIV container which happens to be tall and narrow (like most leftnav bars are).

For some reason, this renders very nicely in IE6, but not in more standards-compliant browsers like Firefox. The coloring and spacing will look funny in Firefox.

Check out the left-side of the web page (left navigation bar area):

Internet Explorer 6

Firefox

How To Fix It

Don't do the padding in the SPAN; move it to the DIV.

Don't do the background color in the SPAN; move it to the DIV.

Any separating-spacing with the style "margin-bottom" in the SPAN should be moved to the DIV.

Now it should render properly in most browsers people use today.

Internet Explorer 6

Firefox

The final results look good in Safari and Opera browsers as well.

Don't miss the latest web tips and tricks!
Subscribe to our low-volume mailing list:

Privacy Policy

See other tricks: Web | Unix | Perl | SQL | General

Phone toll free 1-866-464-6688, Phoenix Metro area 480-895-6688

Problem with this web site? please let us know