Safari padding bug?

loamguy1

11-24-2008, 12:02 AM

I have a rounded-cornered box that appears correctly in both IE7 and Firefox, but Safari is showing a one-pixel line of padding between the top of the box and content beneath it.

The box is consisted of basically two DIVs, the "top" which is merely a 7px high rounded-corner image, and the "bottom" which is a DIV consisting of the gradient background.

Here's the webpage in question: http://loamband.com/gid.php The problem is in the rounded box on the right side of the page just above "Grief is Dead."

The 1px light-green line separating the top from the bottom is part of the "top" DIV. I added a border for testing to determine this. I have padding of 0px in this div, so I'm not sure where the problem is coming from...

Is this a known issue in Safari? If so, does anyone know the fix? Do I need negative padding?

Here's the HTML for the box:

<div id="trackbox">
<div id="trackbox_top"> </div>
<div id="trackbox_bottom">
<h1>Grief is Dead (2007):</h1>
<table class="tracklist">
<tr>
<td>1</td>
<td><a href="I'm Sold.mp3">I'm Sold</a> (Full version)</td>
</tr>
<tr>
<td>2</td>
<td> <a href="Reverie%20Mine.mp3">Reverie Mine</a></td>
</tr>
<tr>
<td>3</td>
<td> <a href="The%20Snow.mp3">The Snow</a></td>
</tr>
<tr>
<td>4</td>
<td><a href="Down%20My%20Lane.mp3">Down My Lane</a></td>
</tr>
<tr>
<td>5</td>
<td><a href="Loose%20Change.mp3">Loose Change</a></td>
</tr>
<tr>
<td>6</td>
<td><a href="I%20Want%20To%20Say%20Goodbye.mp3">I Want To Say Goodbye</a></td>
</tr>
</table>

</div>

</div>

And the CSS:

#trackbox {
width:270px;
padding:5px;
}

#trackbox_top {
background: url(/images/track_gradient_top1.gif) no-repeat top left;
width: 272px;
padding:0px;
margin:0px;
line-height:7px;
}

#trackbox_bottom {
background: url(/images/track_gradient_bottom1.gif) no-repeat bottom left;
width: 272px;
padding:0px 0px 10px 0px;
margin:0px;
}

drhowarddrfine

11-24-2008, 12:16 AM

I don't know where you got that doctype from, and fixing it may not help your problem, but the correct one is this one:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

loamguy1

11-24-2008, 12:22 AM

Just uploaded and tried that DOCTYPE, but still the same issue in Safari. Thanks though...

abduraooft

11-24-2008, 06:34 AM

Fix the errors in your markup first, see http://validator.w3.org/check?uri=http%3A%2F%2Floamband.com%2Fgid.php&charset=%28detect+automatically%29&doctype=Inline&group=0

btw, why do you need to use a table to show your links?

loamguy1

11-24-2008, 12:16 PM

Ok, markup errors have been fixed. Still the issue though.

Good point on the tables... I was trying to line up the track # and name, but in this case, I could just do in <p>'s instead.

abduraooft

11-24-2008, 12:49 PM

How about #trackbox_top {
....
line-height:7px;
height:7px;
margin:0px;
}

loamguy1

11-24-2008, 02:35 PM

BANG! The height property nailed it in Safari. Looks good in all 3 browsers now. Thanks!!

:thumbsup: