Devit!

When building websites from design comps the biggest problem often becomes trying to figure out why something is displaying wrong or different in Internet Explorer. Below are tips to fixing Internet Explorer display issues that we’ve witnessed that can eat up many hours.

1. Font-size will affect the size of a div object in IE6
2. Utilize background-color to find out where an object actually exists in Internet Explorer
3. When you run into float or position issues don’t be affraid to try things that don’t make sense. For example several IE6 display issues can be solved by setting the “display: inline;” even though we’re using a float
4. Use IE6 & IE7 specific style sheets when necessary
5. There is a client based version of firebug that you can actual load up on other browsers. When all else fails try firebug lite to solve your display issues (Firebug Lite)
6. If you run into a margin or padding issue you can’t solve in IE6 or IE7, it’s always possible to create another div object to fill a gap
7. Sometimes styles don’t inherit properly from a parent object in IE.

Always develop for Firefox first, and IE7 second. If you follow this path you should only have a few display issues to solve with every website you develop. By developing for Firefox you can be almost certain you will have a site that functions in other browsers without any significant changes.

This entry was posted on Tuesday, July 31st, 2007 at 7:08 am and is filed under Devit!. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.