CSS headers, no images!

http://benalman.com/ (broken in IE6 atm)

by Ben Alman

HTML

<p>test</p>

<div class="widget">
    <h1 class="header clearfix">
        <a href="#">This is a Sample Title!</a>
        <span></span>
    </h1>
    <div class="content">
        content content content content content content content content content content content content content content content content content content content content content content content content content content
    </div>
</div>

<p>test</p>

<div class="widget">
    <h1 class="header clearfix">
        <a href="#">This is an Even Longer Sample Title!</a>
        <span></span>
    </h1>
    <div class="content">
        content content content content content content content content content content content content content content content content content content content content content content content content content content
    </div>
</div>

<p>test</p>

<div class="widget">
    <h1 class="header clearfix">
        <a href="#">This is a Sample Title!</a>
        <span></span>
    </h1>
    <div class="content">
        content content content content content content content content content content content content content content content content content content content content content content content content content content
    </div>
</div>

<div class="widget">
    <h1 class="header clearfix">
        <a href="#">This is a Sample Title!</a>
        <span></span>
    </h1>
    <div class="content">
        content content content content content content content content content content content content content content content content content content content content content content content content content content
    </div>
</div>

<p>test</p>

CSS

.widget .header {
    background: #eee;
    border: 1px solid #777;
    position: relative;
    top: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-right-radius: 10px;
    border-radius-topright: 10px;
}

.widget .header a,
.widget .header span {
    float: left;
    margin-top: -10px;
}

.widget .header a {
    font-size: 120%;
    font-weight: 700;
    height: 40px;
    line-height: 40px;
    background: #fff;
    border: 1px solid #000;
    padding: 0 10px;
    text-decoration: none;
    color: #000;
    margin-left: -1px;
    margin-bottom: -1px;
}

.widget .header a:hover {
    text-decoration: underline;
}

.widget .header span {
    border: 10px solid #000;
    border-bottom: none;
    border-right: none;
    border-top-color: transparent !important;
    _border-top-color: pink !important;
    _filter: chroma(color=pink) !important;
    width: 0;
    height: 0;
    _margin-top: -10px;
}

.widget .content {
    margin-top: 10px;
    border: 1px solid #777;
    border-top: none;
    padding: 10px;
    margin-bottom: 10px;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    #display: block;
    #zoom: 1;
}

p {
    margin: 0.6em 0;
}