Web Development

Table Borders Appear Outside Container in Firefox

Jim — Thu, 08 Oct 2009 18:53:59 +0000

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

Jim — Tue, 29 Sep 2009 18:24:54 +0000

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.

CSS Image Replacement Technique

Jim — Tue, 22 Sep 2009 16:48:10 +0000

The following is a technique to replace text with an image using CSS and no additional markup. Please be aware that if the user disables images, they will not be able to see the text of an element employing this technique.

CSS Code:

h1
{
  height:[height of image]px;
  background:url([location of image]) no-repeat top left;
  text-indent:-2000px;
}

HTML Code:

This is some text to be replaced.

Apply Minimum Height Without a Separate Style Sheet for Internet Explorer 6

Jim — Tue, 15 Sep 2009 13:40:15 +0000

Use the following code to apply a minimum CSS height to an element without having to use a separate style sheet for Internet Explorer 6:

#element
{
  min-height:100px;
  height:auto !important;
  height:100px;
}

Background Image Doesn’t Display in Internet Explorer 6

Jim — Thu, 27 Aug 2009 14:53:47 +0000

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.

“Connection Interrupted” Message When Using Persits ASPUpload

Jim — Wed, 08 Apr 2009 22:00:25 +0000

If you get an error message that reads something like “The connection was interrupted…” on a page that uses Persits ASPUpload to upload a file, disable the upload part of the script and run the page. Chances are there is an ASP error that is causing the Persits control to throw an error like that.

Double Margin Bug in Internet Explorer 6

Jim — Tue, 31 Mar 2009 19:40:06 +0000

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

Creating Modal Windows with Global Headers and Footers

Jim — Tue, 31 Mar 2009 19:39:31 +0000

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

Giving the Clearing DIV Layout in Internet Explorer 6

Jim — Tue, 31 Mar 2009 19:38:29 +0000

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

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

Jim — Tue, 31 Mar 2009 19:37:12 +0000

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