Skip navigation

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.

Example of a Microsoft Internet Explorer bug that causes boxes to overlap list bulletsInternet 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

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.

Technorati Tags: , , , , , , , ,
Site Search Tags: , , , , , , , ,

7 Trackbacks/Pingbacks

  1. […] 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”. […]

  2. […] 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! […]

  3. […] Fixing Browser Bugs and Hacks […]

  4. […] Fixing Browsers: Bugs and Hacks […]

  5. […] Fixing Browsers: Bugs and Hacks […]

  6. […] Fixing Browsers: Bugs and Hacks […]

  7. […] Fixing Browser Bugs and Hacks […]

Post a Comment

Required fields are marked *

%d bloggers like this: