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.

10 Super jQuery and Ajax Scripts for Web Developers

In web development scripts like jQuery and Ajax becomes very handy for web developers. If you are a learner or a expert these scripts is really helpful of all.

In this post I have shared free jQuery and Ajax scripts to help our upcoming web developers. In this list includes - A Drop-Down Menu Plugin for jQuery, Rotating jQuery Tabs, Sliding Login Panel with jQuery, AJAX Loading Panel, Mysql Ajax Table Editor, jQuery youtube playlist plugin etc.

Nice & Clean Sliding Login Panel built with jQuery

Please note the Login and Register forms in this demo will not work "out of the box" without a user login system pre-installed on your site (e.g. PHP/MySQL user login system)! However, most of the CMS such as Joomla, Drupal, Wordpress, etc have a login system integrated in their platform. So if you are using one, read their documentation to see how you could implement this script into your CMS.



Download | Demo

UPLOADIFY

Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. It requires Flash and any backend development language. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.

Uploadify is available under the GPL and MIT licenses. This allows Uploadify to be used in a number of applications and commercial products.



Download | Demo

Mysql Ajax Table Editor

Mysql Ajax Table Editor is a php script that will allow you to create web pages to edit mysql tables in a matter of minutes. Similar to phpMyEdit but way better. Some of MATE's features are advanced search, order by columns, edit multiple rows, language support and join other tables.



Download | Demo

jQuery youtube playlist plugin

This nice plugin allows you to turn a list of YouTube links into a playlist. This would allow the you to manage your videos on YouTube and simply insert links to the videos on your site. With javascript enabled a nice playlist is created, whilst without javasript the user gets a regular list of links to youtube pages.



Download | Demo

nmcDropDown: A Drop-Down Menu Plugin for jQuery

A quick jQuery plugin for creating drop-down menus. Very nice and easy to use.



Download | Demo

Datepicker and Calendar Eightysix

Calendar Eightysix is an unobtrusive developer friendly calendar and datepicker, offering a better user experience for date related functionalities. The successor of the popular Vista-like Ajax Calendar! Key features:

:: Quick navigation by jumping back and forth between months, years and decades without drop-down boxes
:: Highly and easily customizable
:: Packed with three themes
:: Lightweight (9.5 kB compressed)
:: Purely javascript; AJAX-less and no PHP needed



Download | Demo

Rotating jQuery Tabs

Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion.

By default a tab widget will swap between tabbed sections onClick, but the events can be changed to onHover through an option. Tab content can be loaded via Ajax by setting an href on a tab.



Download | Demo

jQuery Highlighter - Easy to use jQuery Plugin

Highlighter easy for customization. Keyboard enabled.

* Keyboard Navigation (arrowkeys + ESC)
* Highly Customizable
* Autoplay
* Todo Accessible
* Todo Cross Browser Compatibility



Download | Demo

Fancy Sliding Tab Menu

The Fancy Sliding Tab Menu is back and better than ever in Version 2 and this time an idle state listener is included to bring all the tabs back to their normal state after a desired amount of time without mouse movement on the window.

The menu is developed in script.aculo.us and as mentioned above has some extra features as requested in comments after the last version of the Fancy Sliding Tab Menu.



Download | Demo

AJAX Loading Panel

Enhance your site's look and feel during AJAX requests with the fully customizable state-of-the art Web 2.0 AJAX Loading Panel without writing a single line of code!

All you have to do is to follow a few easy steps, modify a couple of properties and add the show and hide methods to your XMLHttpRequest function.



Download | Demo

Do you any opinion, please leave a comment.

20 Stunning YouTube Video Sketches for Design Inspiration

In this post I am sharing 20 famous YouTube video sketches for design inspiration.

Two artists Admir Jahic & Comenius Roethlisberger redraw the most famous YouTube videos with colored pencils.

Here's the following sketches:









































Meet the Artists



Do you any opinion, please leave a comment.

Add Cooliris to your Website or Blog and Enhance your Graphical Experience

Cooliris is simply the fastest and most stunning way to browse photos and videos from the Web or your desktop for free. Effortlessly scroll an infinite "3D Wall" of your content without having to click page to page, whether you'e on Facebook, Google Images, YouTube, Flickr, Picasa, Kodak Gallery, or any supported site.

With Cooliris Express, put a 3D wall on your blog or site in seconds.

1. Select
Select content from Flickr, Picasa, YouTube, or any Media RSS feed.

2. Customize
Customize the appearance and number of rows for your Wall.

3. Post
Post to your own blog, website, or favorite social networking site.



Here are some great features you would love to:

3D Wall
3d WallDelight everyone with an embeddable 3D Wall of your favorite content. It's the fastest and most stunning way to browse photos and videos.

Fast
Create, customize, and publish your Wall with just a few clicks. No download or sign up needed.

Photos and Videos
Display any public stream of photos and videos from Flickr, Picasa, YouTube, or Media RSS feed. Or show only content matching tags you specify.

Post Anywhere
Display the Wall on your Blogger, WordPress, TypePad, Facebook, or MySpace account, or easily embed it into your website.

Customize
Choose the theme, background, row count, and even user controls of your Wall. To really jazz it up, check out our advanced documentation.

Free
Building and posting your wall is free and contains no ads. If you're a premium site looking to include advertising, head over to our Publisher Network.

It support to following browsers:





Follow Cooliris on Twitter

Do you have any experience with Cooliris, please leave a comment