Here are solutions to what I have found to be the most common bug fixes for Internet Explorer when designing websites in CSS (Cascading Stylesheets)

The <!--[if IE]> Tag

Problem: Various sizes, margins and padding attributes can display differently in Internet Explorer, this coded snippet can help you sort out these problems.

Add this code with your required settings underneith your pages <style> or external style link:



These setting will now only be loaded when your page is viewed in Internet Explorer. I often use this setting to tweak areas of my layout that do not quite display the same as in other browsers.



Minimum height bug

Problem: When trying to create a DIV tag and the height will not go below about 12px

Simply add the following attribute to the DIV tag



If this dosent work add a <p></p> inside the div and set the line-height for that to 0px;

Your final code should resemble one of the following:







Margins appear larger in Internet Explorer

Problem: Setting the margin attribute for any CSS element in Internet Explorer it will often appear either double the size or with added width, which can seriously disrupt detailed layouts.

Simply use the {display: inline;} attribute on the tag containing your margin setting.

Your final code should resemble the following:





Centering on the page

Problem: Trying to center elements on the page and using tags like the <div align="center" > or <div style="float: center;" > Do not work!

For Firefox use the following, you will need to setup a layer to house your content and apply the margin settings below to this tag, (I have called mine "container")



For Internet Explorer you will need to define a body property to the entire document for text centering (why oh why Bill?)





CSS Light box Adobe Flash fix

Problem: The CSS Light box script will not appear on top of a Flash movie, this disrupts the actual function of the script.

Add the following setting(s) to the Flash HTML code:



Also add this to the <embed> tag



Be sure to add both of these settings for this to work properly, your final flash code should look similar to this:

<param name="allowScriptAccess" value="sameDomain" /><param name="wmode" value="transparent" />
<param name="movie" value=" movie.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" />

<embed src=" movie.swf" quality="high" bgcolor="#000000" wmode="transparent" width="232" height="218" name=" movie" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> [/code]