Our BLOG

Min-Height for IE

It's simple, IE ignores min-height properties and you can use the following hack to fix it. Credit to Dustin Diaz This solution works like a charm in IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2

Solution

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

Bicubic Image Scaling

You'll love this one. Does the bad image scaling in IE bothering you? If you compared other browsers and IE, IE's rescaled image doesn't look as good as other.

Solution

img {-ms-interpolation-mode: bicubic; }

IFrame Transparent Background

In firefox and safari you shouldn't encounter this problem because by default, the iframe background is set to transparent, but in IE, it doesn't. You need to use allowTransparency attribute and put the following CSS code to achieve that.

Solution
/* in the iframe docuement, in this case content.html */

body {
background-color:transparent;
}

Double Margin Bug Fix

If you have floated elements with margin left and/or right assigned, IE6 will double up the margin. Forexample, margin-left:5px will become 10px. You can solve that by adding display:inline to the floated element.

Solution

div#content {
float:left;
width:200px;
margin-left:10px;

/* fix the double margin error */
display:inline; }

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;
}

Size text without using pixels

Solution

body { font-size: 62.5% }

Simply throw the font-size: 62.5% bit into your body styling and you’re done. Now you can use ems to sizes your fonts rather than pixels. So your paragraph styles might look something like this:

p { font-size: 1.2em; line-height: 1.5em; }

Remove links or textbox hightlight border

a, input { outline:none; }

CSS Transparency Setting for all browsers

.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, */
}

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.

h1{
white-space:nowrap;
}

CSS Tooltips

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

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;
}

Keep consistent with SUP and SUB

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

sup {
bottom: 1ex;
}

sub {
top: .5ex;
}

Neat and Easy Navigation: Navigation of links on your site plays a big role in determining the stickiness of your site (how long your visitor stays and explores your site). Ask yourself this, What do visitors do as soon as they open your site? They would probably read the content of the present page and then look around to find any other page that interests them.

Clean Layout Design: A clean layout that uses a lot of white space enhances a site's looks. Try to keep the focus on your content, use dreamweaver templates for this. Use fonts that will be available on all computers to prevent your site looking messed up.

Program using pure CSS: The world is moving away from table based websites to pure CSS websites because it offers accessibility, reusability and considerably reduces file size apart from giving greater control over the look of your website.

Optimum Load Time: Make sure your load time is low. For this you must:
Minimize Graphics, Flash and scripts: They hugely increase your file size.
Optimize your HTML & script code: Make sure that your site doesn't have any unwanted tags or unused scripts.

Design for all Screen Resolutions: A site that is easy-to-use always encourages visitors to stay and read your content. For site with long pages of content this is very crucial as the amount of scrolling required is reduced.

Ensure Web site scalability: Make sure your code and design is scalable. As technology advances and configuration of computers & their monitors keep increasing and varying it is impossible to test your site in all screen sizes and platforms.

Cross Browser Compatible: Make sure you check your site for Internet Explorer 5+, Mozilla Firefox 1+, Opera 7+, Safari 3+ and Netscape Navigator 6+ as they constitute 98% of the worlds browsers.

CSS Website Design Guide: Learn how to easily design a professional website using Adobe Fireworks and then build it into a CSS website using Adobe Dreamweaver. Create step-by-step the cool CSS website shown above.