CSS - Margin issue in Safari - Not the negative margin on a floated element bug

oracle · July 2009

Hey! I know a few people around these parts are good with the making of internets so I thought I'd throw out this weird issue I'm having with a site that I'm working and see if anybody knows what the trouble is.

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?

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

The HTML

<!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>

The CSS

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

My suspicion is that the trouble is with the content area, but not sure. Thanks!

Seguer · July 2009

Just checked it in Google Chrome (both use the Webkit engine) and it seems fine? Maybe a screenshot from Safari?

Also your bottom left image seems to have an issue (single pixel line that's distorted somehow)

Kris · July 2009

In Firefox 3.5.1 on Mac OS X, there is a problem in the bottom-right corner of the text field. Looks like there is a stray div blocking the text or something.

Screenshot:

Penny Arcade

Quick Links

CSS - Margin issue in Safari - Not the negative margin on a floated element bug

Posts