Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div Positioning Issue in Safari

    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

    s519970.brunelweb.net

    The css relevant to the elements that repostiong are:

    #footer2
    #contactWrapper
    #commentarea
    #commentinput

    Any help somone can offer will be greatly appreciated!

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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 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.

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •