Spans Inside Divs - Browser Compatibility

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.



    Bookmark and Share


    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


    Sample Sites | Customers | Our Team | Contact Us | Tips and Tricks | Tools | Our Network | Home

    Copyright © 2006 - 2010 Keith Smith Internet Marketing LLC, all rights reserved.
    Problem with this web site? please let us know