Grow your CSS skills. Land your dream job.

[Solved] Safari margin issue

  • # July 17, 2009 at 11:20 am

    Hello again! I’ve mainly got my layout working (even in IE!) but now I’m having an unexpected issue with Safari, which is odd because in past experience css that worked for Firefox also worked for Safari. The issue is that my content area should have a 40 px margin at the top so that it can clear the header. However Safari seems to skip right over that, although my margins are working for the left and right???

    here is the page:

    http://www.lisa-noble.com/test/redo.html

    And the css:
    http://www.lisa-noble.com/test/redo.css

    I’m not using a negative value position or a float so it can’t be that. Anyone else run into this before? Thanks!

    # July 17, 2009 at 11:20 am

    I believe it is this bit of code that’s causing trouble:

    Code:
    div#content {
    margin: 40px 164px 0px 180px;
    position: relative;
    z-index: 1;
    }
    # July 18, 2009 at 10:01 pm

    I think I need to post this better, allow me to clarify.

    Background info:
    – I have validated the page and CSS, no problems there
    – Site is working properly in Firefox and IE, seems to be a margin issue in Safari
    -This margin issue is not the common Safari bug with a negative margin being applied to a floated element
    -I am using Safari in a windows environment, I do not have a Mac

    The problem:
    -in Safari the top margin on the content either is either not being applied at all or is being interpreted differently
    -it may be of note that I was having the same issue with IE, but was able to specify an IE specific style sheet for it, I don’t believe this is possible in Safari?

    The HTML

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Etc, etc, etc….

    The CSS:

    Code:
    * {
    margin: 0;
    padding: 0;
    }

    body {
    background: #fdd9e9;
    }

    div#top_filler {
    background: url(images/bg_slice_sm.png) repeat-x;
    width: 100%;
    height: 164px;
    position: fixed;
    top: 0px;
    z-index: 5;
    }

    div#left_filler {
    background: url(images/left_slice_sm.png) repeat-y;
    width: 174px;
    height: 100%;
    position:fixed;
    left:0px;
    z-index: 5;

    }

    div#right_filler {
    background: url(images/right_slice_sm.png) repeat-y;
    width: 161px;
    height: 100%;
    position:fixed;
    right: 0px;
    z-index:5;
    }

    div#bottom_filler {
    background: url(images/bottom_slice_sm.png) repeat-x;
    width: 100%;
    height: 76px;
    position: fixed;
    bottom: 0px;
    z-index: 5;
    }

    div#header {
    position: fixed;
    top: 0px;
    left: 37%;
    height: 125px;
    width: 316px;
    margin: 0 auto;
    background: url(pink_logo2.png) no-repeat;
    z-index: 25;
    }

    ul.NoBulletNoIndent {
    list-style-type: none;
    margin-left: 0px;
    padding-left: 0px
    }

    div#top_left {
    height: 314px;
    width: 221px;
    background: url(images/left_top_corner_sm.png) no-repeat;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 5;
    }

    div#bottom_left {
    height: 175px;
    width: 176px;
    background: url(images/left_bottom_corner_sm.png) bottom no-repeat;
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 5;

    }

    div#top_right{
    height:174px;
    width:174px;
    background: url(images/right_top_corner_sm.png) top no-repeat;
    position: fixed;
    top:0px;
    right: 0px;
    z-index:5
    }

    div#bottom_right{
    height: 602px;
    width:198px;
    background: url(images/right_bottom_corner2_sm.png) bottom no-repeat;
    position: fixed;
    bottom: 0px;
    right: 0px;
    z-index: 5
    }

    div#content {
    margin: 40px 164px 0px 180px;
    position: relative;
    z-index: 1;
    }

    # July 19, 2009 at 12:58 am

    Okay never mind, something incredibly odd but also wonderful happened. I started working on turning it into a template for Joomla and was testing it for Firefox since it was working there. I pulled it up in Safari just to make sure that the module placement was working and lo and behold the issues I posted about were gone! It works seamlessly now, and even IE works for the most part and just needs one minor adjustment which will be easy to do.

    I honestly changed nothing outside of adding the Joomla specific code. No idea, but I’m happy! :lol:

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".