Sunday, January 24, 2010

10 Common CSS Browser Compatibility Issues/Bugs You Must Know

When you write a CSS for your project you never know what kind of bug or issue you will face at time of browser compatibility.

Internet Explorer (IE) and Mozilla Firefox are the standard browsers which are globally considerable at time of browser compatiblity. Other browsers such as Chrome, Safari and Opera have a significant presence as well.

In today's scenario browser bugs with CSS can be an incredible source of frustration for Web designers and developers. In this post I'm sharing some most common CSS browser compatibility Issues/Bugs. Here's the following list:

1. How To Attack An Internet Explorer (Win) Display Bug

Great article, tutorial on how to figure out IE bugs, including making sure it isn't a bug first, validating. Covers {position: relative;}, the peekaboo bug, dimensional bug fixing, the expanding box trick, the Holly hack, source code, and more. Easy to understand.

2. The IE/Win Disappearing List-Background Bug

It's another IE bug caused by placing a list with a background set within a floated <div> that has been relatively positioned. Problem and solutions discussed here.

3.IE6 Duplicate Characters Bug

This IE6 bug causes duplicate characters to appear, which is caused by HTML comments. Shouldn't happen, of course, but that's IE6 for ya! See this article/tutorial that explains the bug, how to fix it, and how to avoid it.

4. How to resolve browser compatibility issues while working with JavaScript, AJAX and XML

After going through this article, you will get an idea on resolving browser compatibility issues while working on JavaScript, AJAX and XML. When we run an application which you develop using AJAX and XML it behaves differently in different browsers like mostly in IE (Internet Explorer) and Mozilla Firefox.

5. Double-Margin Bug, Float-Width Bug, Pixel Gap Bug

This article covers CSS bugs such as Double-Margin Bug, Float-Width Bug and Pixel Gap Bug. A very clear and clean solution to reslove these issues.

6. CSS Min-Height Bug

This article describes how you can handle CSS Min-Height in different browsers. CSS: min-height with !important is tricky thing you can use.

7. IE White-Space Bug

There are cases in which IE treats the white space "\n" between and the next as a literal linefeed. That creates extra space between list items.

8. Cross Browser Compatible CSS Opacity

Shortest post ever! You can quickly and easily apply transparency to any supportive element by adding the following CSS code your stylesheet.

You can also look detail article by A List apart

9. Clearing floated images in body text

A problem that I’ve been running into more often in these days of CSS based layouts than I did back in the old table days is the “image-sticking-out-of-the-bottom-of-the-content-area” problem that often occurs when an image is floated left or right, and there isn’t enough text to exceed the height of the image. A problem that sometimes had no easy fix.

10. Firefox CSS Magic

Consider this post an evolving receptacle for Firefox-specific CSS tricks. This article covers: Change the color of highlighted text, Change the opacity of an element, Control item selection of an element, Round the corners of elements, Add an outline to an element, Add a multi-colored, multi-layered border to an element etc.

Recomendation:

Browser Compatibility Development Guide

9 Most Common IE Bugs and How to Fix Them

Do you know any CSS browser compatibility issue/bug, please leave a comment.

Related Posts :





21 comments :

SohoInteractive said...

Nice list.
Number 8 is my favorite. Special thanks to that.
Very useful

Elena said...

It's really interesting article. Thanks for good in formation.

Anonymous said...

Great post. Thanks

Eko Setiawan said...

Hi..thanks for this list tutorial, we just bookmarked for future reference.
:)

Website Designing Services said...

Thanks for sharing such nice information.

CSS Tutorial said...

Very informative and interesting information about css. I want to share about Static, that the browser does not correctly update the style of the original elements, the other factor is placed before.
http://www.csswebstyles.com/

nazia said...

very nice to learn about the 100 comomn css browsers,
i hope that every one who related will like this information very much

Ferdous said...

very nice

Property Management Software said...

Very important to know about these if want to work professionally, really nice post keep sharing

Web Design said...

This is truly a great read for me. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work

Shobi said...

I would like to thank you for the efforts you've made in writing this posting.

Survival Seeds said...

Are these bugs easy to fix, or would I need to hire a professional web designer? How can you tell if these are errors effecting your website?

nfl jerseys online said...

I have bookmarked it and I am looking forward to reading new articles. Keep up the good work

Web development Company said...

I really enjoyed going through your articles. That's true you know what you are talking about! Your site look is beautiful and easy to navigate. I've bookmarked it in my favorites.

cn arabia said...

Great post thank you for the informations

Jaswanth said...

Thanks a lot, very much useful for interview purpose.

cartoon network arabic said...

hello
I have bookmarked it and I am looking forward to reading new articles. Keep up the good work
think s

cartoonarabic said...

Great post thank you

laha24 said...

thank's great post

al-akhbar said...

thanks I have bookmarked it in my favorite list ,Keep up the good work

l3ibaty said...

very much useful for interview purpose ...

Post a Comment

 

Copyright © 2009 - tutorialfeed.org