Spans Inside Divs - Browser Compatibility

Note

We are no longer accepting new customers or work orders at this time. Thank you for your interest.

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/PHP | Unix/Linux | Perl | SQL | General

Problem with this web site? please let us know