Test your website CSS in 30+ browser with just one click

Paste your url at http://browsershots.org/ and click submit.
It will do browser capture as image with all browser that you have selected.
Don’t need to test your CSS by installing all sort of browser in your machine anymore. NICE.

Advertisements

Finally understand CSS Clear Fix

Clear Fix is for FF, not IE. I will explain this.

IE wrongly interpret CSS box model and will enlarge outer block div by it’s inside elements. Event you set those inside elements float style.

On the contrary, FF outer block will not be enlarge if insdie blocks are set to float.

Why do I/we want to know this? for me, it is because my footer element. Content blocks set to float left, left, right is a common practice for three columns web page. This will cause your footer element float to the top of your web page. To fix this, add clear:both to the last block elemnet inside.

Scroll bar using CSS

If you have content that is too long or too wide and
you want to add scroll bar to it, here is what to do.

for example:

<div id=”wrapper”>
<div id=”content”>some content</div>
</div>

If your content width/height is larger than its wrapper,

add overflow:auto to “wrapper” CSS style.

1pixel border <table> using CSS

If you trying to do this by setting border of <table>, <tr>, <td>,
you won’t get what you want.

Let’s cut the crap, just use this style.
table, td{
border-color: #000000;
border-style: solid;
}
table{
border-width: 0 0 1px 1px;
border-spacing: 0;
border-collapse: collapse;
}
td{
margin: 0;
border-width: 1px 1px 0 0;
}

CSS positioning and layout in FX and IE

If you have a background image for your website, you made found some strange spacing on the top and left of your background. Usually only occurs in IE, sometimes FX too.

It is because <html> and <body> have some strange default spacing.

Anyway, add this to your CSS and fix it.

html, body, form, fieldset {
    margin: 0;
    padding: 0;
}

And I found out that empty <div> in IE have a strange 1px height problem.

Here are three fix that people said it works.

1) Put a comment inside the

2) Put inside the

and add this to its style: font-size:0px;
line-height:0.
3) Setting your website to strict mode by using this DOCTYPE

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

1+3 should work well enough.

BTW, here is the position value that I always forget their meaning.

Value Description
static Default. An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations)
relative An element with position: relative moves an element relative to its normal position, so “left:20” adds 20 pixels to the element’s LEFT position
absolute An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties
fixed An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties. The element remains at that position regardless of scrolling. Works in IE7 (strict mode)

Cheers 😀

Clearing float elements – :after and clear

It means wrapping some float elements with a container element.

The container won’t auto enlarge if those float elements inside is too large(usually height), but IE will do auto enlarge which is non-stardard.

The W3C float specification requires that a cleared element shall stay below all previous floats.

Anyway, straight to the solution.

Add this to the last float block element.

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

:after means add this element to it. This is a CSS2 property.
IE doesn’t support :after.

But IE need the container to have height define in order to auto enlarge.
So, do this for IE:
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

REMARK: if you have links inside the container and follow by
float element will cause IE/Win Guillotine Bug. So the solution
is put those links inside <p> or other block tag and then give
the height 1% to it.

but there is still problem with IE/Mac, it doesn’t auto clear
and don’t support :after.

Straight to solution, this one fix all of them.

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Thanks to Tony Aslett for showing us the way. His site, csscreator.com is a killer CSS forum where newbies and gurus alike hang out and exchange CSS know-how. Tony’s original demo page for this method can be found here, and the relevant forum thread is here.

Kudos also to Doug for pointing out the “period problem” in FireFox, and to Mark Hadley for that elegant IE/Mac fix, and to Matt Keogh for showing how “inline-table” also fixes IE/Mac while using an already-approved CSS property. Once more the CSS community comes thru for us all! 🙂

CSS hacks more – !important & /**/ and *html, *+html

Why would there be more hacks after those two posts before?

Because the more you know the better.

Mostly because after IE7, more problem IE causes…

Straight to example.

#wrapper
{
width: 100px!important; /* for IE7+FF */
width: 80px; /*for IE6 */
}

This one is most important, different style for FF, IE6 and IE7!!

2, IE6/IE77對FireFox
<style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed
*/
}
</style>

REMARKS!!

1. these hack maybe out of date after sometime.

2. mind the ordering of those style!

3. make sure the .html have the following header if you are using *+html hack.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” http://www.w3.org/TR/html4/loose.dtd”&gt;