A web designer who regularly subcontracts me to prepare various elements for pages they are working on hired me to do a Son of Suckerfish Drop Down Menu. The requested layout was a bit more complex than even the prettied drop down menu version on the site. My requested task involved the use of a background image, borders around the drop downs, and images that formed dividers between each main menu item to essentially make them look like buttons.

As is usually the case with this designer, they requested that my fix work in Firefox, Internet Explorer 6.x and Internet Explorer 7.x. So I went about drafting the proper xhtml and css to create the desired look and functionality. I tested it in each of these browsers and all went as planned. (more…)

Horizontal centering in CSS is not particularly difficult. Vertical centering on the other hand can be difficult at time in my past experience. Here is a pretty good example of vertical and horizontal centering using only CSS. Note that some special “care” has been exercised to get Windows Internet Explorer to behave properly.

HTML.it has some nice clean css/html page layouts offered over on their site. Not a bad place to start designing a good clean layout.

This site looks to have some very nice tutorials on css (Cascading Style Sheets), including lists and floats. From a quick look it appears easy to follow as well and written in plain English. I’m putting it on my todo list.

Last month I posted a short rant entitled Unusual CSS Reference after noticing that a W3C page called Learning CSS reported CSS and HTML errors when I attempted to validate it. The page’s hover effects also looked better in IE6 than in Firefox and Opera.

This drew comment from W3C representative Bert Bos, who wrote to me. His message reads:

(more…)

I was working away on a new web page tonight, checking that my CSS mark-up was valid. Once I got the good news I became distracted and started following links on the World Wide Web Consortium (W3C) site. I stumbled across a reference guide to Learning CSS.

I was quite surprised by the ugly hover effect assigned to links on the page; gray with a heavy red border. I was then further surprised to discover just how differently this page acts between Firefox / Opera and Internet Explorer 6. The page appears to have been written to look appealing in IE6, and appalling in FF and Opera! I would have expected the W3C to set a good example by presenting its own CSS pages using CSS code that works well in both of these browsers.

But the fun doesn’t stop there! I tried to validate the CSS on this CSS resource only to discover that the W3C’s own validator detected 3 errors and 90 warnings in the code! Furthermore, the HTML on the page suffers from 5 mark-up errors and no Doctype!

Who would have thought that the body responsible for the promotion of compliant CSS and HTML code would set such a poor example???

This is neat! This site offers 40 “template” layouts for a site using valid CSS and HTML. They have been tested in all reasonable versions of Internet Explorer (5.5 to 7), Opera, Firefox and Safari. You can download and use the templates if you wish. Very good work!