I don’t see any major differences between IE7 and Firefox 3 beta 5 when viewing your example. Can you be more specific as to what you’re seeing (post images if you can)? In both of those browsers your design looks fine to me.
The only thing I noticed in Firefox 2 was the searchbox and search icon have broken onto two lines which doesn’t happen in IE7.
Sorry, I didn’t specify which browsers I was using.
IE6 is my head ache. When you enter some pages, like the one I posted, it appears to be blank, unless you scroll down, then you can see that there is some content.
FF looks as it is supposed to, more or less. I noticed the search bar too, but wasn’t too concerned about it.
Thanks for such a speedy reply.
Ie6 and before don’t manage the width of elements as other (standards compliants) browsers, search for the "box model hack" and you will find a soluce with all corrects explanations. Note that ie7 has the correct behavior for width.
Hi
Without going to deep into the code .. to make IE act as standardscompliant as possible you should use a ’strict’ doctype. xhtml 1.0 strict is ok.
On a floating container like your sidebar with a fixed width, I recommend avoiding additional paddings and margins. This values are added to width and height and render more or less precisely.
Sometimes, giving 2 or 3px more air (margin) on the neighbour side of the floating element helps.
But it’s better avoiding CSS Voodoo and hacks: Use a fixed-width outer-container without margin/padding for your sidebar, and insert a container without sizes, but with margin/padding, as you need. Avoid specifying widths to the elements inside this margin-padding-no-size-container, if they should fit tightly into it. A block level element takes the whole available width anyway.
Hope this strategy helps
:)
remove all default formatting
*{margin:0;border:0;padding:0}
xpix’s suggestion extended:
google for "reset.css". You will find some CSS neutralizing the default styling of browsers. You may compare the yahoo-sheet and Eric Meyers one and then customize what you find to your needs.
:)
