Hi folks,
I'm a bit stumped on this one. I am referring to this page - http://savitarbernese.com/welcome.aspx. At the moment it looks okay on IE7 but I can't seem to get it to work on other browsers. As it stands now I had to wrap a couple of DIVs within tables to make the background extend behind the full content. I'm guessing this has something to do with the div overflow? I'm not sure...
What's the best practice for cross-browser compatibility when using DIVs?
Cheers, D.
What's the best practice for cross-browser compatibility when using DIVs?
Allways code for firefox first, then for IE.
You are starting in the wrong end. If you build it for IE7, it will rarely look the same in any other browser, and not in IE8 either.
First make sure that it looks right in a standards compliant browser, for example Firefox, then it will almost always look the same in all other standard compliant browsers, which is just about everything except IE7 and earlier. IE8 still has some rendering problems, but it's a lot closer to being compliant than IE7. You will have to make some tweaks to the page to make it look the same in IE7 also, but that is a lot less than trying to make it work the other way around.
And first of all you should make sure that you have a proper doctype on your page so that it doesn't render in quirks mode. That helps a lot when you want it to render the same across browsers.
What's the best practice for cross-browser compatibility ...?
Start by making sure your HTML validates.
Thanks - that's a fair comment. My dev machine is down and I only had access to IE7 at the time. Normally I would definitely start off with Firefox 3.5 and go from there.
That aside, it's a small problem that is hampering me at the moment. In FF3.5, Safari, and IE8 the background of the content panel does not extend down the full height of the content like it does in IE7. I have changed the doctype to use XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Is there something obvious I have missed here?
Thanks again.
Add
overflow: hidden;
to #container and to #content in your css and presto!
This directive tells the browser to extend the height of the parent divs to the inside divs, even when they are floating.