Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Safari margin issue

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #25495
    lisan28
    Member

    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!

    #60893
    lisan28
    Member

    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;
    }
    #60965
    lisan28
    Member

    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:



    Site Test

    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;
    }

    #60968
    lisan28
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.