SOME COMMON BROWSER ISSUES
margin:10px 20px
margin:10px 30px
margin:10px auto
Developers are often annoyed to find that Firefox and IE handle something as basic as CENTERING differently.* The margin:auto property is so simple - if only both Firefox and IE would use it!
View the divs at left in both browsers to see the difference.
View the divs at left in both browsers to see the difference.
- Oddly enough, Internet Explorer still respects the center tag, which is considered deprecated. However, if you do use the center tag, then everything else has to be set to text-align:left to override it.
Another basic difference between Internet Explorer and Firefox is how they handle text within divs.
width:400px; height:65px; margin:20px
In both IE and FF, when no height is set for the div in the css, the content will expand the div border. However, when a height is set, regardless of the content, IE will expand the div border to accommodate the actual height of the div, but Firefox will not - it will respect the pixel height as set, even if it cuts through the content.
In both IE and FF, when no height is set for the div in the css, the content will expand the div border. However, when a height is set, regardless of the content, IE will expand the div border to accommodate the actual height of the div, but Firefox will not - it will respect the pixel height as set, even if it cuts through the content.
THIS IS CONTENT THAT IS NOT CONSTRAINED BY PIXEL DIMENSIONS. IN BOTH FIREFOX AND IE THE INNER DIV EXPANDS WITH THE CONTENT TO FILL THE OUTER DIV. HOWEVER, IF A PIXEL DIMENSION OF EITHER HEIGHT OR WIDTH IS GIVEN, THE BEHAVIOR OF THE DIVS CHANGES IN FIREFOX, IN WHICH CASE THE PIXEL DIMENSION IS RESPECTED, AND THE CONTENT OVERFLOWS THE DIV. WHEREAS, IN IE THE DIVS WILL EXPAND PAST THE GIVEN DIV DIMENSION.*
*However, you might notice that the size of the box appears to be slightly different between browsers. Firefox actually ADDS the border widths to the pixel width of the boxes. It also adds the padding, so to get around this, I used 10px margin on the inner box to achieve the same effect as padding on the outer box. Otherwise, the widths would appear differently.
To view another browser issue, click here.