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.
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
line-height:0.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
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”>
CSS Units
Measurements
| Unit | Description |
|---|---|
| % | percentage |
| in | inch |
| cm | centimeter |
| mm | millimeter |
| em | 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then ‘2em’ is 24 pt. The ‘em’ is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses |
| ex | one ex is the x-height of a font (x-height is usually about half the font-size) |
| pt | point (1 pt is the same as 1/72 inch) |
| pc | pica (1 pc is the same as 12 points) |
| px | pixels (a dot on the computer screen) |
Colors
| Unit | Description |
|---|---|
| color_name | A color name (e.g. red) |
| rgb(x,x,x) | An RGB value (e.g. rgb(255,0,0)) |
| rgb(x%, x%, x%) | An RGB percentage value (e.g. rgb(100%,0%,0%)) |
| #rrggbb | A HEX number (e.g. #ff0000) |
use absolure size in,cm,mm only for printing.
use em,ex for block elements which contain text.
use px for layout.
IE-Mac hack and IE problem
IE-Mac is even worse on CSS than IE.
Thanks to our buddy Bill again.
straight to the solution:
/* Hide from IE-Mac \*/
#header {margin-bottom: 3em;}
#footer {margin-top: 1.5em;}
/* End hide */
Do whatever in these to take precedence in other browser
after you done doing layout on IE-Mac.
That is you need to layout at least three times…
IE-Mac>IE>others…
Text spilling out of its container in non-IE browsers
Internet Explorer, unlike other browsers, will expand borders and background colours so text doesn’t spill out of its containing element. Take a look at the following example:
If you’re viewing this in Internet Explorer, the box should look fine. In all other browsers the text is spilling out of the right-hand side of the box. The box has been assigned class="box" and has the following CSS commands assigned to it:
.box {
width: 40px;
border: 2px solid #781351;
padding: 3px;
background: #d7b9c9;
white-space: nowrap
}
Non-IE browsers will adhere to the width: 40px CSS command, which is why the box doesn’t expand in these browsers. IE instead interprets width as min-width, and therefore expands the box to fit the text (the same applies with height and min-height).
To ensure the text doesn’t spill out of the box in all browsers, you’ll need to use the following CSS rule, in addition to the first one:
html>body .box
{
width: auto;
min-width: 40px
}
IE will ignore this CSS command, as the command has html>body at the front of it (see the article, CSS hacks & browser detection8 for more on this). As such, this CSS command is only for non-IE browsers. The first CSS rule, width: auto, cancels out the original width rule. The second command, min-width: 40px then assigns a minimum width to the box, so the box will always expand to fit the text.
Check out the box again (you won’t see any difference in Internet Explorer, so open this up in another browser to see the change):
Much better!
Unstyled version of web page appearing in IE
When your website loads up in Internet Explorer, does an unstyled version of the page appear for a second or two, before the styled version kicks in this? If so, your website may be suffering from what’s known as the Flash Of Unstyled Content9 (or FOUC).
The simple solution to this illogical problem is an equally illogical solution – insert either a link or a script element into the header:
<script type="text/javascript" src="scripts.js"></script><link rel="stylesheet" href="styles.css" type="text/css" media="print" />
It doesn’t matter which one you insert (or even if you insert both). If you provide a print stylesheet, using the link element to reference it (as indicated in the example above), then you’ll never see the FOUC phenomenon.
CSS hacks more – html>body & /**/
html>body
html>body is child selector command which IE can’t understand
So, html>body refers to the child, body, contained within the parent, html.
CSS:
for All browsers
#header {margin-bottom: 3em;}
for non-IE
html>body #header {margin-bottom: 1em;}
because the later CSS will take precedence to the previous one.
This together result in CSS in the first line is for IE, second line is for others.
/**/
IE5’s misinterpretation of the box model. When specifying the width of an element in CSS, padding and borders aren’t included in this value. IE5 however, incoporates these values into the width value causing element widths and heights to become smaller in this browser.
#header {padding: 2em; border: 0.5em; width: 15em; width/**/:/**/ 10em;}
The 15em value will then be overridden by the second width value of 10em by all browsers except IE5,
which for some reason can’t understand CSS commands with empty comment tags either side of the colons.
-
The Host
-
Recent Comments
maxi326
Scott Gu- Rick Strahl
- MS MVP DBA
- DotBlogs
- 暗黑執行緒
- TheWillWillWeb
- 猴子靈藥
- Weithenn
- MS MVP 馬小靈
- Eddie
- {|ihower.idv.tw| blog }
- 網絡暴民 Jacky’s Blog
- Peace Palace – 技術、評論、生活
- 百分百無聊人生
- An error has occurred; the feed is probably down. Try again later.
