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.
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.
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:
<h1>This is some text to be replaced.</h1>
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;
}
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.
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.
To fix the double margin bug when floating elements in Internet Explorer 6, set the CSS display property for the floated elements to “inline”.
When creating modal window pages in an application, use a separate style sheet to hide unnecessary elements on the pages.
When creating a clearing DIV, put an empty comment (<!– –>) inside of it to get the clearing to work in Internet Explorer 6 and below.
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”.
