View Full Version : Div Positioning Issue in Safari

05-22-2012, 02:33 PM
I've read a posts on a few forums regarding this kind of problem but I haven't been able to find anything relevant enough to help me figure out why my divs are positioniong themselves differently on Safari opposed to FireFox and Chrome.

Four divs are re positioned when viewing in Safari. My footer, a div, a contact form in a div and two seperate divs containing two parts of a contact form.

I havent been in web design for long so haven't got the know how to work around this one. The sites on a server


The css relevant to the elements that repostiong are:


Any help somone can offer will be greatly appreciated!

05-22-2012, 02:41 PM
Your problems are almost certainly coming from the use of position:relative and large negative margins on your elements - different browsers will not necessarily render elements precisely the same size, which makes lining elements up using this method almost impossible. The negative margins are also causing the large empty space at the bottom of your page.

It's much better to avoid the use of these margins and instead use the css float property to position elements side by side. Here's a good example (http://bonrouge.com/2c-hf-fixed.php) of a two column layout which takes this approach.

This might take you a bit of rework now but will make maintaining your website much easier.

05-22-2012, 04:13 PM
I'd thought as much, the massive negative values were a little off putting when I was adjusting everything first time around.

Not to worry, thanks for the advice and the very useful link!