For all it’s many advantages, sometimes it’s the little things that CSS layout makes difficult that really get to

you.

A logical and structured layout is the best way to go. Not only because your layout varies between browsers, but also

because CSS has a lot of ways to position every element you have. Today we wanted to share with you some quick CSS code

snippets on how to avoid easy pitfalls when creating your CSS layout, some of the following snippets are cross browsers

while others are not. We thought we could share them only if you are looking for a quick fix.

This is the first part in this series as there are SO MANY good tricks out there and if you see an easier or better

methods, then post a comment below or email me so we add it in this series.

1. Hide text with text indent

h1 {
text-indent:-9999px;/*Hide Text, keep for SEO*/
margin:0 auto;
width:948px;
background:transparent url("images/header.jpg") no-repeat scroll;
}

By Drew Douglass.

2. Cross Browser Minimum Height

#container  { min-height:500px; } * html #container { height:500px; }  

“Internet Explorer 6 is the only browser that recongizes the “* html _____” selector and thus is the only browser

of “height” as a min-height. The only drawback to using this code is that it’s not valid CSS.” by

href="http://davidwalsh.name/cross-browser-css-min-height">David Walsh

Another way to do this and make it valid CSS:

#container{
height:auto !important;/*all browsers except ie6 will respect the !important flag*/
min-height:500px;
height:500px;/*Should have the same value as the min height above*/
}

3. Highlight links that open in a new window

Here’s the CSS to highlight links that open in a new window.

a[target="_blank"]:before,
a[target="new"]:before {
margin:0 5px 0 0;
padding:1px;
outline:1px solid #333;
color:#333;
background:#ff9;
font:12px "Zapf Dingbats";
content: "\279C";
 }

4. Highlight links to PDF and Word files

Here’s the CSSto highlight links that open PDF or Word files without informing the user.

a[href$="pdf"]:after,
a[href$="doc"]:after {
margin:0 0 0 5px;
font:bold 12px "Lucida Grande";
content: " (PDF)";
}
a[href$=".doc"]:after {content: " (DOC)";}

“This will insert either (PDF) or (DOC) after links with an href attribute value that ends in pdf or doc.” by

href="http://www.456bereastreet.com/archive/200812/reveal_new_window_links_and_links_to_non-

html_files_with_a_user_stylesheet/">Roger Johansson

5. The order of link pseudo-classes

Eric Meyer

explains why the order matters. So in case you came across the “link-visited-hover-active” (LVHA) rule. This holds that

the four link states should always be listed in that order, like so:

a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: red;}
a:active {color: yellow;}

6. Simple Clearing of floats

One of the simplest and most common layout structures involves the placing of a small, set-width DIV ‘#inner’ within a

larger wrapping DIV ‘#outer’ that contains the remaining content. If ‘#inner’ grows taller than it’s wrapping parent, it

breaks through the bottom edge of ‘#outer’. As we can’t always control the amount of content in these DIVs, it certainly

presents a problem. The markup would be something like

<div id="outer"> 
        <div id="inner"> <h2>A Column</h2> </div> 
        <h1>Main Content</h1> 
        <p>Lorem ipsum</p> 
</div> 

The CSS will look like this

#inner{
width:26%; 
float:left;
}
#outer{ 
width:100%;
}

A simple trick to fix this issue is

by adding ‘overflow:auto’ to the outer DIV

7. Creating a Page Break

Snook share a little CSS trick for those who

run blogs: force a page break before the comments so the users have the option to print the article with or without the

comments. If they print just the article then it can stand alone in a nice clean package.

#comments {page-break-before:always;}

8. Style Your Ordered List

By default, most browsers display the ordered list numbers same font style as the body text. Here is a quick CSS tip on

how you can use the ordered list (ol) and paragraph (p) element to design a stylish numbered list. By

href="http://www.webdesignerwall.com/tutorials/style-your-ordered-list/">Nick La

The markup would be:

<ol>
  <li>
    <p>This is line one</p>
  </li>
  <li>
    <p>Here is line two</p>
  </li>
  <li>
    <p>And last line</p>
  </li>
</ol>

The CSS to style it:

ol {
  font: italic 1em Georgia, Times, serif;
  color: #999999;
}
ol p {
  font: normal .8em Arial, Helvetica, sans-serif;
  color: #000000;
}

9. Create Resizable Images With CSS

“I’m a big fan of layouts that still work if a user increases their browser’s text size. However, I was wondering what

it would be like if any images resized along with the text rather than staying constant in size. Would everything seem

more in proportion?” by Christian Watson. To do this, we

need to use a large image and wrap it in a div which was sized in ems. This enables it to be centered within the div

Here’s the HTML:

<div class="resize2"><img src="image.jpg" alt="" /></div>

And the CSS:

.resize2 {
  border: 3px double #333;
  float: left;
  height: 12em;
  margin: .2em 1em 1em 0;
  overflow: hidden;
  width: 12em;
}
.resize2 img {
  margin: -220px 0 0 -210px;
  padding: 6em 0 0 6em;
}

10. Create a Block Hover Effect for a List of Links

The “block hover” effect for lists of links gives the design an elegant effect. we see this all the time now.

“Because IE only supports the :hover element for links, the link anchor needs to go around all the text in the list item.

Therefore, we need to provide some additional hooks in order to style the content. We do this through the use of

<em> and <span> tags.” by Christian

Watson.

Here’s the HTML:

<div id="links">
    <ul>
      <li><a href="#" title="Text">Link Heading One
        <em>Description of link.</em>
        <span>Date posted</span></a></li> 
      <li><a href="#" title="Text">Link Heading One
        <em>Description of link.</em>
        <span>Date posted</span></a></li>
    </ul>
  </div> 

And now the CSS. In order for the block hover effect to work properly in IE, we need to make the width of the link the

same as that of the list item. Otherwise the hover effect will only display when you mouse over the text within the list

item.

#links ul {
        list-style-type: none;
        width: 400px;
} 
#links li {
        border: 1px dotted #999;
        border-width: 1px 0;
        margin: 5px 0;
}
#links li a { 
        color: #990000;
        display: block;
        font: bold 120% Arial, Helvetica, sans-serif;
        padding: 5px;
        text-decoration: none;
}
 * html #links li a {  /* make hover effect work in IE */
	width: 400px;
}
#links li a:hover {
        background: #ffffcc;
}
#links a em { 
        color: #333;
        display: block;
        font: normal 85% Verdana, Helvetica, sans-serif;
        line-height: 125%; 
}
#links a span {
        color: #125F15;
        font: normal 70% Verdana, Helvetica, sans-serif;
        line-height: 150%;
}

11. Eric Meyer’s Reset CSS

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and

font sizes of headings, and so on.

/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

12. DROP CAPS

According to w3schools only font, color, background, margin, padding, border, float and some other properties can be

applied to the first letter. Still you can make a nice drop cap with CSS

p:first-letter{
display:block;
margin:5px 0 0 5px; 
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;
}

13. CSS Transparency Settings for All Browsers

“Transparency is one of those weird things that is treated completely differently in all browsers. To cover all your

bases, you need four separate CSS statements. Fortunately they don’t interfere with each other really, so using them all

every time you wish to add transparency is no big hassle and worry-free.” by Chris Coyier.

Transparency is set to 50%

.transparent_class {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

14. Rounded Corners with Border-Radius

CSS3 specification offered us Rounded Corners with Border-Radius, which is currently supported by few browsers. Here is

a snippet:

.container{ 
    background-color: #fff;
    margin: 10px;
    padding: 10px;
    -moz-border-radius-topleft: 20px;
    -webkit-border-top-left-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -webkit-border-bottom-right-radius: 20px;
}

14.2 Cross Browser rounded Corner

“Simplest way is to use a giant gif, then I’ll markup my box”-

href="http://www.askthecssguy.com/2007/11/mike_asks_the_css_guy_for_reco_1.html">Askthecssguy.

<div class="roundBox">
  <p>beautifully-encapsulated paragraph</p>
  <div class="boxBottom"></div>
</div>

CSS would be:

.roundBox {
  background:transparent url(roundBox.gif) no-repeat top left;
  width:340px;
  padding:20px;
}
.roundBox .boxBottom {
  background:white url(roundBox.gif) no-repeat bottom left;
  font-size:1px;
  line-height:1px;
  height:14px;
  margin:0 -20px -20px -20px;
}

15. HangTab. Check out Panic’s website for their software Coda.

Create a Sticky Tag from the Edge of the Browser Window (Even with Centered Content).

#hang_tab {
position: absolute;
top: 7px;
left: 0px;
width: 157px;
height: 93px;
}