Wednesday, June 30, 2010

Monday, June 28, 2010

15+ CSS Tips and Tricks

A list of CSS tips and tricks that will make your life so much easier! I have also make a list of CSS shorthands for your convenience.

Introduction

CSS (Cascading Style Sheet) is not very difficult to learn. The hardest thing is to ensure the CSS layout being displayed identically among different browsers. Even though CSS3 will be released soon, but I believe it will take quite a long time for all the browsers to start supporting it, especially all the old browsers like Internet Explorer 6 *AHEM*.

Right, here is a list of CSS tips and tricks that I believe will help you! You might also want to use some of the tools that will help you in web design and development - 22 extremely useful tools for web designers and developers

1. Avoid CSS hacks, use future proof method

We should avoid using hacks unless there are no other ways to fix it. Because, we will not able to know when those hacks will stop working. The most common way to tackle with different version of IEs is using the if else statement:

<!--[If IE 5]>
ie 5
<![endif]-->

<!--[If lte 6]>
ie 6 and lower
<![endif]-->

<!--[If gte 7]>
ie 7 or higher
<![endif]-->

2. Use group selector

Using group selector is a good practise to minimize your coding effort and also save a few bytes out of your stylesheet. We can group the selector to avoid repeating declaring the same properties for different elements

h1, h2, h3, h4, h5, h6 {
font-family:arial;
margin:0.5em 0;
padding:0;
}

3. Center elements

It's easy to center an element, for firefox and safari, we only need to specify the width and margin left and right set to auto. However, you will need to specify text-align to center in the parent element for IE.

body {
text-align:center; /* for ie */
}

#container {
width:800px;
margin:0 auto;
text-align:left;
}

4. CSS Positioning

This is something I've just discovered it few weeks ago. Set the abolute position within a container. #item will appear inside the #container exactly 200px from the left and 50px from the top.

#container {
position: relative;
width:500; height:300;
}

#item {
position: absolute;
left: 200px;
top: 50px;
}

5. Text transform

This is something I discovered long time ago, CSS has the ability to transform text to lowercase, uppercase and capitalized the first character of a word. w3schools CSS - Text transform

h1 {text-transform:uppercase; }
h2 {text-transform:capitalize; }
p { text-transform:lowercase; }

6. Remove links or textbox hightlight border

When you click on textbox or link, you will able to see a border highlighting the element. It's even more obvious if you are using mac os. Luckily, you can solve it using outline property. I used it when I set the indentation of a link text to -999em and also when I'm building a textfield with rounded border.

a, input { outline:none; }

7. Hidden text

I think the correct way to do it is using text-indent. And also, you'd want to apply outline:none to hide the border. We use hidden text when we're using images to replace text but we want to make sure search engine can crawl the keyword.

a {
text-indent:-999em;
outline:none;

background: url(button.jpg) no-repeat 0 0;
width:100px; height:50px;
display:block;
}

8. Keep consistent with SUP and SUB

I have a chance to work on one website that uses ® and ™ massively (bad... bad experience). The problem I was facing is, the sup and sub being rendered differently in different browsers, so, I found this and it solved my problem. Adobe Advisor / CSS

sup,
sub {
height: 0;
line-height: 1;
vertical-align: baseline;
_vertical-align: bottom;
position: relative;

}

sup { bottom: 1ex; }

sub { top: .5ex; }

9. CSS Transparency Setting for all browsers

Yes, I can never able to remember it, so I guess it's a must to list it out here for future reference.

.transparent_class {
filter:alpha(opacity=50); /* ie */
-moz-opacity:0.5; /* old mozilla browser like netscape */
-khtml-opacity: 0.5; /* for really really old safari */
opacity: 0.5; /* css standard, currently it works in most modern browsers like firefox, */
}

10. PNG Fix for IE6

Yes, this is the best thing ever to fix ie6 annoying short coming (it doesn't work with background-position). However, if you want a better solution to could fix all the png images in your css files, you can try this IE PNG Fix from twinhelix and the new version support background position!

.png_hack{
background-image: url(../img/the_image.png) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/the_image.png');
}

11. Prevent line break

This is a simple css tips, but some of us might not know about it. It forces the text display in one line.

view plaincopy to clipboardprint?

h1{ white-space:nowrap; }

12. Force page breaks when printing your document

When you're creating a printer friendly webpages, you want to know about these property. More about printing CSS property, visit W3C CSS Print Reference and also the CSS3 stardard

h1{ page-break-before:always; }

h2{ page-break-after:avoid; }

h2{ page-break-inside:always; }

13. Remove vertical textarea scollbar in IE

Remember that annoying textarea scrollbar that display by default in IE? Yes, we can remove it.

textarea{
overflow:auto;
}

14. 3D push button effect

You can create a 3D button effect easily using CSS. The most important thing is the border, set light color on top and left border, and dark color on bottom and left (shadow).

a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}

a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

15. CSS Tooltips

So, you must be thinking, we will need javascript to make tooltips! :) I got this trick from Kollermedia.


a:hover {
background:#ffffff; /*BG color is a must for IE6*/
text-decoration:none;
}

a.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:130px;
}

a.tooltip:hover span{
display:inline;
position:absolute;
background:#ffffff;
border:1px solid #cccccc;
color:#6c6c6c;
}
view plaincopy to clipboardprint?
<a href="#" class="tooltip">Tooltip <span> Extra info </span> </a>

16. CSS links sequence

Apparently, the sequence of the links is very important, read more. Honestly, I don't use this much, but hey, good for future reference! :)


a:link {
color: #000;
text-decoration: underline
}
a:visited {
color: #666;
}
a:hover {
color: #333;
text-decoration: none;
}
a:active {
color: #333;
text-decoration: none;
}

17. CSS Shorthands!

Last but not least, here are the CSS shorthands that will make our life easier!

/* MARGIN */
h1 {margin:1em 0 2em 0.5em;}

h1 {margin-top:1em;
margin-right:0;
margin-bottom:2em;
margin-left:0.5em;
}

/* BORDER */
h1 {border:1px solid #000;}

h1 {border-width:1px;
border-style:solid;
border-color:#000;
}

/* BORDER WIDTH */
h1 {border-width:1px 2px 3px 4px;}

h1 {border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;
}

/* BACKGROUND */
div {background:#f00 url(background.gif) no-repeat fixed 0 0;}

div {background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
}

/* FONT */
h1 {font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;}

h1 {font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
}

/* LIST STYLE */
ul {list-style:square inside url(image.gif);}

ul {list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
}

/* OUTLINE */
h1 {outline:#f00 solid 2px;}

h1 {outline-color:#f00;
outline-style:solid;
outline-width:2px;
}

Source : http://www.queness.com/post/402/15-css-tips-and-tricks

Thursday, June 24, 2010

Styling Links with CSS

Learn how to style links in a Web page using CSS. This article shows you how to add CSS styles to any type of link, including non-visited, visited, active, and hovered links.

CSS gives you a fair amount of flexibility when it comes to styling links. You can alter the look of:

normal links

* links that have already been visited
* links that are being clicked on, and
* links that are hovered over with the mouse.

You can even turn text links into image links, using nothing but CSS. In this article you learn how to change the look of different link states using CSS, as well as how to alter link colours, underlining, and appearance in general.

Different link states

CSS distinguishes between 4 different states for a link using a concept called pseudo-classes. A pseudo-class is a way of selecting page elements based on special characteristics such as whether an element is being rolled over with a mouse, or whether the element has focus.

Here are the 4 pseudo-classes that you can use to select and style the different link states in

CSS:

a:link - Selects links that have never been visited in the browser
a:visited - Selects links that have been visited before in the browser
a:active - Selects links that are being clicked on or otherwise activated by the user
a:hover - Selects links that are being hovered over by the user's mouse cursor

Selecting links regardless of their state

As well as using pseudo-classes to select particular link states, you can of course use the a selector on its own to select links in general:

a { color: pink; } /* Set all links to pink */

However, note that using a pseudo-class overrides any styling that you've set using the a selector. For example, the following code makes all links pink except visited links, which become green:

a { color: pink; }
a:visited { color: green; }

Mixing pseudo-classes with classes and ids

You might want to style only certain types of links within your website. To do this, assign a class to the links:

Home

You can then style those links using pseudo-classes as follows:

/* Make all navigation links red when hovered over */
a.nav:hover { color: red; }

If you only want to style a single link on the page, you can use an id instead of a class, and select the link's pseudo-classes in the same way — for example

<a id="home" href="home.html">Home</a>

...

/* Make the "home" link yellow, whether visited or not */
a#home:link, a#home:visited { color: yellow; }


Some examples

Once you've selected the particular link state you're interested in, you can apply any styles you want to that state, as you'll see in the following examples.

Styling link colours

It's easy to change the colour of links from the default values. On most browsers, the default link colours are:

:link - blue
:visited - purple
:active - red

Here are some examples of how to change link colours:

/* Make all links grey on black, whatever their state */
a { color: gray; background-color: black; }

/* Use the default colours except for links that are being
clicked on, which become yellow instead of red */
a:active { color: yellow; }

/* Set unvisited links to green; visited and hovered
links to brown */
a:link { color: green; }
a:visited, a:hover { color: brown; }

INFO

Use caution when changing link colours. Most visitors expect normal links to be a shade of blue, visited links to be a shade of purple, and links generally to be underlined. If you deviate too wildly from these standards then visitors may have a hard time navigating your site.

Turning off underlines on links

To remove the underlining from text links, use the text-decoration property, as follows:

a { text-decoration: none; }

To remove the underlining from links except when they're hovered over, use:

a { text-decoration: none; }
a:hover { text-decoration: underline; }

Giving links a button effect

You can style links — and their pseudo-classes — pretty much any way you like. This example turns a standard text link into something more closely resembling a form button:

a
{
color: #000;
background-color: #f0f0f0;
padding: 2px 11px;
border: 2px outset #fafafa;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
}

Adding background images to links

Here's another example of styling a link purely using CSS. It adds an arrow graphic to the link by inserting the graphic as a background image and moving the link text to the right to allow space for the image:

a
{
background: #fff url('red-recessed-arrow.gif') no-repeat 0 0;
padding: 3px 0 4px 34px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
}

Replacing link text with an image

What if you wanted to use just an image for a link, without any text? It's a good idea to keep the link text in your HTML markup, so that non-graphical browsers and search engines can still read and understand the link. However, you can still hide the link text within your CSS. Here's how it's done.

First, put your link text within a span element in your markup:

<a href="home.html"><span>Home</span></a>

Then you can style the link as follows:

a
{
background: #fff url('remote-control-home.gif') no-repeat 0 0;
display: block;
width: 114px;
height: 24px;
}

a span
{
display: none;
}

First the CSS sets the button as a background image on the link, and adjusts the link's width and height to match the dimensions of the image. Then the a span selector ensures that the link text is hidden from CSS-aware browsers.

Here's how the above example looks:

INFO

Why the display: block? Well, links are inline elements, which means that (amongst other things) you can't apply certain properties such as width and height to them. If you want to specify a width and height for a link, you first need to make it display as a block-level element using the display: block property.

Article Source : http://www.elated.com/articles/styling-links-with-css/

Css tips: how to use the position fixed property?

What is meant by fixed positioning and what is the difference with absolute positioning?

For fixed positioning the same rules apply as in the case of absolute positioning: the “fixed” value set to the “position” property indicates that the element should be positioned in absolute mode with regard to the HTML root element which coincides with the browser’s area, thus subtracting it from the normal flow of the document. The element is subsequently positioned on the basis of the value of the coordinates provided through the properties: “top”, “left”, “right” or “bottom”.

The difference with absolute positioning consists in the fact that when the user scrolls the page, the element with fixed positioning does not scroll with it but remains fixed on screen.

After having discussed the theoretical part it is the moment to pass on to practice and see how to implement this property inside our works.

How is fixed positioning used?

As a practical example we will take into consideration a real case applied to the theme of our blog, the fixed positioning of the three icons relative to our Twitter, Facebook accounts and feed subscription.
If you have a video resolution superior to 1024px of width you must have noticed that these three icons – displayed on the external right side of our blog’s container – keep staying in their original position even when the page scrolls down.

<body>

<!-- START SOCIAL FIXED -->
<div class="box-fixed">
<a href="#" title="YIW on Twitter">
<img src="images/bg/fixed/twitterfixed.gif" alt="twitter" />
</a>

<a href="#" title="Become a Fan">
<img src="images/bg/fixed/facebookfixed.gif" alt="facebook" />
</a>

<a href="#" title="subscribe feed">
<img src="images/bg/fixed/rssfixed.gif" alt="rss" />
</a>
</div>
<!-- END SOCIAL FIXED -->


You must be asking yourself at what point of the document is this markup inserted?
We said that the fixed positioning subtracts the content from the normal flow of the document thus it can be inserted at any point because it’s anyway going to be subtracted from the flow of the document and positioned on the screen according to the values subsequently defined with the properties: “top”, “left”, “right” or “bottom”.
For example on the theme of YIW we have added it exactly in the beginning of the document, immediately after the <body> tag.
As you might have noticed in the HTML markup we have assigned a class named “box-fixed” to the section which contains the three images; now let’s see which properties to assign to this class so that the contents of this section can always remain fixed on the screen even when the page is scrolled by the user:

.box-fixed {width:60px;position:fixed;top:370px;right:15px;z-index:0;}

As you can see – by analyzing the line of code provided above -we have assigned a width of 60px to our box and then we have positioned it in fixed mode on the screen bringing it to a distance of 370px from top of the browser window and to 15px from the right side of the browser window.

What’s the z-index property for?
Probably you are asking yourself wondering what’s the “z-index” property for set on zero.

I would like to dedicate an entire article in the future regarding the use of the “z-index” property since it is a very interesting property introduced by the CSS2 specifications: in practice through the use of this property we can have our boxes on more levels – in case the later are found to occupy the same area of the screen – (for those who use photo-retouch programs the functioning is similar to the layers made available by these applicatives) defining the order of overlapping. The elements which are set on a higher value are arranged higher compared to elements which have a minor value.

In our specific case when the user finds himself scrolling the page all the way to the bottom we need to handle the section of the three icons in such a way that it is positioned below the footer layer so that these go under the footer background avoiding to give the unpleasant aesthetic effect of three white squares positioned on a red background. Here’s explained the presence of this property inside our line of code. However, we will resume this argument in a future article in which we will see in depth the use of this property.

Conclusions
We have said – and I repeat it – that the positioning of elements is one of the toughest arguments regarding the CSS, after the use of absolute positioning dealt with in the previous article this week we have examined also the employment of fixed positioning.
As you had the chance to see, once understood the functioning and use of these properties, there’s little left to obtain effects of a remarkable aesthetic impact and what’s more important you no longer have limits in positioning the elements in the desired spots inside your layout.
And to you, has it ever happened to correct or review yourself a particular layout just because you were not able to position certain elements as they were originally designed?

Source : http://www.yourinspirationweb.com/en/css-tips-how-to-use-the-position-fixed-property/

Wednesday, June 23, 2010

Optimizing Your Website Structure For Print Using CSS

As much as I read articles online, I still print a fair amount of them out. Sometimes I print them to pass on to others, other times to read again when I have more time. Unfortunately a great deal of websites put no effort into providing their content in a printer-friendly fashion. The result of them overlooking the print audience is a great article not being read. If only these writers knew how easy it can be to optimize their site for print and how it can greatly enhance the value of their website.

The secret to creating printable pages is being able to identify and control the “content area(s)” of your website. Most websites are composed of a header, footer, sidebars/subnavigation, and one main content area. Control the content area and most of your work is done. The following are my tips to conquering the print media without changing the integrity of your website.

Create A Stylesheet For Print

Of course you have at least one stylesheet to control the layout of the page and formatting of the content, but do you have a stylesheet to control how your page will look like in print? Add the print style sheet, with the media attribute set to “print”, at the end of the list of stylesheets in the header. This will allow you to create custom CSS classes applied only at the time of print. Make sure your structure CSS file is given a media attribute of “all.”

re your structure CSS file is given a media attribute of “all.”

<!-- Main stylesheet on top -->
<link rel="stylesheet" type="text/css" href="/global.css" mce_href="/global.css" href="/global.css" mce_href="/global.css" media="all" />
<!-- Print only, on bottom -->
<link rel="stylesheet" type="text/css" href="/print.css" mce_href="/print.css" href="/print.css" mce_href="/print.css" media="print" />

Click here to copy this code to the clipboardClick here to add this snippet to CodaClick here to add this snippet to TextMateGet the raw code
1<!-- Main stylesheet on top -->
2<link rel="stylesheet" type="text/css" href="/global.css" mce_href="/global.css" href="/global.css" mce_href="/global.css" media="all" />
3<!-- Print only, on bottom -->
4<link rel="stylesheet" type="text/css" href="/print.css" mce_href="/print.css" href="/print.css" mce_href="/print.css" media="print" />

Avoid Unnecessary HTML Tables

As much as I try to steer clear of using tables, there’s no way to avoid the occasional
experience. Forms are much easier to code when using tables. Tables are also great for…get this…data tables. Other than these two situations, a programmer should try to avoid using table, especially when considering print. Controlling the content area of your website can be extremely challenging when the page structure is trapped in a table.

Know Which Portions Of The Page Don’t Have Any Print Value

You know that awesome banner you have at the top of your site? Ditch it. And those ads on the right and left sides of the page? Goodbye. Web visitors print your page because of the content on it, not to see the supporting images on your website. Create a class called no-print and add that class declaration to DIVS, images, and other elements that have no print value:

.no-print { display:none; }

<!-- Example -->
<div id="navigation" class="no-print">
.... <!-- who needs navigation when you're looking at a printed piece? -->
</div>

Use Page Breaks

Page breaks in the browser aren’t as reliable as they are in Microsoft Word, especially considering the variable content lengths on dynamically created pages, but when utilized well make all the different in printing your website. The CSS specs don’t provide a lot of print flexibility but the page-break-before / page-break-after properties prove to be useful. Page breaks are much more reliable when used with DIV elements instead of table cells.

.page-break { page-break-before: always; } /* put this class into your main.css file with "display:none;" */

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce eu felis. Curabitur sit amet magna. Nullam aliquet. Aliquam ut diam...

<div class="page-break"></div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit....


Size Your Page For Print


Obviously your computer monitor can provide a large amount of width to view a page, but I recommend setting the content area width to 600px (an inch equivalent may be better, but I try to deal with one unit specifically, which is pixels). This ensures that words wont bleed outside the print area. Use this width measurement with the page break DIVs you’ve created in your stylesheet. After you know the width of your printed content area, adjust the dimensions of content blocks inside the main content area if necessary.

Test!

Like any type of programming, testing is important. Note that if you have a website that serves dynamic data, you wont be able to win all the time but you may be able to figure a scheme to format content well most of the time. Be sure to test in multiple browsers (when creating customer websites, I try to check all “Grade A” browsers).

Modifying your page structure for better print results is probably easier than you think — at least improving your existing template will be. Check back soon for part two, where we analyze optimizing a website’s content for print.

Source : http://davidwalsh.name/optimizing-structure-print-css

Monday, June 21, 2010

CSS3 Techniques You Should Know

Many of you have probably heard all the buzz around CSS3, but exactly which techniques can we use today? In this article I’ll show you some different CSS3 techniques that work great in some of the leading browsers (i.e. Firefox, Chrome, Safari, Opera ), and how they will degrade well in the non-supported browsers (i.e. Internet Explorer). Using browser specific extensions, many of the proposed CSS3 styles can be used today!

If you aren’t aware of the browser extensions, these are CSS styles with a vendor specific prefix. Since CSS3 is not fully supported yet, we must use these extensions. They are as follows:

* Mozilla/Firefox/Gecko: -moz-
* Webkit (Safari/Chrome): -webkit- (note: Some webkit prefixes only work in Safari, and not Chrome)

As you might have guessed, one of the downsides of using these extensions is the fact that we must use all of the above prefixes to get the CSS3 style to render in Firefox, Safari, and Chrome. And no surprise to anyone, IE does not support CSS3 or do they have extensions like the other leading browsers. Alright, enough talking, lets dive right in! Note: styles without a prefix are the actual W3 specification proposal.

A Note About Demos on This Page

The examples are all on this page, so if you’re not seeing some examples properly (or not at all), then the browser you’re using doesn’t support the particular CSS3 technique.

Drop Shadows

The drop shadow effect accepts multiple values. First is simply the color of the shadow. It will accept four length values, and the first two are the x (horizontal) offset and the y (vertical) offset. The next value is the amount of blur added to the shadow. The fourth and final value is the spread amount of the blur. Box shadow will also accept an inset keyword that will create an inset shadow.

box-shadow: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;

Gradients

Gradients can be pretty confusing at first, especially when comparing the differences between -moz and -webkit. With -moz you first define the direction of the gradient, then determine the starting and ending color. -webkit gradients take a little more code. First you define the type of gradient. The next two values define the direction. Finally, the last two values define the starting and ending color of the gradient.

-moz-linear-gradient(-90deg,#1aa6de,#022147);
-webkit-gradient(linear, left top, left bottom, from(#1aa6de), to(#022147));

RGBA

The RGBA color method is actually easier than it may look at first. It takes four values, and in order they are: the amount of red, amount of green, amount of blue, and the level of opacity. Instead of using a hex (#) color, you set the color in RGB mode, while the level of opacity can give the color a transparent look. The opacity accepts values between 0 and 1, with 0 being fully opaque and 1 being the actual defined color. The example below has an opacity value of .5, causing the element to be 50% transparent. rgba doesn’t actually require any of the browser extensions.

background-color: rgba(0, 54, 105, .5);

HSL

Along with RGBA, CSS3 may make the HSL color model available to us. This could give us a whole arsenal of colors and tones. In this color model, HSL stands for Hue, Saturation, and Lightness. Hue is a degree on the color wheel, while Saturation and Lightness are percentage values of the colors.

background-color: hsl(209,41.2%, 20.6%);

Border Color

With this style, you must define border-top, border-right, border-bottom, and border-left separately to get the effect below. You will notice that I have defined an 8px border along with 8 different colors for each border color style. That’s because the same amount of colors needs to match the amount of pixels in the border definition.

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

Text Selection Color

I have to say I think that changing the text selection color is a pretty exciting new feature. I first saw this on css-tricks and thought it was pretty sweet. With the ::selection pseudo-element, you can change the color and background when the user highlights a text element. Pretty nifty if you ask me. ::selection was removed form the current CSS3 draft, but lets hope they add it back in later!

::selection {
background: #3C0; /* Safari */
color: #90C;
}
::-moz-selection {
background: #3C0; /* Firefox */
color: #90C;
}

Transform
With the transform style, you can make elements appear to “grow” when hovered. With a value above 1 added to scale, the element will increase in size. On the other hand, a value below 1 will cause the element to decrease in size. Along with scale, their are many different transforms available to use. Visit Firefox’s developer page to see what else you can use.

-moz-transform: scale(1.15);
-webkit-transform: scale(1.15)

Multi-column Layout

With this new multi-column layout style, we can give our text a “newspaper” type look. This is very simple to implament compared to the normal way of doing this through CSS. Below I specified how many columns I want, what type of rule I want to seperate them, and how big of a gap I want between the columns. Simple huh?

-moz-column-count:3;
-moz-column-rule: solid 1px black;
-moz-column-gap: 20px;

Source : http://sixrevisions.com/css/css3-techniques-you-should-know/

Saturday, June 19, 2010

Clearing Floats The Old Fashioned Way

When a float is contained within a container box that has a visible border or background, that float does not automatically force the container's bottom edge down as the float is made taller. Instead the float is ignored by the container and will hang down out of the container bottom like a flag. Those familiar only with Explorer for Windows may scratch their heads and say "That's not right!" True, IE/Win does enclose a float within a container 'automatically', but only if the container element happens to possess the MS-only quality called hasLayout.

This float-enclosing behavior in IE can also be 'toggled' off again just by hovering of links within the container, if that hovering alters either the link background or one of several other CSS properties. Quite a mess, and we'll cover it farther along in the article, in the "Toggle Trouble" section.

The W3C suggests placing a "cleared" element last in the container box, which is then recognized by the container height, forcing the container to enclose the float above that cleared element too. It's described more fully our article Float: The Theory:

“..let's say you give that following box the clear property, {clear: both;} . What this does is extend the margin on the top of the cleared box, pushing it down until it "clears" the bottom of the float. In other words, the top margin on the cleared box (no matter what it may have been set to), is increased by the browser, to whatever length is necessary to keep the cleared box below the float.”

So in effect, such a cleared box cannot be at the same horizontal level as a preceding float. It must appear just below that level. The image shows how this might look, with a red border representing the container element:



The standard method of making an outer container appear to "enclose" a nested float is to place a complete "cleared" element last in the container, which has the effect of 'dragging' the lower edge of the containing box lower than the float. Thus the float appears to be enclosed within the container even tho it really isn't. The code for a cleared box usually looks something like this:

<div> <!-- float container -->

<div style="float:left; width:30%;"><p>Some content</p></div>

<p>Text not inside the float</p>

<div style="clear:both;"></div>

</div>

Since that div is not floated, the container must recognize it and enclose it, and because of that top margin (added by the browser because of the "clear" property), the div "pulls" the bottom edge of the container down below the bottom edge of the float.
Problems With The Method

First and foremost, this clearing method is not at all intuitive, requiring an extra element be added to the markup. One of the major premises of CSS is that it helps reduce the bloated HTML markup found it the average site these days. So having to re-bloat the markup just so floats can be kept within their containers is not an ideal arrangement.

Besides that, some browsers can have trouble with certain kinds of clearing elements in some situations. Mozilla is particularly sensitive to clearing problems.

Up 'til now there was no other way to do this, but no more! Thanks to the efforts of Tony Aslett, creator and operator of csscreator.com, we can now use advanced CSS to "clear" a float container in non-IE browsers and just let IE keep wrongly clearing itself. The upshot is that we now have the option to avoid adding that pesky clearing element to the HTML markup. Woohoo!

"Clearing", 21st Century Style

In the new method, no clearing element is used. This does not affect IE/Win which simply keeps enclosing the float as always (assuming the container has a stated dimension), but non-IE browsers will need a substitute for that element. Here's how it's done.

Using :after

This CSS 2 property allows extra content to be added at the end of an element via the CSS. That means no actual markup is needed in the HTML. The content is specified from within the CSS stylesheet, and appears in the page as would a real HTML element that had been inserted following all the normal content of the target element. Such :after generated content cannot receive some CSS properties, including 'position', 'float', list properties, and table properties. However, the 'clear' property is allowed. Do you see where we are going here?

Imagine that we use :after to insert a simple character like a 'period', and then give that generated element {clear: both;} . That's all you really need to do the job, but no one wants a line space messing up the end of their clean container box, so we also use {height: 0;} and {visibility: hidden;} to keep our period from showing.

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

Notice that {display: block;} is also applied to the :after element, because if it isn't then that element defaults to "inline", and cannot receive the "clear" property. Also, Tony's method originally used "overflow: hidden;" to hide the period, but sadly the latest FireFox versions will display the period if this is done.
But what about IE?

Since IE7 does not support the :after pseudoclass yet, we must rely on the same"auto-clearing" effect used for IE6, and that behavior happens when the float-containing element gets hasLayout applied to it. A simple declaration of "zoom: 1;" will perform this trick in IE5.5 and up, but it's proprietary and needs to be hidden in order to validate.

As a side benefit, hasLayout on float-enclosing elements also prevents several other major IE/Win float bugs. However, should this container box be placed following a previous external float, the IE height fix will trigger Microsoft's proprietary and illegal Float Model, so watch out for that, okay?
Toggle Trouble

It so happens that IE has, well, a little problem with this auto-enclosing behavior. You saw that coming, didn't you. Yes, IE bugs come in big bunches. This one results when that container element has links inside, following the float. When this happens and certain links are hovered, the auto-enclosing behavior is toggled or "switched off", causing the lower edge of the container box to suddenly jump up to the bottom of the non-floated content. Hovering other links restores the behavior. This interesting effect is of course called the IE/Win Guillotine Bug Those of you viewing in IE/Win may play around with the following live demos, and for a more complete explanation see the IE/Win Guillotine Bug demo page .

The toggling only occurs when a:hover is used to change the link background or many other styling changes, such as padding, margin, or any font styling on the link. Strangely, having the text color change on hover does not toggle the bug.

The containers are grey with green borders, and the floats are dark brown with yellow borders. Notice how the third and fourth links ouside the floats toggle the Guillotine Bug, and the first two un-toggle it. This seems to be related to the actual text lines themselves, so any links after the first two lines will toggle the effect. Links in the float will all un-toggle the effect. Just more weird IE bug behaviors, folks, nothing "unusual".
Screenshot

The second demo has been "fixed" by placing those links in a paragraph, which then gets the zoom fix applied to it. Any block element will do just as well here. Yes, this means another element is needed, but unlike a clearing div, this paragraph is a "semantic" element. Text content really ought to be wrapped in semantic containers anyway, and since we forward-thinking coders always have our content thusly contained, it's easy to apply the same .clearfix class to one more element.
A Word About Floats In Floats

Observant readers will have noticed that the above demos have "enclosed" floats, even in Opera 7 and Mozilla! This is because the demos themselves are floats, and all modern browsers (including IE, luckily) always let floats enclose other floats. Of course there has to be an outer float, and it still threatens to break out of its container...
Putting It Together

First, this code gets added to the CSS stylesheet:

<style type="text/css">

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

</style><!-- main stylesheet ends, CC with new stylesheet below... -->

<!--[if IE]>
<style type="text/css">
.clearfix {
zoom: 1; /* triggers hasLayout */
} /* Only IE can see inside the conditional comment
and read this CSS rule. Don't ever use a normal HTML
comment inside the CC or it will close prematurely. */
</style>
<![endif]-->

For the HTML, just add a class of .clearfix to any element containing a float needing to be cleared, plus any Guillotine-Bug-fixing block elements within the container. That's it! It's not perfect, but it's a whole lot better than adding an entire extra 'dummy' element. Check out this live demo of the fix in action:

IE/Mac Strikes Back

All this is wonderful, but unfortunately IE for the Mac does not "auto-clear" floats, and also does not support :after, and so is left out of the clearing party. What's to be done?

You might callously abandon IE/Mac, but consider that many people who use older Macs can't run Safari, or several other modern browsers. Thankfully this browser has been dropped by Microsoft, and at some future time the numbers of such IE/Mac users will become miniscule. Remember that even if a float appears to stick out of a container, no content will actually be obscured. It just won't look as pretty for those few viewers, that's all. Each author will have to decide on this issue according to their specific needs.

This page once described a Javascript method to force compliance in IE/Mac, but now thanks to Mark Hadley and Matt Keogh it's now possible to dispense with that ugly Javascript and go with a straight CSS fix. Woohoo!
Taming the IE/Mac Float Problem

Basically the fix is just a matter of applying a display: inline-block; to the .clearfix class, and hiding that property from all other browsers. That's it! We can easily do this with our existing code, slightly modified.

<style type="text/css">

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

.clearfix {display: inline-block;} /* for IE/Mac */

</style><!-- main stylesheet ends, CC with new stylesheet below... -->

<!--[if IE]>
<style type="text/css">
.clearfix {
zoom: 1; /* triggers hasLayout */
display: block; /* resets display for IE/Win */
} /* Only IE can see inside the conditional comment
and read this CSS rule. Don't ever use a normal HTML
comment inside the CC or it will close prematurely. */
</style>
<![endif]-->

The .clearfix {display: inline-block;} is seen by all browsers, and fixes IE/Mac. Then, inside the rule set that is hidden from IE/Mac, the display is reset to block. That's all she wrote! Simply stick the above code into your CSS, and use .clearfix on any box that has to contain a sizable float. Ain't that cool? Just watch out for previous external floats triggering the IE Float Model, as mentioned earlier.

Kudos to Alex Robinson for finding that inline-block is superior to the older inline-table fix for IE/Mac.
A Word Of Warning (this is important!)

The W3C float specification requires that a cleared element shall stay below all previous floats. There are no exceptions to this requirement! "Previous" in this case means any float that comes earlier in the source document.

Up until November of 2004, Firefox was still incorrectly clearing only the floats that were vertically above the clearing element, rather than all previous floats. This meant that in those earlier Gecko browsers you could place a floated column down one side of the screen, and inside another column (possibly another floated column) you could clear a smaller interior float, without that cleared element dropping below the previous floated column. Since only Gecko had this problem, it was obvious that something was wrong every time this happened to a page. Normally Gecko is the good browser, but in this one case it was the culprit. See, IE is not always the bad guy!

However, this easy clearing method has muddled the issue quite a bit, since now Explorer is not actually being cleared at all, while Gecko browsers have finally been corrected so they do clear all previous floats.

...Oh no! Do you see what will now happen in our hypothetical float page? IE, seeing no real clearing elements, will look great. Meanwhile, in newer Gecko browsers and Opera 7, the CSS generated clearing element in the first easycleared box will drag the height of that box waaaay down the page, until that invisible clearer is vertically below the bottom of the previous float column (assuming there is a bottom!). This can "generate" a huge empty space inside that once-small easycleared box, depending on the actual height of the neighboring float column.

Of course Opera 7 has always correctly implimented the clearing specs just like IE does (aside from bugs), and the Mac browsers are not involved either. If you are wondering how this issue can be fixed, well, it can't. Gecko and Opera are now both following the float clearing specs correctly, and IE only fails because of the faked "clearing" we are forcing upon it.
Preventing External Clearing

If you have the above described problem, one way to prevent the clearer from clearing the adjacent float column is to make the container a float itself. Of course once you float the container you no longer need easyclearing, sigh...

Note that when all the main elements in a column setup are floats, the worst IE float bugs simply do not happen. Thus using an all-float approach to column design can actually be easier to accomplish, at least within a rigid-width layout.

Source : http://www.positioniseverything.net/easyclearing.html

Monday, June 14, 2010

Font Stacks

/* Times New Roman-based stack */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

/* Modern Georgia-based serif stack */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

/* Traditional Garamond-based serif stack */

font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

/* Helvetica/Arial-based sans serif stack */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans serif;

/* Verdana-based sans serif stack */
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans serif;

/* Trebuchet-based sans serif stack */
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif;

/* Impact-based sans serif stack */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans serif;

/* Monospace stack */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

Reference URL

Wednesday, June 9, 2010

Web Style Sheets CSS tips & tricks

CSS offers a number of different units for expressing length. Some have their history in typography, such as point (pt) and pica (pc), others are known from everyday use, such as centimeter (cm) and inch (in). And there is also a “magic” unit that was invented specifically for CSS: the px. Does that mean different properties need different units?em, px, pt, cm, in…

CSS offers a number of different units for expressing length. Some have their history in typography, such as point (pt) and pica (pc), others are known from everyday use, such as centimeter (cm) and inch (in). And there is also a “magic” unit that was invented specifically for CSS: the px. Does that mean different properties need different units?

No, the units have nothing to do with the properties, but everything with the output media: screen or paper.

There is no restriction on which units can be used where. If a property accepts a value in px ('margin: 5px') it also accepts a value in inches or centimeters ('margin: 1.2in; margin: 0.5cm') and vice-versa.

But in general you would use a different set of units for display on screen than for printing on paper. The following table gives the recommended use:

Style sheets for output to a screen

Recommended - em, px, %
Occasional use - ex
Not recommended - pt, cm, mm, in, pc

Style sheets for printing

Recommended - em, cm, mm, in, pt, pc, %
Occasional use - px, ex


The so-called absolute units (cm, mm, in, pt and pc) mean the same in CSS as everywhere else. A length expressed in any of these will appear as exactly that size (within the precision of the hardware and software). They are not recommended for use on screen, because screen sizes vary so much. A big screen may be 60cm (24in), a small, portable screen is maybe only 8cm. And you don't look at them from the same distance.

The em and ex units depend on the font and may be different for each element in the document. The em is simply the font size. In an element with a 2in font, 1em thus means 2in. Expressing sizes, such as margins and paddings, in em means they are related to the font size, and if the user has a big font (e.g., on a big screen) or a small font (e.g., on a handheld device), the sizes will be in proportion. Declarations such as 'text-indent: 1.5em' and 'margin: 1em' are extremely common in CSS.

The ex unit is rarely used. Its purpose is to express sizes that must be related to the x-height of a font. The x-height is, roughly, the height of lowercase letters such as a, c, m, or o. Fonts that have the same size (and thus the same em) may vary wildly in the size of their lowercase letters, and when it is important that some image, e.g., matches the x-height, the ex unit is available.

The px unit is the magic unit of CSS. It is not related to the current font and also not related to the absolute units. The px unit is defined to be small but visible, and such that a horizontal 1px wide line can be displayed with sharp edges (no anti-aliasing). What is sharp, small and visible depends on the device and the way it is used: do you hold it close to your eyes, like a mobile phone, at arms length, like a computer monitor, or somewhere in between, like a book? The px is thus not defined as a constant length, but as something that depends on the type of device and its typical use.

The relation between the absolute units is as follows:
1in = 2.54cm = 25.4mm = 72pt = 12pc

If you have a ruler handy you can check how precise your device is: here is a box of 1in (2.54cm) high:

To get an idea of the appearance of a px, imagine a CRT computer monitor from the 1990s: the smallest dot it can display measures about 1/100th of an inch (0.25mm) or a little more. The px unit got its name from those screen pixels.

Nowadays there are devices that could in principle display smaller sharp dots (although you might need a magnifier to see them). But documents from the last century that used px in CSS still look the same, no matter what the device. Printers, especially, can display sharp lines with much smaller details than 1px, but even on printers, a 1px line looks very much the same as it would look on a computer monitor. Devices change, but the px always has the same visual appearance.

CSS also defines that raster images (such as photos) are, by default, displayed with one image pixel mapping to 1px. Thus a photo with a 600 by 400 resolution will be 600px wide and 400px high. The pixels in the photo thus do not map to pixels of the display device (which may be very small), but map to px units. That makes it possible to exactly align images to other elements of a document, as long as you use px units in your style sheet, and not pt, cm, etc.

Use em or px for font sizes

CSS inherited the units pt (point) and pc (pica) from typography. Printers have traditionally used those and similar units in preference to cm or in. In CSS there is no reason to use pt, use whichever unit you prefer. But there is a good reason to use neither pt nor any other absolute unit and only use em and px.

The magic unit of CSS, the px, is a often a good unit to use, especially if the style requires alignment of text to images, or simply because anything that is 1px or a multiple of 1px wide is guaranteed to look sharp.

But for font sizes it is even better to use em. The idea is (1) to not set the font size of the BODY element (in HTML), but use the default size of the device, because that is a size that the reader can comfortably read; and (2) express font sizes of other elements in em: 'H1 {font-size: 2.5em}' to make the H1 2½ times as big as the normal, body font.

The only place where you could use pt (or cm or in) for setting a font size is in style sheets for print, if you need to be sure the printed font is exactly a certain size. But even there using the default font size is usually better.

Here are a few lines of different thickness. Some or all of them may look sharp, but at least the 1px and 2px lines should be sharp and visible:

0.5pt, 1px, 1pt, 1.5px, 2px

If the first four lines all look the same (or if the 0.5pt line is missing), you are probably looking at a computer monitor that cannot display dots smaller than 1px. If the lines appear to increase in thickness, you are probably looking at this page on a high-quality computer screen or on paper. And if 1pt looks thicker than 1.5px, you probably have a handheld screen.

More units in CSS in the future

To make it even easier to make style rules that depend only on the default font size, a new unit is in development: the rem. The rem (for “root em”) is the font size of the root element of the document. Unlike the em, which may be different for each element, the rem is constant throughout the document.

Other units in development make it possible to specify sizes relative to the reader's window. These are the vw and vh. The vw is 1/100th of the window's width and the vh is 1/100th of the window's height.

Article Source : http://www.w3.org/Style/Examples/007/units

Saturday, June 5, 2010

iPad Orientation CSS

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Thursday, June 3, 2010

Wednesday, June 2, 2010

Cross-Browser hr Styling

PNG Hack/Fix for IE 6

For CSS background-images

.yourselector {
width:200px;
height:100px;
background: url(/folder/yourimage.png) no-repeat;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');
}

Cannot be used with repeating, needs fixed with and height.


For inline HTML images

img, .png {
position: relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}