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
7 Trackbacks/Pingbacks
[…] Once you start to check your sites in different browsers you are going to find a lot of inconsistencies. Lorelle on WordPress has written an article on Fixing Browsers: Bugs and Hacks and pulled together some excellent resources on the subject. Over the weekend, students who have completed at least the CSS unit of the XHTML book should review this article, the accompanying sites and the handouts that I will provide you with today in class. I would also recommend that you spend time at CSS-Discuss for more information on browser inconsistencies. Google’s blog search is an excellent tool for finding CSS help. Try searching for “conditional comments css” or “css hacks”. […]
[…] Yesterday I encouraged you all to read the article Fixing Browsers: Bugs and Hacks by Lorelle VanFossen. Lorelle was kind enough to share another article she wrote, Views of a Web Page. In this article, Lorelle describes in wonderful detail the testing process used when building a web page. The article discusses developing and testing for various screen sizes, handhelds, variable font sizes, print, browsers, search engines, color blindness and visual impairments. Taking Your Camera on the Road puts into practice everything that we have discussed in class about accessibility. Thank you Lorelle for sharing your amazing resource with us! […]
[…] Fixing Browser Bugs and Hacks […]
[…] Fixing Browsers: Bugs and Hacks […]
[…] Fixing Browsers: Bugs and Hacks […]
[…] Fixing Browsers: Bugs and Hacks […]
[…] Fixing Browser Bugs and Hacks […]