CSS Snippets That Can Come Handy

Sometimes doing something with CSS that looks the same for all browsers is pretty annoying. Some things might look different on different browsers. We all had the same headaches with IE for example. Not to mention the differences from one version of IE to another.

This is a list of ways to make things work ok on all major browsers.

Sticky Footer

A new solution from www.cssstickyfooter.com promises 100% sticky footer with all major browsers, including Chrome.

CSS:

/*
Sticky Footer Solution
by Steve Hatcher

http://stever.ca

http://www.cssstickyfooter.com

*/

* {margin:0;padding:0;}

/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}

/* CLEAR FIX*/
.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 */

HTML:

<div id="wrap"></div>
<div id="footer"></div>

Here is a nice how-to use the above snippets.

Rounded Corners

CSS3 supports rounded corners using the border-radius property, but untill all browsers support CSS3, rounded corners needs a little more coding to make. An excellent article on creating rounded corners using CSS Sprites explaining a step by step process is all you need to start using them. No need to duplicate the code snippets here since it is worth reading it all.

Min-Height in IE

Dustin Diaz posted a great snippet on his blog that fixes this annoying IE bug.

CSS:

selector {
min-height:500px;
height:auto !important;
height:500px;
}

Hover Effects on every element for IE

Download this file from xs4all.com and use this snippet in your CSS:

body { behavior: url("csshover3.htc"); } 

You should first make sure that your server treats .htc files with a mime-type of text/x-component . To do this in Apache you should put this code in your .htaccess file:

AddType text/x-component .htc

Image Ajax like Preloading using only CSS

Grab a loader image and try this on one of your pages (preferably large images):

CSS:

img { background: url(loader.gif) no−repeat 50% 50%; }

Fade text with CSS

You can make your text fade using a fading image and some css. For example you can use this image and this code:

CSS:

#bottom_fade {
z-index: 99;
position: fixed;
bottom: 0%;
background-image: url("bottom-fade.png");
}

to produce something like this:

Using a little variation you can create gradient or glossy headers:

CSS:

h1 {
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}

HTML:

<h1><span> </span>Content Here</h1>

For IE 6 users:

<!--[if lt IE 7]>

<mce:style><!  h1 span {   background: none;   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale'); } -->

<!--[endif]-->

Center Elements with CSS

element{
margin:0 auto;
}

Display Block Elements Side by Side

DIV{
display:inline;
float:left;
}

The DIV mentioned above can be any block element.

Usability Feature on Links

You can set an access key on each of your links. This will act as a shortcut and a user can access your link by holding the Alt+KEY. This can be done like this:

<a accesskey="s" href="somelink.html">Some File</a>

There is a way to display the accesskey on each link with css :

a:hover:after, a:focus:after
{
content: " (" attr(accesskey) ") ";
}

So when the user hovers the link, the link will display the shortcut in parenthesis. eg: Some File (s)

No Fieldset Border on Opera

fieldset {border:0 solid}

Styling XML With CSS Only

Do you know you can style XML documents with CSS only? No extra knowledge needed, just plain css. You just have to set the display property of each element. So for example this code:

Hello

Can be transformed to a nice bordered block with red text using this css:

sample{
display:block;
border:1px solid silver;
padding:5px;
}

red{
color:red;
}

Here is a full layout built with this technic.

Note: The above snippet works anywhere except… You know who.

Exposing Microformats on Your Pages

Just use the class name to do this. Generally microformats use these class names:

• hCard
• hReview
• hCalendar

You can also expose microformats using :before, :after in combination with the “rel” attribute.

Displaying Elements Centered Vertically

Display text in the middle of a paragraph.

DIV.container {
min-height: 10em;
display: table-cell;
vertical-align: middle
}

<div class="container">

Vertical middle

</div>

CSS Snippets That Can Come Handy8.5104

Popularity: 2%

Related posts:

1. IE Only, Cool Features, That Should Exist On Other Browsers Too OK Internet Explorer (mainly <7 ) is the source of...
2. Google Visualizations From A To Z Google has released an API that you can use to...