csstrick

Some CSS Tricks

Some small and common css trick to remember, by the way I gave up on IE6 now, so don’t really care whether the style it will work on IE6 or not.


1. Fixed on the left, and scrolling on the right

The inspriation is from http://www.nuyustore.com/ .   I like the way nüyu display the content.  this is very simple to do by using CSS.

CSS:
[cc lang="css"]
#col1 {
float:left;
margin-right:30px;
position:fixed;
width:260px;
}
#col2 {
float:left;
margin-left:300px;
width:650px;
}
[/cc]

HTML:

[ccie_html]<div class=”col1″>fix position content, for example navigation menu</div>

<div class=”col2″>scrolling content, for example main content</div>

[/ccie_html]

See some examples of the fix navigation

2. footer always at the bottom of the page

This is an very classic problem for lots for front end developer.  My method is based on Matthew James Taylor’s post.

CSS:
[cc lang="css"]
#wrap{ min-height:100%; position:relative, background-color:#fff; width:1000px; margin:0 auto;}
#header{ width:948px; padding:0 26px;}
#main{ width:948px; padding:47px 26px 165px 26px; overflow:auto;}
#footer{ position:absolute; bottom:0; height:165px; background-color:#666; width:100%; padding-top:35px; }

/*If IE 7 & IE6*/
#main {height:100%;}

[/cc]
HTML:

[ccie_html]
<div id=”wrap”>

<div id=”header”>…</div>
<div id=”main”>….</div>
<div id=”footer”>…</div>

</div>
[/ccie_html]

3.Min height/Width & Max Height/Width for IE7
[cc lang="css"]
#{

max-height:400px; /*for Firefox and other broswers*/
width: expression(this.height> 200 ? “200px”: true); /*for IE only*/

}

#div{

min-height:600px;  /*min height work for all browsers */
height: auto !important;
height: 600px;

}

[/cc]

4.reset CSS style
[cc lang="css"]

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

[/cc]

5. To show the hr with image background use

CSS:
[cc lang="css"]

div.smldivider

{

clear:both;
width:100%;
background-image:url(../Images/dotted-line.jpg);
background-position:left center;
background-repeat:repeat-x;
height:5px;
border:solid 0px #f2f2f2;

}

div.smldivider hr

{

display:none;

}

[/css]

HTML:

[ccie_html]<div><hr/></div>[/ccie_html]

6. locate the elment in middle horizontally

CSS:

[cc lang="css"]
#sec_nav
{

width:950px; /* the width must be defined */
margin:0 auto; /*auto can make the sec_nav location in the middle or in the middle of some container */
text-align:center;
height:25px;

}
[/cc]

7.Conditional Comments for different version of IE browsers

[ccie_html]
<!—[if IE 6]>

<link rel=”stylesheet” type=”text.css” href=”ie6.css”>

<![endif]–>
[/ccie_html]

8.p: before and p: after and the property of content , for example:

[cc lang="css"]
p:before, p:after
{ content: “” ”; color: gray; }
[/cc]
or
[cc lang="css"]
{ content: url(para.gif) }
[/cc]

<p>This is a quote.</p>

Result:  “ This is a quote. ”

9. Get ride of the link border
[cc lang="css"]
a:link{ outline-style:none}
[/cs]
But keep in mind the outline may be very important for user who use the keyboard to browser the website.

10.IE White space bug

There is a white space under the images in IE

Solution: add <div> wrap the link and image <img src=”images/test.jpg” alt=”test image”></div>

11. Some CSS selectors

[attribute^=string] – This looks for the string at the Beginning of the Attribute.
[attribute$=string] – Looks for the string at the End of the Attribute.
[attribute*=string] – Looks for the string Anywhere in the Attribute.

12. CSS hack for Safari only
[cc lang="css"]

/* To target a safari browser issue */

@media screen and (-webkit-min-device-pixel-ratio:0){

Element{
}
}
[/cc]
13. 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.

Adde this in the css : img { -ms-interpolation-mode: bicubic; }  to make the image look smooth in IE

…More to come

Leave a Reply

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

* Copy This Password *

* Type Or Paste Password Here *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>