It’s never good practice to use HTML elements as presentation elements, but sometimes you gotta use an <hr />.
color: #000; background-color: #000; height: 4px; border: none;
Note that you have to specify the color and background color so it works in IE.
As you probably know, Internet Explorer has a bad habit of butchering CSS. While working on a project the other day, I came across a quick way to fix CSS that looks great in all browsers except for IE. If you weren’t aware (I wasn’t!), the underscore character preceding any property in a CSS declaration marks that line as a comment, and most browsers will ignore it when it renders the page. However, Internet Explorer is blind to this, thus rendering the “commented out” element anyway. This can be used to your advantage. Say you need a div to have a width of 750 pixels in any browser except IE, in which it needs to be 760 pixels instead. Simple! Your code would look like this:
#id {
width:750px;
_width:760px;
}
And, voila! Internet Explorer will now render the div’s width differently than other browsers.
You can’t get very far with CSS unless you have some standard HTML. My favorite flavor of hypertext markup is XHTML 1.0 Transitional. Here is a fresh template:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Blank XHTML 1 Transitional Page</title>
</head>
<body>
</body>
</html>
Let’s hope the Googlebot indexes this near the top so you don’t have to search around for a standard XHTML template.
Many times, when you click on someone’s logo, you see that little dotted border around the image when you click it. I think it looks sloppy.
There is an easy CSS fix for this:
a { outline: none; }
Try it.
I always forget about this bug and end up being puzzled as to why the spacing on my page is all wrong, so remember this! This bug happens when you have a floated element with a margin defined in the same direction of the float. For example:
#sidebar {
float: left;
width: 200px;
margin-left: 10px;
}
IE6 will actually double margin-left to 20px, throwing your page out of whack if you have a tight layout. To fix, all you have to do is add this rule to the floated element:
display: inline;
And boom! Another IE6 bug is squashed.
Kevin Cupp posted earlier about a way to style everything at once using the universal selector (*). That is not my method of choice though because:
Here is a better way to “reset” your styles:
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,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
line-height: 1;
font-family: inherit;
text-align: left;
vertical-align: baseline;
}
a img, :link img, :visited img {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
q:before, q:after,
blockquote:before, blockquote:after {
content: "";
}
This is Eric Meyer’s rendition of reset.css. Try it out, and let us know how it works.
You should start every web project with this bit of presentation-layer code.
Let your readers know before they click a link and it opens up some large application like Acrobat, Word, Excel, or Quicktime.
The HTML for the above link has no styles attached to it:
<a href="news/issue12.pdf">View Latest Issue</a>
The trick is all in the CSS:
a[href $='.pdf'] {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}
Now when you link to a PDF, your reader will be prepared. Other ideas for this include Word and Excel docs, and even mailto: links (for which you need to use the ^= option instead of $= to search the beginning of string). Looking at the first line of the code, you can see this can be used on any element and any of its attributes.
The pre tag stands for preformatted text, but it acts differently in all browsers. Here is a snippet of code that should cover all bases:
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Thanks to Tero Karvinen for this tip.
Thankfully, in CSS-3, the <pre> tag will be fixed.
Have a common property in the majority of your elements? Just style everything the same way with an astrisk:
* { margin: 0; padding: 0; }
For this example, now you only need to set margin and padding where you actually need some! The Universal Selector’s convenience doesn’t stop there, check out Eric Meyer’s post to learn how to get the most out of it.
In honor of Mager’s new transparancy-heavy (and f***ing sick) site redesign by Marc Mendell, here’s a quick and easy way to make png transparencies work in IE6.
So you have your background url set something like this and it looks awesome in all the real browsers:
#pngImage {
background: url(transparent-bg.png) no-repeat;
}
But in IE6 it looks like pure shyte. All you need is a simple star hack and MS’s proprietary AlphaImageLoader…
* html #pngImage {
background-image:none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='transparent-bg.png', sizing='scale')
}
This is a great trick when you just have one (or a few) png transparencies in your css.