better alternative css

[jhatter]

Hi, Here is a screen grab of some html/css I have created. I kinda think there is a better alternative that doesn't use a background image for the horizontal keyline - I just can't work it out myself.

Does anyone have any suggestions please?

5494

<div class="heading-box">
<h1> Contact us</h1>
</div>


.heading-box { background-color: #fefff1; height: 32px; background-image: url(images/heading-bg-1.png); background-repeat: repeat-x; }

.heading-box h1 { font-size: 26px; background-color: #594a43; width:282px; color: #fff; height: 30px; margin: 0px auto; letter-spacing: 4px; padding-bottom: 4px; }

[Beverleyh]

You could use a pseudo element (IE8+);

.heading-box { background:#fefff1; height:32px }
.heading-box:before { content:""; position:absolute; display:block; height:1px; margin-top:16px; background:#594a43; width:100% }
.heading-box h1 { position:relative; z-index:1; font-size:26px; text-align:center; background:#594a43; width:282px; color:#fff; height:30px; margin:0 auto; letter-spacing:4px; padding-bottom:4px }

[Beverleyh]

Or you could put a top border on the .heading-box div and then use half-height margins (one positive, one negative) to offset it;
.heading-box { background:#fefff1; height:32px; margin-top:16px; border-top:1px solid #594a43; }
.heading-box h1 { font-size:26px; text-align:center; background:#594a43; width:282px; color:#fff; height:30px; margin:0 auto; margin-top:-16px; letter-spacing:4px; padding-bottom:4px }
This might be "better" because it doesn't use a pseudo element and supports IE7 (depends on the background colour of the .heading-box div though)

[jhatter]

Many thanks, your second suggestion worked best for me:)