The thing is that designing in IE and trying to make things work in FF or other browsers is tricky at best. You should design in FF or Opera and then fix it for IE5, IE6 and IE7 with conditional comments and not hacks. The problem is that you get used to making things work with an browser that still has its own quirks and while Firefox is not perfect, more browsers have similar models for CSS implementation. What you are running into is how FF and IE treat absolutely positioned elements. If you remove the position:absolute from the #footer and check it in FF it looks more correct.
Again, I would suggest using FF or Opera to design and then make adjustments for IE. This allows for the fewest hacks and least stress when attempting cross-browser similarity (they will likely never look pixel perfect unless you go back to tables with spacer gifs and the like).
Something else I have begun doing that helps control some of the unknowns by resetting html browser properties. I use a set of CSS rules that render most property values to 0, none or inherit where the browser might otherwise render its own margin or sizing. This way when you start your CSS editing all the browsers should be using the same base values. The one I am using is
Eric Meyer’s CSS Reset Rloaded.
Here is his code:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
@ganeshXL
<!-- Will only be read by IE versions less then IE 7-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
Should be:
<!-- Will only be read by IE versions less than or equal to IE 7-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
OR for IE7 only
<!-- Will only be read by IE 7-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
I also always need to have a conditional comment/separate stylesheet for IE6 and occasionally IE5.
This practice also eliminates hacks as it is completely valid HTML and CSS. No tricks,
MODX Staff
MODX Staff
With the infamous IE7 though I need to create an [tt]ie7hax.css[/tt] file to fix it 