Table Borders Appear Outside Container in Firefox

When using a table, the border appears outside the table’s container in Firefox.  This is caused by having the table’s CSS border-collapse property set to collapse.  To fix the issue, set the table’s border-collapse property to separate.  Unfortunately, this will double up on cell borders.

position:absolute and bottom:0 Don’t Work Consistently in Internet Explorer 6

When positioning an element to the bottom of its parent with position:absolute and bottom:0, IE 6 will sometimes put a 1px margin below the bottom positioned elements.  This only seems to happen when the height of the parent element is an odd number.  To fix the problem, add in a CSS JavaScript expression to move the bottom elements down (bottom:-1px) when the height of the parent element is an odd number.

Background Image Doesn’t Display in Internet Explorer 6

In Internet Explorer 6, a background image may not display if it doesn’t have a height and it’s parent element doesn’t have a background.  To fix the issue, just add a background color to the element or its parent or add a height for the element.

Double Margin Bug in Internet Explorer 6

To fix the double margin bug when floating elements in Internet Explorer 6, set the CSS display property for the floated elements to “inline”.

Infinite Loading Loop When Using TinyMCE With jQuery

When loading TinyMCE controls, the “init” method must be called outside of any JQuery functions like “$(function(){})”.

List Bullets Disappear Behind Floated Elements

To keep OL and UL list item bullets from disappearing behind elements floated to the left of them, add “overflow:hidden” to the CSS for the OL and UL elements.

Using Firebug to Copy HTML

When using the Firebug Firefox plug-in to copy HTML from an existing page, right click the element you would like to get the HTML from and choose Copy innerHTML, not Copy HTML, as the latter option doesn’t format the HTML properly.

Custom Buttons

When creating buttons out of links and form input elements, if they share the same styles, the following issues must be addressed

• For the form elements, surround them with a DIV element and set at least the width of the form elements to be 100%, and handle the sizing through their container DIV’s.
• Also for the form elements, borders are applied as part of the height of the element in all modern browsers (i.e. a form element with a height of 30 pixels and a border of 2 pixels will still be 30 pixels tall).  To get around this, apply the border to the container DIV or adjust the height of the button accordingly.