September 24, 2005

September Meeting Notes: Inline Boxes

We started our second year of the PACS CSS Workshop in September. The first item was a quick demo of Netscape 8, a browser that was relased this past summer. What is interesting for our purposes is that with a push of a button, the browser will show a page using either the Firefox rendering engine or the Internet Explorer engine. Given the need to check how things look in different browsers, this feature is a real convenience.

I used Netscape 8 to show a problem that I encountered recently with IE. I wanted a page to be a specific width, and I used the width property on the body tag. It worked in Firefox but not in IE. I had to enclose all my content in a div with the specified width, and IE accepted that rule. Just a simple example of how you always have to check!

We quickly reviewed last year's topics and the basic format of a CSS rule. We then continued on the topic of styling boxes by reviewing what we covered in June about block elements and then moving to inline elements.

We used the sample page that is posted here to show that the properties can be styled on inline boxes, but some of the results differ from block elements. We made the point that the line height is not increased by enlarging the top or bottom box styles, and we noted that to prevent overlap, you should change the line-height of the line of an ancestor element, like body.

We then started on fonts by pointing out that CSS does not download fonts, so whatever is on the user's system is what the browser can utilize. As with HTML, it is important to define alternative font faces and to include a generic face. CSS does give users more options in working with fonts. We started demonstrating these options with this sample file, and we will continue on this topic in October.

I encourage you to download the sample files, open them in an editor, and play with the different selectors. I have some notes in there to guide you.