SitePoint Sponsor

User Tag List

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

    Safari, Firefox difference handling negative margins?

    I have a vertical navigation pulled right, outside of it's container with a negative margin. The text flows appropriately...etc.

    The trouble I'm running into, is with the fieldset on my forms. I have a 69px right margin on the fieldset to accommodate for the right floated nav. In Firefox, this margin seems to be calculated from the right edge of the container (#content) as I expected. Safari appears to be referencing the edge of the nav instead.

    It's easier if you view the site. Here's the page that is most distinct:
    http://narrowcorridor.com/countrybear/contact/

    What's going on here? How can I fix it so that Safari behaves like FF?
    body {
    display: public-affection;
    }

  2. #2
    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,
    It looks like everything will be fine in Safari if you remove the right margin on the fieldset.

    Code:
    fieldset {
        border: 1px dashed #555;
        margin: 0 0 1em 57px;/*remove 69px right*/
        background: url('../images/bgform.jpg') 0 0 repeat;
        padding: 15px;
        padding-top: 0;
    }
    Then the fieldset will naturally flow to the #nav's left margin and be consistent in all browsers.

    You have some errors in your html also. You need to close your form with </form>

    You are also missing the forward slash when closing #content

    <div>
    <!-- #content --> <--- what you have

    </div><!-- #content --> <--- what you need

  3. #3
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the catch...the validators hate me for my php code so I never caught those two tags...I think that did it. Once those were fixed along with removing the margin, everything looks great!

    Thanks as always Rayzur!
    body {
    display: public-affection;
    }

  4. #4
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I made it hard on myself by putting margins on all the block level guts of the site, rather than just building padding into the content area. What do you think?

    This:
    Code css:
    #content {
        width: 722px;
    }
    p, h1, h2...etc {
        margin: 0 20px 0 20px;
    }

    Or this:
    Code css:
    #content {
        width: 682px;
        padding: 0 20px 0 20px;
    }
    ...and then not worry about the rest?
    body {
    display: public-affection;
    }

  5. #5
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I'd use paddings on the content container. Much cleaner and all elements are affected by it, not just the ones you specify in your stylesheet, so option #2 is what I'd use.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  6. #6
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I agree...easier to modify...everything's in one place.
    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
  •