The new code I’m writing these days is probably 90% semantic HTML with CSS for stylings. However I still have a lot of cruft in the HTML of applications I’ve built over the years (tasks and photos) that I’m removing as I go. I need to do that on this site too.
Today I changed the menu on the side of tasks from a bunch of stacked tables to a nice unordered list. Much to my amazement, I was able to make it look identical to the previous table version in Mozilla, Safari 1.0, IE 6 Win and IE 5.2 Mac! I’m not going to push my luck by testing it in Opera (Sorry, Opera users. I have nothing personal against either of you).
I’d post screenshots but it, um, looks the same. These are not the droids you’re looking for, move along…
Oh, I’m looking at using unordered lists for the toolbars too, floating the <li> elements left. This will work fine, but I’m not sure how I’ll push the ‘post to blog’ button off to the right in a cross-browser compatible manner without using a table. I know several techniques to try, but none of them seem to work very reliably. Post links to relevant hack-free tutorials in the comments.
Hi,
I’m doing the same in a lot of intranet-type apps, and it’s been going great.
One caveat: I still need tables for tabular data, and in one ocasion I tried to put tables side by side with CSS, using display: inline.
Well, safari did work, as did IE 6 win et al, but mozilla died an horrible death! It’s a known and reported bug, so be carefull if you need that.
Thanks, I will consider myself warned. It always seems that one of the EOBM‘s is ‘dying a horrible death’ in their CSS support. 🙂
Beautiful. Welcome to the light side. 😉
About damn time 😉
You guys make it sound like I just now heard of semantic HTML. I’ve been using it for a while on new projects, I just haven’t had time to rework the HTML I’d already written over the years.