fmz 14

I am finishing a site conversion for a client and am having a bit of trouble with the container div positioning. It lines up correctly across the header in Firefox, but is off in Safari by a couple of pixels.

The HTML is too long to post here, but the css for the container is here:

#container              { width: 970px; margin: 0 auto; }
body#home #container    { background: #a9a9a9 url(../_images/bg_home.jpg) no-repeat center top; }
body#inside #container  { background: url(../_images/bg_inside.jpg) no-repeat center top; }                     
#header                 { width: 970px; height: 100px;  }
html, body, #container  { height: 100%; }
body > #container       { height: auto;  }

I would appreciate some help sorting this out. thanks.

  • Do you have an example link that we can look at? PriorityMark over 8 years ago
  • Mark, the link is above click on "site". fmz over 8 years ago

2 answers

danwellman 5600

Why is x different in one browser than in another? Because they're different browsers and they implement things in different ways. Each browser has its own default style sheet which applies different rules to different elements.

Instead of using a JPG for the bg_inside image, why not get rid of the header parts of the the image (the dark blue and the light blue and white lines) and just have the swirly bits? You could use a transparent PNG and then it wouldn't look mis-aligned in Safari...

Answered over 8 years ago by danwellman
  • Unfortunately, I am not the designer and the designer provided the graphics. fmz over 8 years ago
  • ah, so you didn't slice them from PSDs yourself? Too bad. Can't you ask the designer for a transparent PNG with no one of the blue in it instead? danwellman over 8 years ago

I don't understand why're you've got two backgrounds that are intended to render the same thing? Try removing:

body#inside #container { background: url(../_images/bg_inside.jpg) no-repeat center top; }

And then just correct the paddings for your links and see if that helps

Answered over 8 years ago by PriorityMark
  • They are different images. The one is a small repeating image that extends with the browser and the container image is the main one, which adds all the styling. fmz over 8 years ago