...

View Full Version : Mysterious Padding



Ottens
02-20-2008, 07:20 PM
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!

ajhauser
02-20-2008, 07:29 PM
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

Apostropartheid
02-20-2008, 07:39 PM
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>

Ottens
02-20-2008, 08:18 PM
Well then I'd have to edit about a hundred pages manually which is obviously not something I'd be looking forward to ;)

ajhauser
02-21-2008, 07:12 PM
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

Ottens
02-21-2008, 10:29 PM
I figured it out -- I think... ;)

Thanks for your help!

ajhauser
02-22-2008, 12:53 AM
No problem, glad you got it.:thumbsup:
AJ



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum