Strange border issues

HTML & CSS
1

Just working on an email template and have encountered a problem with borders.

Here is the section of the template that’s affected:

Firstly directly below the short fat white border (with no gaps) I want a 1px white border running all the way to the right-hand edge of the page.

As you can see for some reason there is a problem with this.

Here is the CSS:

.didyouknow {
	background-color: #4896de;	
	margin: 10px;	
	padding: 10px;
	color: #ffffff;
}

.didyouknow h2 {
	color: #ffffff;
	margin: 0;
	padding: 0;
	font-size:	22px;
	padding-bottom: 5px;
	border-bottom: 6px solid #ffffff;
	width: 175px;
}

.didyouknow hr {
	margin: 0;
	padding: 0;
	border-top: 1px solid #ffffff;
	margin-bottom: 5px;
}

Here is the HTML

<div class="didyouknow">
<h2>Did you know?</h2><hr> Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

</div>

I want the same think to happen with the two blue borders at the bottom. The fat one for some reason appears sunken, and the thin blue one is experiencing the same issue as the thin white one mentioned earlier.

Again here is the CSS

td .decoration hr {
		padding: 0;
		margin: 0;
		border-bottom: 6px solid #4896de;
		margin-left: 10px;
		width: 175px;
}

td .decoration {
		padding: 0;
		margin: 0;
		}


td .footer hr{
		padding: 0;
		margin: 0;
		border-top: 1px solid #4896de;
		margin-left: 10px;

}

And the HTML

 <tr>
    	<td class="decoration">
    		<hr>
    	</td>
    </tr>

    <tr>
    	<td class="footer">
        	<hr>
    		<p><span class="contact">Contact Telephone Numbers:</span> #<br>
            <span class="contact">email:</span> #            </p>
    	</td>
    </tr>

Can anyone help with this?

2

Did you notice that you set a width on your h2? IF you remove that the 6px bottom border will go all the way across. Try removing that horizontal line tag, and changing the border-bottom on the h2 to 1px with no width.

3

Hi,

Thanks but that’s not what I want.

I want the 6px border. I want it to be 10px from the left of the container, and I only want it about 175px long.

Directly underneath it, so that it looks like it’s coming out of the 6px border, I want a 1px border starting 10px from the left side of the container, going all the way to the right wall of the container.

EDIT:

Oh I think I get you. You mean there’s no need to add a border to the HR tag, I can just set the tag itself to be 6px, and add a background color?

4

Okey cool there are a lot of different techniques to accomplish the style your looking to get. But first draw up a sketch in gimp and post it here, that way someone can help!!
1)Faux border that is background-image.
2)Border-bottom and border-top on the element below it.