Divs positioning images differently in IE and Firefox

Discussion in 'CSS' started by jj1, Mar 2, 2011.

  1. #1
    I'm just finishing a website where I want two columns of coloured boxes to align underneath each other:

    1st left box 184px height ------------1st right box 184px height
    |
    10 px space ------------------------10 px space
    |
    2nd left box ------------------------2nd right box

    I've used CSS and Divs (rather than tables) but cannot understand why it aligns properly in IE but in Firefox and Chrome the 2nd left hand box appears 10px or so below the 2nd right hand box.

    My site is http://www.specialistangliansecurity.co.uk/ and the relevant code is:

    1st left box:
    1st right hand box:
    2nd left box:
    2nd right box:
    I had these problems BEFORE I added the menu items into the first left box so that cannot be the reason. Would really appreciate if anyone could give me some pointers as to what's going wrong. I've spent hours checking and rechecking this!!
     
    Last edited: Mar 2, 2011
    jj1, Mar 2, 2011 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    Rule #1: Never, ever trust IE to do anything right.
    Rule #2: If it works in IE, but not the other browsers, your markup is wrong!

    Validate your html and css for those lists of errors.
     
    drhowarddrfine, Mar 2, 2011 IP