Css tips isn't always that tricky, however, there's a lot of information out there that can be found!

Hopefully, alot of tips and tricks will surface here .

Only for Internet Explorer

This trick is actually quite easy - lets say that a absolute positioned div sits 10 pixels too far to the left in IE and the site was design for Firefox, where it sits fine. Here's the code without the IE fix.
CSS ->
margin-top: 137px;
margin-left: 120px;


To fix the 10 pixels error, you simply add this line:
CSS ->
*margin-left: 110px;


The final code will then look like:
CSS ->
margin-top: 137px;
margin-left: 120px;
*margin-left: 110px;



Image Positioning

This feature is quite amazing as well. When you use no-repeat on a background picture of a div, you can actually tell the div where to place the given picture inside of that div.

How's this gonna help you ask?

Well, lets say you have a div that's 200 pixels wide and 500 pixels high, but you have a 100x100pixels picture that has to be placed in the lower right corner. The code would look like this:
CSS ->
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: bottom right;


The good thing about background-position is that you can add as many attributes as you want. Center, bottom, right, left and top are examples of the attributes background-position takes.

Stacking Divs

Also used on this page is to stack your divs. The purpose of this can be many things. On this site the idea is to remove the topbanner, the menu and what not from the top of the source to the bottom. This is done by using position: absolute
By doing this, you ensure that search engines find the information you want to give them as soon as possible. Another way of doing good like this, is to use Ajax. By this i mean to pull the menu, topbanner etc in via Ajax, as search engines cannot read this. The less material they have to read that isn't crucial, the better in my opinion.
To accomplish this task, here is the sample css of how I have set my menu (the one at the top of the page) up in css on this page:

CSS ->
margin-top: 137px;
padding-top: 0px;
margin-left: 208px;
position: absolute;
height: 26px;
z-index: 99999;


It's important to note that z-index is set to 99999, so everything below z-index 99999 will be shown below this div.

Facebook comments

Close