Basic Margin/Padding Question

[johndove]

Please see URL: http://www.freedommd.com/2010HdsIndex2.html

Div #Intro (directly under the “About Us” title) contains only a left padding value. #Intro is contained within div #HdsBodyBkgrnd, with both margin and padding set to “0” (both styles included below).

Why then, is the #Intro div’s placement displayed correctly in browser view (it looks as if it has about an 80px top padding when in fact it has a 0px top padding), but the left padding of 39px is respected? Why isn’t it displayed flush against the top in a browser, as it is in design view (attached .jpg)?

More specifically, what property am I missing here that’s causing this top padding (or margin) issue?

Thank you,

John

#HdsBodyBkgrnd {
height: 559px;
width: 700px;
background-image: url(../images/2010HdsIndex2_04.jpg);
background-repeat: no-repeat;
margin:0;
padding:0;
}

#Intro {
width:520px;
padding:0 0 0 39px;
}

[CFHutton]

Hi,

I think the basic problem is this:

td id="#HdsBodyBkgrnd"


The css for that id has a height applied to it. Remove/adjust it.

I'm not sure, but I think the default placement of content within a table cell is vertically centered, and that's the problem when you size the cell like that. If that's the case, you could probably just add to the css for that id:


#HdsBodyBkgrnd {
height: 559px;
width: 700px;
background-image: url(../images/2010HdsIndex2_04.jpg);
background-repeat: no-repeat;
margin:0;
padding:0;
vertical-align: top; /*ADDED*/
}


and keep your height which you may need in this case to accommodate the bg image you are using on that cell.

[johndove]

CF,

Thanks so much for your reply. I figured it out, and you were partly right. When a style is applied to a <TD> and a <div> is contained within that <td>, the <div> (or divs) DO automatically center vertically, regardless of styling, and the vertical-align:top; property does not fix this. I finally figured out to apply the background art ONLY to the <td>, then make an empty container <div> to fill the entire background space. Once that empty container <div> exists, anything inside it will respect the style attributes.

http://www.freedommd.com/2010HdsIndex3.html

#HdsBodyBkgrnd {
background: url(../images/2010HdsIndex3_03.jpg) left top no-repeat;
width: 700px;
height: 611px;
margin:0;
}

#Container {
width: 700px;
height: 595px;
}

.introtxt {
width:530px;
padding:45px 0 0 32px;
}


<!—HTML -->

<tr>
<td id="HdsBodyBkgrnd">
<div id="Container">
<p class="introtxt">Health Data Services, Inc. is an EMR / Practice Management vendor. We were founded in 1988 with the mission of helping the small healthcare provider. In the two decades since, our focus hasn't changed. We want to help you get every dollar you deserve, and we offer certified and non-certified products to help you. </p>
</div>
</td>
</tr>


Thanks so much for taking the time to help me.

John

[CFHutton]

CF,

Thanks so much for your reply. I figured it out, and you were partly right. When a style is applied to a <TD> and a <div> is contained within that <td>, the <div> (or divs) DO automatically center vertically, regardless of styling, and the vertical-align:top; property does not fix this. I finally figured out to apply the background art ONLY to the <td>, then make an empty container <div> to fill the entire background space. Once that empty container <div> exists, anything inside it will respect the style attributes.

http://www.freedommd.com/2010HdsIndex3.html

#HdsBodyBkgrnd {
background: url(../images/2010HdsIndex3_03.jpg) left top no-repeat;
width: 700px;
height: 611px;
margin:0;
}

#Container {
width: 700px;
height: 595px;
}

.introtxt {
width:530px;
padding:45px 0 0 32px;
}


<!—HTML -->

<tr>
<td id="HdsBodyBkgrnd">
<div id="Container">
<p class="introtxt">Health Data Services, Inc. is an EMR / Practice Management vendor. We were founded in 1988 with the mission of helping the small healthcare provider. In the two decades since, our focus hasn't changed. We want to help you get every dollar you deserve, and we offer certified and non-certified products to help you. </p>
</div>
</td>
</tr>


Thanks so much for taking the time to help me.

John

Hi John,

I'm pretty sure I tested that code with the vertical-align property in ie (6) (don't ask) and the latest firefox, and it seemed to work.

As long as you got it working that's all the matters, though :)