Fixing Browsers: Bugs and Hacks

While the CSS and HTML web standards are in place, they are still a growing and evolving entity. As Internet browsers get more advanced, the codes change with them. Before standards became the norm, a designer would have to design their web pages to accommodate all the different browsers out there and the different ways they handle code. Today, a few designers are still designing for older browsers, but most people have gotten the clue and updated their Internet software. Still, even today’s browsers have some bugs and here are some fixes to deal with the ones in Microsoft Internet Explorer, the most common Internet browser in the world.

Internet Explorer computes the margins and padding differently than other browsers and the web standards convention. This results in a bug involving text, boxes, lists, and images.

In the graphic example to the right, notice how the box overlaps the list bullets on the right side. Tom Gilder’s Internet Explorer Bugs page has a good example of how these bugs work.

Other bugs include one where the content will be invisible on the page until you scroll down the page and then it magically appears and disappears. Sometimes images and containers will appear to be jumping around. The links below can give you the best fixes for these bugs, but these are the fixes I use for containers and images on my main site:

/* Boxes Hack */
html> body .boxleft { margin-left:12px}
html > body .boxright { margin-right:12px}
/* Images Hack */
img.left { margin:1% 2% 1% 0; border:0}
img.right { margin:1% 0 1% 2%; border:0}

To ensure fewer bug problems, make sure that every container element has a display and position declaration. Most of our selectors feature display:block and position:relative to insure that the blocks of content are grouped together and their
positions are not absolute but relative to the flow of the page’s structure. Unfortunately, links found inside of containers using position:relative in Firefox often don’t work. Internet Explorer is not the only troublemaking browser out there.

Information and Resources on CSS Bugs and Hacks

• Position is Everything: Explorer Exposed
• Floats, Margins and IE
• Holly Hack and Solving IE Bugs
• CSS Bugs and Workarounds
• Internet Explorer Bugs
• Richinstyle’s Browser Bugs
• Bugs in Mozilla FireFox
• Toward A More Standards Compliant Internet Explorer
• Mambo Help’s CSS Hacks, Bugs, and Fixes
• CSS Discussion’s CSS Hacks
• About’s Web Design: Box Model Hacks
• Eric Meyers On CSS – Tricking Browsers and Hiding Styles
• Will the browser apply the rule(s)?
• CSS-only Filters Summary
• Minimum Height Hack
• Phespirit – CSS Hacks
• Box Model Hack and feeding different IEs different css
• QuirksMode- Browser Quirks
• No, Internet Explorer did not handle it properly
• Internet Explorer 5 Mac: oddities
• The well known height bug in Firefox
• 456 Berea Street – CSS Tips and Tricks – CSS Hacks and Hiding CSS from Browsers
• Future Proof Your CSS With Conditional Comments

Microsoft Calls for an End to Browser Hacks

While it’s all nice and fine for Microsoft to call an end to browser hacks, and the notion that overnight everyone in the world using every version of Internet Explorer will automatically be updated to Internet Explorer 7, the latest and supposedly greatest browser…well, I don’t buy it. But in all fairness, here are articles touting the glory of hackless web page design in time for the next release of Internet Explorer.

• MSDN/IE Blog – Call to action: The demise of CSS hacks and broken pages
• Style Gala – No More CSS Hacks
• 456 Berea Street – Stop using CSS hacks now
• Site Point – Microsoft Says De Hack Your CSS
• IE Blog – CSS and Standards in IE 7

---

Technorati Tags: browser, bugs, css, html, MSIE, IE, Firefox, Internet, hacks
Site Search Tags: browser, bugs, css, html, MSIE, IE, Firefox, Internet, hacks