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”.

Posted in Bugs. Comments Off

Creating Modal Windows with Global Headers and Footers

When creating modal window pages in an application, use a separate style sheet to hide unnecessary elements on the pages.

Posted in Tips. Comments Off

Giving the Clearing DIV Layout in Internet Explorer 6

When creating a clearing DIV, put an empty comment (<!– –>) inside of it to get the clearing to work in Internet Explorer 6 and below.

Posted in Tips. Comments Off

Get Rid of Padding Around Radio Buttons and Checkboxes in Internet Explorer 6

To get rid of the padding on radio buttons and check boxes in Internet Explorer 6 and below, give the field a defined height and width with the property “overflow:hidden”.

Posted in Tips. Comments Off

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(){})”.

Posted in Bugs. Comments Off

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.

Posted in Bugs. Comments Off

Indenting Hierarchical OPTION Elements

To get indentions on SELECT list items, use the “text-indent” CSS property on the OPTION elements.

Posted in Tips. Comments Off

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.

Posted in Bugs. Comments Off

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.
Posted in Bugs. Comments Off