10 Important CSS Tricks To Solve Tricky Issues

This is a collection of a 10 useful CSS snippets that you might want to keep and use when required.


1. How to display scrollbar by default

Browsers usually hide the vertical scrollbar by default. You can solve the issue by using this simple trick -

html { 

2. Cross browser opacity

We have a good opacity property in CSS but the real issue exists with browser compatibility, which can be fixed with this nice trick -

div {
/* standards-compliant browsers */
/* The following is for IE and versions */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";  /* IE8 */
filter: alpha(opacity=70); /* IE 5-7  */

3. Prevent Long URL’s From Breaking Out of Container

When we write content without a single space in between it will cross the containers width but we have a nice solution to the problem. CSS3 comes to our rescue here -

.long-text {
word-wrap: break-word;

4. Full page background image

We need to create a background image that can stretch across the window, to achieve this effect we need to take a look at the CSS3 property here -

background: url(bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

IE support

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

5. Print page breaks

There are people who like to print articles and read them on paper. It is important to make the page breaks for better understanding of content on paper. We need to add this CSS class to any tag which you would like to print on next page like this -

.page-break {

6. Inline-Block on UL LI

We have three boxes aligned side by side in UL LI tags. Now we normally use float to make them sit next to each other. But what if content of one container increases. Other two will break and layout will become weird. The solution to this problem lies in the code below -

Html to use:

<li>Item one</li>
<li>Item two</li>
<li>Item three</li>

CSS to use:

margin: 0;
padding: 0;

ul li {
display: inline-block;
vertical-align: top;

This will keep the starting position same for all three boxes irrespective of difference in content in the boxes.

7. Prevent a line break

Sometimes the text in a link or heading will break where you don’t want it to. A simple way to prevent this is -

h1 { 

8. Remove button text in IE7

There are times when we have to remove button text in IE7. Here is the way to do it -

Html to use:

<input class="button" type="button" value="Go">

CSS to use:

input.button { text-indent: -9000px; text-transform: capitalize; }

9. Set body font-size to 62.5% for easier em conversion

If you would like to use relative units (em) for your font sizes, declaring 62.5% for the font-size property of the body will make it easier to convert px to em. By doing it this way, converting to em is a matter of dividing the px value by 10 (e.g. 24px = 2.4em) -

body {
font-size: 62.5%; /* font-size 1em = 10px */

p {
font-size: 1.2em; /* 1.2em = 12px */

10.Remove vertical textarea scrollbar in IE

IE adds a vertical scrollbar to textarea input fields regardless of the height of content in it. You can fix that with this simple CSS trick -

textarea {  

Final Words

These are few tricks which have been useful for me over a period of time. There are lot more which you must be having.Do comment and share…

Reference Websites

– 15 CSS Tricks that must be learned


Written by Nikhil Malhotra

Hi! I am Nikhil Malhotra, a Web/UI designer and Front End developer. This is the area of my website where I share my knowledge in form of tutorials and articles.

This entry was posted in Code and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *