Forum Moderators: open
I seem to be having a problem with a new site I am working on.
I have a background image in the <body> tag which spans the width of the page, whatever the screen size. The image is designed to line up exactly with the navigation inside a <div> tag.
In IE, everything looks right, but in Opera and Firefox the div seems to be sitting 20px or so lower. I am assuming that margins have been added automatically in these browsers.
Is there any way around this. Maybe using conditional statements in the CSS to use a different background image depending on the browser detected.
Any help would be greatly appreciated.
Best Regards.
Chris.
body
{
margin: 0;
padding: 0;
background: ... <-- Your image here
}
I solved the problem, it was not a border or a margin problem. It was something else that I have not seen before. In the very first div I had to smaller floating divs, one to the left and one to the right. The left div was sitting at the top of the page but the right one seemed to be getting pushed down by the first one, I decreased the width by 10px and now it looks right in every browser.
I imagine that it was adding extra padding somewhere and the width of the two floated divs was too much for the container div.
Thanks guys.
Regards, Chris.
