CSS (FF v IE) Layout problems…

here’s your problems –

http://www.hradil.us/sandbox/0709.html

that’s not the half of it, I have things like opera and most of the mac stuff turned off in my style checker, as well as the CSS1 definitions. With all of that enabled, it would probably double the amount of errors/warnings.

Keep in mind, the style check used there is the same as the w3c validator plus has the additional capability of breaking things down by CSS1/CSS2, “safe”, and by browser/version/os, etc. So many of the warnings don’t really mean much. The errors are the key and are more likely to be the reasons for differences in how a browser will render a particular document. So that’s where I’d start.

As I develop themes for things like WP or xoops, etc. I validate them as I go, and check them with a couple of browsers so I’m sure things look as I intend them to in all/most browsers.

As long as you stick to the standards, your pages/css should always display almost identically in each major browser anyway.

In your particular case, the site looks quite nice in FireFox/Netscape, but does have some problems at the moment in IE. Keep in mind that with css, there are always more than one way to accomplish the same thing, so you just need to find the method which will be accepted by at least the two big browsers to achieve the effect you’re looking for.

My personal preferance is always to use “longhand” css, instead of single line declarations, nesting multiple elements, using child elements at all, etc. It’s a bit more work, and produces a larger css document, but is worth the effort in the long run because it’s easier to make additions/changes, and you need to waste almost no time at all chasing cross browser compatibility issues.

Part of the point of my last post was to illustrate something reasonably important for everyone to be aware of, even though, the css/xhtml generated by something like the default themes of wordpress/xoops, etc, there is MUCH worse out there. As I mentioned, I’ve had a number of friends ask me to help them clean up the errors/user problems they’re all having with some pretty busy sites, and I’ve taken the postition, that until they migrate to a platform (wordpress,xoops,etc) that is at least capable of generating clean code, I’m not going to waste any time chasing down TypePad/Moveable Type code problems, the issue is pretty much the same, only much more complicated over there.

Part of the beauty of wordpress, is that with very few simple edits to something like the default (kubrick based) theme, you can at least start to develop your own theme from a platform which generates valid code.

In terms of a “tip”, what I’ve done is cleaned out copies of the kubrick based “default” and the wordpress classic themes, I use those clean copies as a starting point for developing new themes, rather than starting the whole process from scratch (which really isn’t that difficult, but since some of the “generic” standard portions of the original themes are just fine anyway, there’s no sense re-inventing the wheel). I have on a couple of occaisions had to start from scratch because the folks I was working with were using designs/layouts for thier sites that were just easier to build form scratch.

Another suggestion, I also belong to the community at http://www.oswd.org (open source web design), I have a couple friends/favorite theme authors there whom I’ve worked with in porting various themes found there over to wordpress/xoops. This also isn’t that difficult a process and depending on the functionality and layout needed for your site, might be a better option than starting from scratch.