SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Negative Margin issue in either Safari or Firefox

    Hey guys,

    Here's the issue:

    If you look at the site here, you'll see that in Safari 4, there's a big gap between the pricing table and the navigation. In Firefox there's just a tiny gap. I'm using a negative margin on the Nav to pull it out of the content box by -54px, which is applied directly to the <ul id="nav"> containing it.

    It seems that these browsers interpret this differently. Do you know which one is doing this correctly? And how to fix the other one?

    Here's the Nav css:
    Code CSS:
    #nav {
    	float: right;
    	margin: 40px -54px 0 0;
    	padding: 0;
    }
    #nav li {
    	margin: 0;
    	padding: 0;
    }
    #nav a {
    	display: block;
    	padding: 0;
    	margin: 0;
    	width: 182px;
    	height: 52px;
    	background: url('../images/nav.png') top left no-repeat;
    	text-indent: -999em;
    }

    Here's the table css:
    Code CSS:
    .col1 {
    	width: 35%;
    }
    .col2 {
    	width: 65%;
    }
    caption {
    	padding: 1em 0;
    	font-size: 1.2em;
    }
    th {
    	font-weight: bold;
    }
    th, td {
    	font-size: .8em;
    	vertical-align: top;
    	padding: 4px;
    }
    table#pricing {
    	margin-right: 10px;
    }

    I'm also using a reset similar to Eric Meyer's that's first in the imported files.
    body {
    display: public-affection;
    }

  2. #2
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's some screen captures in case you don't have access to one or the other.

    In Safari


    In Firefox
    body {
    display: public-affection;
    }

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Your page renders different for me in FF3,Safari 3, and Opera 10.

    You have that #pricing ID on your table and if you target that ID and reset your margins/paddings the browsers will all render the same then.
    Code:
    #pricing {margin:0;padding:0}
    #pricing a {
        background-position: -2px -104px;    
    }

  4. #4
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Rayzur, I'll try it. Nice to see you again by the way!
    body {
    display: public-affection;
    }

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Thanks!
    It looks like margin:0; is all that is really needed here.
    From the looks of FF it does not apply any default margins to the table as the others do.
    None of them apply a default padding.

    #pricing {margin:0;}

  6. #6
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did it. So the margins and padding were rendering inconsistently then.
    body {
    display: public-affection;
    }

  7. #7
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops...I also discovered that I had two ids on the same page called #pricing. I've changed the table ID to #price_table, but it's the margins that did the trick!

    Thanks!
    body {
    display: public-affection;
    }


Bookmarks

Posting Permissions

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