Hi! I've been doing CSS for a while, but it's my first post on the forum.

 

I'm now working on a new site after a long hiatus from designing. I have three-four consecutive divs, and use background images that when divs are aligned together look pixel-perfect. In all browsers except Safari on Mac, that is.

 

At first I thought Safari had found a way to implode the time-space continuum: my #minimenu looks as if it is 2 pixels bigger than its actual background image size! Here's the scoop.

 

- wrapper: 762px

- header: 750px, plus border.

- menu: 750px, plus border.

Both divs close here. This should put my #minimenu (752px, no border) within the wrapper, not within header or menu - so, it should not matter that it is 2 px bigger than preceding divs: I know this has caused some bg-img issues in Safari.

 

And yet! 2px expanded on both sides. I pushed it 1px to the left by slapping a position:relative on it. Yep, it made #minimenu align in Safari - but only on the left side. Apparently, Safari renders #minimenu as 1px left beyond the header & menu, and the #inwrap (wrapper for content) 1px to the right beyond the header & menu widths.

 

I'm at a loss. I've never really designed for Mac-browser compatibility before, since European customers using Mac are such a small share of visitors. A quick google for known Safari bugs only advised me to use "0 0" or % rather than "top right" when positioning; it didn't solve the problem.

 

Here's a screenshot (Safari 3), and the relevant code. (I have display:table-itis, I've found it to take care of a lot of padding issues in Firefox). Any, and I mean any, help will be greatly appreciated! I know I can re-think my approach completely, and somehow make it work, but it just feels so frustrating to have it be such a clockwork in every other browser only to get show down by Safari.

 

http://img91.imageshack.us/img91/6666/safariuffhk2.jpg

 

 

#wrap
{
margin:0 auto;
background:#fff;
padding:0;
width:762px;
border:1px solid black;
display:table;
}

#header
{
padding:0;
width:750px;
height:250px;
margin: 0 auto;
margin-top:5px;
background:url(img/header3.jpg) 50% 50%;
border:1px solid #333;
display:table;
}

#menu
{
width:750px;
height:90px;
padding:0;
margin: 0 auto;
border:1px solid #000;
border-top:0;
border-bottom:0;
background:#f8a500 url(img/menu.jpg) bottom center 
no-repeat;
display:table;
}

#minimen
{
width:752px;
height:63px;
padding:0;
margin:0 auto;
margin-bottom:-1px;
background:url(img/mini2.jpg) 0 0 no-repeat;
display:table;
}

#inwrap
{
width:752px;
background:url(img/shadow2.jpg) 0 0 repeat-y;
padding-top:20px;
padding-bottom:20px;
margin-bottom:25px;
margin:0 auto;
display:table;
}

Update: I solved it by setting all four divs to the same size, and skipping borders altogether by slapping them on in photoshop and changing the image size accordingly.

 

Yet still! It's a headscratcher. Why does the way Safari deal with borders and size differ so much? And how come only the #minimenu was affected - I didn't change a thing in the content wrap? One more reason to just say no to Macs.

Try using the universal reset at the top of your stylesheet to get rid of browser default padding and margins:

* {
padding:0;
margin:0;
}

I remove or set my own margin and padding on every element - but targeting the entire html is so much more elegant a solution. I'll try it out for curiosity's sake right away.

Nope - offending pixel rupture still there.