Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Nov 2007
    Posts
    108
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Safari padding bug?

    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:

    Code:
    <div id="trackbox">
                	<div id="trackbox_top">&nbsp;</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><!--trackbox-->
    And the CSS:

    Code:
    #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;
    }

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    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">

  • #3
    Regular Coder
    Join Date
    Nov 2007
    Posts
    108
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Just uploaded and tried that DOCTYPE, but still the same issue in Safari. Thanks though...

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Fix the errors in your markup first, see http://validator.w3.org/check?uri=ht...Inline&group=0

    btw, why do you need to use a table to show your links?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Nov 2007
    Posts
    108
    Thanks
    14
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    How about
    Code:
    #trackbox_top {
    	....
    	line-height:7px;
    	height:7px;
    	margin:0px;
    	}
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    loamguy1 (11-24-2008)

  • #7
    Regular Coder
    Join Date
    Nov 2007
    Posts
    108
    Thanks
    14
    Thanked 0 Times in 0 Posts
    BANG! The height property nailed it in Safari. Looks good in all 3 browsers now. Thanks!!



  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •