Not safe for work
Click here to reveal
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
to read the hard-set height. Since IE6 also stretches down despite the hard-set height property, you can view IE6’s idea
of “height” as a min-height. The only drawback to using this code is that it’s not valid CSS.” by 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 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 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 yourbases, 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”- 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;
}
