#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2009
    Posts
    15
    Rep Power
    0

    Safari margin issue - not the float with negative margin bug


    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 website:
    http://www.lisa-noble.com/test/redo.html

    The HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html>
    <head>
      <title>Site Test</title>
      <link rel="stylesheet" type="text/css" href="redo.css" />
       <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="iespecific.css" />
    <![endif]-->
    </head>
    
    <body>
    
    <div id="top_filler">
    </div>
    
      <div id="left_filler">
    </div>
    
    <div id="right_filler">
    </div>
    
    <div id="top_left">
    </div>
    
    <div id="header">
    </div>
    
    <div id="top_right">
    </div>
    
    <div id="content">
    <p>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.</p>   
    
    <p>Etc, etc, etc....</p>
    </div>
    
    <div id="bottom_filler">
    </div>
    
    <div id="bottom_left">
    </div>
    
    <div id="bottom_right">
    </div>
    
    </body>
    </html>
    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;
    }
  2. #2
  3. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Hm..try adding this code. Untested btw..

    Code:
    *{margin:0;padding:0;}
    html, body{height:100%;}
    Cheers
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR

IMN logo majestic logo threadwatch logo seochat tools logo