What happened to the menu tag?
We all try to write our markup to be as semantic as possible. We use proper heading tags, paragraph tags, strong instead of b, em instead of i, and tables only for tabular data. Yet when it comes to our sites “navigation”, we use an unordered list. Read more…
An issue and a fix
Firefox 2.0.0.8 breaks some of the layouts. It breaks on the 3 column versions that use negative margins that are the same size or bigger that the element it is on. It looks like there have been at least 3 bugs raised in the Mozilla bug tracker for this issue and it is being actively worked on. The main one is here: https://bugzilla.mozilla.org/show_bug.cgi?id=400406
One solution would be to inject dynamic content after the container using the :after pseudo-element
container:after{
content: ".";
height: 0;
clear: both;
visibility: hidden;
display: block;
}
This seems to fix the issue but is not as clean. I have only done some quick tests with this and have not looked at it in Safari.
Update: I knew there was a name for this! It is called the clearfix method.
Liquid Spaced Out Columns
In the previous Space Out Columns post I promised to follow up with some info on liquid layouts, so here we go: Read more…
Spaced Out Columns
In the comments for my A List Apart article, Fredrik Frodlund mentioned he was “not sure it would work if you use blocks that have white space between them
”. There actually was a demonstration of this in the three column example with the nested two column layout. I only quickly commented on it, so I thought I would expand on it here. Read more…
The new phone book’s here! The new phone book’s here!
Check it out: http://alistapart.com/articles/multicolumnlayouts
This site uses a combination of the techniques presented in the article. I have a red border on the container and a gray border on the body. By overlapping them, I get the effect of having a border around the rail.
Why alt tag
So many times when people talk about web site accessibility and SEO, one of the main things mentioned is to make sure all of your images have an ‘alt tag’ to provide descriptive text for screen readers and search engines. Even Google says this in their Webmaster Help Center, in the Webmaster Guidelines and the How can I create a Google-friendly site sections. Of course what they mean is alt attribute. What I hope this site can do is clarify some of the confusion with web development, and maybe present some new ideas and techniques. Thoughts and ideas are welcomed.