I worked on a project where we converted a large publishing site from table based layouts to CSS. The new CSS based layout had to work across all of the different major browsers including the older version of IE.
I’m going to share 2 CSS tricks that I thought were very helpful for this project:
1)The !important override.
Sharepoint will import it’s own CSS file(core.css) and there may be a style defined in there that you wish to override. If there are multiple CSS definitions that are the same, the one that the browser interprets last will take precedence. However, by adding !important to the style, you are telling the browser that this style takes the top priority regardless of it’s order on the page. For example, say there is a class named tblClass in core.css and it has a margin setting you wish to override. Here is the code that would make this work:
.tblClass{
margin:4px 0 !important
}
2)The IE underscore hack.
IE, especially the older versions, are notorious for it’s numerous bugs pertaining to CSS based layouts. One of the more infamous is the double margin bug. In IE 5,6,7 if you have a floated element and a margin assigned, IE will double that margin. This can make supporting older versions of IE a nightmare. Fortunately, there is a way to resolve this without too much pain. If you precede the style with an underscore, IE 5-7 will interpret that style whereas every other browser will ignore it. See the following example:
.testClass{
margin:10px;
_margin:5px
}
Remember, IE 5-7 will double the margin on a floated element, so in order to make this work we assign a value that’s half of what we actually want.
