>
CSS Snippets That Can Come Handy
Welcome, Guest

by Rishi on Wednesday, 27 April 2011
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/*
Sticky Footer Solution
by Steve Hatcher
*/
* {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:

1
2
<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:

1
2
3
4
5
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:

1
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:

1
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:

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

to produce something like this:

sma

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

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
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:

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

For IE 6 users:

1
2
3
4
5
<!--[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

1
2
3
element{
margin:0 auto;
}

Display Block Elements Side by Side

1
2
3
4
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:

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

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

1
2
3
4
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

1
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:

1
Hello

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

1
2
3
4
5
6
7
8
9
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.

1
2
3
4
5
DIV.container {
min-height: 10em;
display: table-cell;
vertical-align: middle
}
1
2
3
4
5
<div class="container">
Vertical middle
</div>



Blogger Image
My Blog Title

Product Engineering, software engineering company, Product Development, Product Migration, Product Re-engineering, Product Maintenance, Product Testing Commercial Application Development, Business Software development, commercial software for startups, Application Support and Maintenance, software testing Product Maintenance, Outsource product maintenance, product support and maintenance Product Migration, Product Re-engineering, product re-engineering services Product Research, Product Engineering, UI Prototyping Services Software Testing Services, Quality Assurance services, professional software testers, Load Testing, Functional Testing, Cross Platform, Browser Testing, Test Automation, Testing Tools, software quality analysis Functional Testing Services, software quality analysis, Software Testing Services, Application Testing Services, Functional Testing Types Automated Testing, Automated Testing Services, automation testing, test script development, Automation Test Tools, outsource automation testing Load Testing, Performance Testing Services, Load Testing Tools Offshore Software Development, Outsource software services, offshore outsourcing services, offshore software development services, IT outsourcing services, software quality assurance services, Offshore IT services, Custom Application Development Services, Offshore Product Engineering Benefits of IT Outsourcing, Offshore Software Development companies, offshore software development firms Outsource planning, IT outsourcing, IT development services, offshore IT companies, offshore software development Offshore Software Development, Outsource software services, offshore outsourcing services, offshore software development services, IT outsourcing services, software quality assurance services, Offshore IT services, Custom Application Development Services, Offshore Product Engineering Offshore Software Development, Outsource software services, offshore outsourcing services, offshore software development services, IT outsourcing services, software quality assurance services, Offshore IT services, Custom Application Development Services, Offshore Product Engineering