Mysterious Padding

I'm having a padding appearing where there shouldn't -- it only appears in Internet Explorer. Safari depicts the page just as it should.

Here it is. (http://www.ottens.co.uk/gatehouse/index.php)

Explorer gives me a padding between the top border and the text. It doesn't produce a padding above the image, though, but I have margins set for the image.

Here's the relevant coding:

#black p {padding:0 10px;}

#news {width:515; min-height:210px; border:solid 1px #2A2A2A; margin:10px; padding-top:0;}
#news img {float:left; width:145px; margin:12px 10px 10px 10px;}

I tried adding "margin:0" to the #news-box but that doesn't work.

The #news DIVs are the boxes in which the pics and text are in.

Help would be greatly appreciated!

One thing you may want to try is actually changing the margin and padding on your "p" tags. Right now they take up 2 lines, and in IE this causes wierd crap to happen, like text not being flush at the top...

for example:


p {
margin: 0px;
padding: 0px
}


Then just go back and add in a spaceholder where you want your lines to look double spaced. For example:


<p><i>14 February 2008</i> | I<font size="-3">NDIANA</font> J<font size="-3">ONES</font> IV</p>

<p>&nbsp;</p>

<p>The first trailer for the fourth Indiana Jones film, <i>The Kingdom of the Crystal Skull</i>, produced after more than a decade since the last installment in the series...</p>


Hope that helps.
AJ

Um. Really, a no-break space doesn't count as a paragraph.

I'd use
<<p><i>14 February 2008</i> | I<font size="-3">NDIANA</font> J<font size="-3">ONES</font> IV</p>

<div style="height: 1.5em; /* or whatever your line-height is--preferably use a class */"></div>

<p>The first trailer for the fourth Indiana Jones film, <i>The Kingdom of the Crystal Skull</i>, produced after more than a decade since the last installment in the series...</p>

Well then I'd have to edit about a hundred pages manually which is obviously not something I'd be looking forward to ;)

Well, you could also create a class and apply it to the first <p>. For example:


.NoMarginNoPadding{
margin: 0px;
padding: 0px;
}


In your Css, and:


<p class="NoMarginNoPadding"><i>14 February 2008</i> | I<font size="-3">NDIANA</font> J<font size="-3">ONES</font> IV</p>

<p>The first trailer for the fourth Indiana Jones film, <i>The Kingdom of the Crystal Skull</i>, produced after more than a decade since the last installment in the series...</p>


Would that give the result you're looking for?
-AJ

I figured it out -- I think... ;)

Thanks for your help!

No problem, glad you got it.:thumbsup:
AJ