1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Firefox + IE5/6/7 Woes

Discussion in 'HTML, Graphics & Programming' started by elkdanger, 3 Aug 2006.

  1. elkdanger

    Wise Guy

    Joined: 11 Mar 2003

    Posts: 1,328

    Location: North Shields

    I think I might be missing something here. I'm trying to create a liquid layout as described in this months .Net magazine, which mainly uses .em sizes for accessibility as opposed to a pixel-perfect layout.

    The main issue I have is that when adding borders, padding and margins the resulting sizes of div sections are different between IE6/7 and Firefox. IE still seems to include the borders, margins and any padding inside the specified width of the box, whereas Firefox (correctly, AFAIK) takes the specified width + margins + padding + borders to calculate the final width of the area.

    I thought that this "bug" was only supposed to affect IE5/.5 and early Opera browsers, but was rectified for IE6 and 7. As far as I have experienced, this is not the case. Where am I going wrong?

    Edit: Also, I've tried using the box model hack which was designed for IE5/.5 but this hasn't solved the problem.
     
  2. Sic

    Capodecina

    Joined: 9 Nov 2004

    Posts: 15,365

    Location: SO16

    Code:
    * {
    padding: 0;
    margin: 0;
    }
    tried that? IE and FF have different defaults padding/margin settings - that usually irons out most of the little niggles (that's right...niggles) that i get
     
  3. SpicyDuck

    Soldato

    Joined: 10 Dec 2003

    Posts: 6,349

    I was about to recommend the same thing.

    That's the first piece of CSS I write when starting to build a new website. :)
     
  4. elkdanger

    Wise Guy

    Joined: 11 Mar 2003

    Posts: 1,328

    Location: North Shields

    Ah - I had, but I used that on the body element and not *. I've changed it now.

    But the problem is I want elements to have padding, but the div's do not keep a uniform size between IE6/7 and Firefox and I was wondering why not. If the box hack doesn't work for these versions, what can I do?
     
  5. Augmented

    Soldato

    Joined: 18 Oct 2002

    Posts: 5,464

    Location: London Town

    The box model problem is only fixed in IE6 when rendering in standards mode. The mode is switched depending on the doctype you use: http://hsivonen.iki.fi/doctype/. A Strict doctype will usually ensure you get IE6 in standards-mode.

    The universal reset posted above is a very good recommendation for avoiding many cross-browser issues.
     
  6. Sic

    Capodecina

    Joined: 9 Nov 2004

    Posts: 15,365

    Location: SO16

    all that does is sets your default padding/margin to zero...you can still set padding.

    you're going to have to be more specific when referring to size - are you talking about height, width, padding, margin?
     
  7. elkdanger

    Wise Guy

    Joined: 11 Mar 2003

    Posts: 1,328

    Location: North Shields

    That's exactly what I was looking for - I'm using the correct DocType now (I didn't have one specified at all) and all is well. Good man! :p

    Yes I realised that about the padding and margin - I had just specified it in the wrong element :p

    When talking about the size I was referring to the total width of an element and how it was calculated, as talked about here. Mine wasn't working as expected, but has been sorted now by specifying the DocType - I didn't realise the doctype had such an effect, as I thought it was purely for validation purposes.

    Thanks guys - I've just learned something pretty vital to cross-browser CSS layout development!