11px margin / padding difference in FF and IE - what am I doing wrong?

[sparkdigital]

Hi guys, I have a small problem with the layout of my new website http://www.sparkdigital.co.uk.

The main content column in the three column layout doesn't want to align vertically with the other two columns - when right in IE it's displayed 11 pixels lower in FF...

Any ideas what I might be doing wrong?

Thanks v much,

Konrad

[wyrd33]

I'd suggest changing the structure of your HTML. Put #box3 after #box2, and float #box2 to the left. Remove the margins from #box2 (obviously).

#box2 {
  background-color:#A0B1B3;
  background-image:url(img/bg2.jpg);
  height:560px;
  width:280px;
  float: left;
}

Note: It's bad practice to constrain the height of your design.

[Paul O'B]

Hi,

The 11px difference is the top margin on the h1 that collapses onto the parent container and pulls it downwards. You nust control all the margins and apdding on all the elements you use as this caries between browers.

h1 { 
    font-size: medium;
    padding: 30px 20px 0px 20px;
margin:0
}

Also what wyrd33 said above makes sense as it is better to float all columns in a fixed width layout and avoid the 3px jog which is making your columns drop right down in ie6 (see faq on floats for more info).

[sparkdigital]

Great, thanks for your help - I made your suggested changes and it works great.

Just one more thing - my print.css works in ff bot not in ie. Is this normal?

Thanks again,

Konrad

[Paul O'B]

my print.css works in ff bot not in ie. Is this normal?

It depends on what you mean by not working.

IE will read the print stylesheet ok and your page seems to be previewing ok in ie7.

Print stylesheets are a bit hit and miss so keep things simple (e.g. no floats or absolute positioning etc.).

[sparkdigital]

Thanks Paul,

It still seems to print the normal layout including images - or could this be due to caching?

Thanks,

Konrad

[sparkdigital]

Sorry folks, it was simply the caching of the old css file that caused the problem.

Thanks for all your help though,

Konrad