fter looking at this site this morning, I wanted to do something with the menu at the top of the page. I gave each menu item its own style and in the process, I better understood making horizontal menus with “ul” and “li” classifications. Apparently, I needed to use a lot of “float” and “list-style” properties. As a result, however, the code comes out surprisingly cleaner than it did, and will be easier to update if I need to. I also placed the Close [X] button from above into the menu on the righthand side, and I added subtle gradients to give the menu a toned down three-dimensional effect. I didn’t want to go crazy with the effect because I want the audience to be able to read the links they would click on. We don’t want what WebPagesThatSuck.com calls “mystery meat navigation”. At first, I had trouble having the menu items line up properly in IE 6 until I added the following code to the unorganized list as a whole:

ul {display: inline;}

Now the menu looks the way I want it to look. I also set the minimum width of the site to be 600 pixels, which I think should work in any monitor window without distorting the site’s appearance. I’m moving on to dropdown menus which will include some JavaScript.

inding help to fix the background issues IE 6 presents took some searching online. I came across some code hacks involving stars (*) and underscores (_) that many bloggers claim will work in most browsers. I also read that hacks have their downsides, including consistently checking up on the CSS when a browser upgrade is launched, remembering to make notes that separate the hack code from the rest of the clean code, and that they don’t follow W3C Standards of Web design so there are bound to be errors in the code. Then I discovered that my background problem (with the note section near the top of the page, in particular) wasn’t a background issue but a border issue. I found a section on the W3.org site about box models, and what it does is place multiple boxes inside a larger box to give it a border-like appearance. No code for borders themselves whatsoever. Of course, there needs to be codes that involve margins and padding to achieve the effect, and they can be done in this easy sequence:

padding: 2px 2px 2px 2px;

You’re probably thinking, “What’s so easy about this? A buncha ‘2px’ in a row doesn’t tell me anything.” And you know what, you’re right. The padding effect sequence you see works in this order: top ↑, right →, bottom ↓, left ←. This sequence works with margins, too, and not just with pixels but with EMs and other computer-based measurements, as well.

t’s late August 2009. Internet Explorer 8 (IE 8) has been out for several months now and people are gradually making the switch from IE 7 to IE 8. According to W3Counter’s global browser poll statistics for July 2009 (click here to read it), IE 7 wins first place with 24.74% of Web viewers using that browser, the silver medal goes to Firefox 3.0 with 23.03% of Web viewers, and IE 6 takes the bronze with 15.21%, with IE 8 not too far behind with 12.98%.

So far, I have tested this site in Safari, Firefox, and Opera on my Mac OS X; Firefox and IE 8 on Windows Vista; and Firefox and IE 6 on Windows XP. The browsers on Mac OS X and Vista didn’t show any consequences and neither did Firefox on Windows XP. The site didn’t turn out too badly in IE 6, either, with the text size set to medium. I had to go back and fix some background issues by typing the following with them:

position: relative;

his is my first time designing a Web Site using Cascading Style Sheets (CSS) without the placement help of tables. It’s a little confusing at first, especially when setting up the navigation menu. So far, this site looks pretty good in Safari and Firefox. My biggest concern is how it will look in Internet Explorer because that browser always seems to screw up CSS that looks good in other browsers.

Now I’m trying a second paragraph with a comment set up on the left side. I’m hoping it will be successful and look neat. Doing something like this will help me with future Web design projects, including the redesign of my Web site. The tricky part so far has been distinguishing margins from padding in the CSS. Margins seem to keep things tucked in within the boundaries the designer sets up, while padding pushes out around any content it is assigned to. But like anything else in design, Web design requires a lot of guess-and-check work and trial-and-error experiments with the results.

From what I can tell, the site looks noticeably different in Safari from Firefox on a Mac but the CSS doesn’t suffer any. I’m discovering that designing with percentages (%) and EMs makes the site very flexible, which is good for monitors of different sizes and for window scaling. These units of measurement are definitely something to consider for future work.

Along with CSS for the screen, I’m also writing CSS for print so that this site will have a certain, familiar look on paper. Background colors and images will not print out simply because the browser recognizes them as backgrounds. I also changed a lot of the color content to black and grey for easier printing and not a lot of wasted color ink. I also told the browser through the CSS code to not print the navigation menus. What good does a Web link do on paper?

It’s hard to believe I’ve used only one image that’s only a few kilobytes in size. The whole thing turned out well, and I am looking forward to expanding on what I have learned. I will gradually add more to this site to see how far I can go with it, but for now I’m glad I got this far.