Before I start I’d like to wish all readers to this column a “Happy New Year” and thanks for their continued support.
As a new year is already underway it seems like a good time to review what we’ve learned in some of the articles in 2007 and to highlight some key points or just points of interest. The following topics are taken directly from the articles and you should refer to the articles for the full details if you find any topics that interest you. Not all the articles are listed here although I do mention most of them.
In January we learned that margin, padding and borders on static elements actually slide under any floated content as if the float was not there.
“Floats are removed from the flow and therefore any padding, borders or backgrounds on the repelled content will still slide under the float as if the float wasn’t there.”
This is an important point and the reason that so many authors are left scratching their head when they find that margins don’t seem to be working. Usually the problem is that they are setting a margin from a floated element and of course the float is not really there and so the margin slides under the float until it hits something more solid. The same is true for padding, borders or even background images on the elements concerned.
In the same article we also learned about the infamous double margin bug on floats and how to cure it using display:inline.
Still in January we discussed the misconceptions that authors have when using relative positioning. The main point of discussion is that relative elements are not really moved at all.
” That is to say that it has no effect whatsoever on the flow of the document. Although this may seem strange what relative positioning does is that it moves an element visually but not physically. According to all the other elements on the page the element is still in its original position and they will react to it as though it were still in the space it originally occupied in the normal flow of the document.
In technical terms the element is moved the specified distance but the space it previously occupied is preserved. Therefore if you move an element using top:-200px then you will find that there is now a big gap in the page where the element originally was and all content is treating that gap as though it were the original element.
As already mentioned above relative positioning isn’t generally used for structural layout but is more used for more subtle effects. This could be that you want to overlap one element with another without altering the flow of the document at all. If you used negative margins to overlap an element then you would find the flow of the page would also be affected by this 10px shift. Whereas with a relatively positioned element there will be no change to the flow of the page at all and only the relative element gets moved. Everything else remains where it was and totally unaware that anything has happened.”
In February we learned a few tricks to implement min-height but the main point of note was as follows.
“Although IE (Internet Explorer) 5 and 6 don’t understand the CSS min-height property they can easily be made to understand it by simply using height instead. They will treat height almost as though it were min-height and will expand an element that contains its content even though the height has been set.”
This was a popular article that explored how to make the ubiquitous liquid round corner boxes. A lot of issues were covered and a useful topic was how to make inline elements behave like block level elements.
“The inner nested element is a span which is an inline element by default and therefore we need to turn its characteristics into behaving like a block level element. We do this by declaring the span as display:block which makes it produce a block level box (it does not however turn the span into a block level element and the normal rules for inline elements in html must still be obeyed).
Declaring the span as block level makes it display as a block level box and it now expands to fill the parents width in the way that any other normal block element would.”
While still in February a ground breaking technique of mine was used to create equal columns where each column could have full length borders and background colors. The columns could also be separated from each other by some distance unlike other methods that use shared borders. The main technique relied on a concept that not many understand and that is that an absolute element will achieve 100% height of a parent (in good browsers) unlike static elements that would collapse to auto height.
“This technique is based on the fact that if you place an absolute element inside a relative container and set the absolute element to height:100% (or top:0 and bottom:0) it will expand in tune with the parent container (why oh why can’t static elements do this – life would be so much easier). The problem is that although the absolute element will expand with the relative parent as required the reverse is not true. If you put content inside your absolute element then it just expands out of the box.”
Probably one of the most read CSS articles in this collection. In it we covered the issues that browsers’ default settings were causing and how some properties such as margin and padding varied widely between User Agent.
“For instance, paragraph (p) tags will have a margin applied to them so that each paragraph is separated by vertical white space and do not run into each other. The same applies to many other tags including heading tags (h1 etc). The problem occurs because the amount of margin (or padding) applied to these elements is not consistent across browsers. On many occasions Mozilla/Firefox will add a top margin to the element as well as a bottom margin. IE will however only add a bottom margin. If you were then to view these two browsers side by side you would see that the alignment would be different due to the top margin applied by Mozilla which could make your design not line up as expected.”
At the end of March I put together 10 useful tips that proved to be very popular.
1. Keep it Simple
2. Don’t use hacks unless its a known and documented bug
3. Take care of margins and padding on all elements that you use
4. Avoid using too much absolute positioning
5. Avoid “divitus”
6. Avoid “Classitus”
7. Validate your code
8. Rationalize your code
10. Browser support
Dodging the April showers we learned that you could add more than one class to an element and reap some useful benefits.
“In case you haven’t come across space separated classes then it may be prudent to explain how they are used as it can considerably help modularize your code, cut down on the code itself and ease maintenance.”
This article explored the little used “colgroup” element and how it could be used for styling whole columns in tables.
“On more than one occasion, I have seen table columns styled where classes have been added to every cell in the table in order to style each column. However, this is unnecessary because the colgroup(http://www.w3.org/TR/html4/struct/tables.html#h-11.2.4) element allows us to target each column specifically.”
The collapsing margin model is an often misunderstood concept by authors and this article went into considerable detail to explain the “ins and outs” of margin collapse. An interesting topic discussed was the use of margins on the HTML element.
“Other behaviors to be wary of are when you apply a margin to the HTML element. According to the specs the margins when applied to the root element (HTML) should not collapse. This means you can safely add a 25px margin to the HTML element and know that the margin will be applied. Even IE will obey this. On the other hand if you apply a 25px margin to the body element then the margin will collapse with other margins on the page.
IE, unfortunately (once again), gets this wrong and will not collapse the margin when applied to the body element and treats it as if it were applied to HTML.”
“Hold on to your hats as here comes the clever stuff. Each anchor is only 16px wide and positioned at 16px intervals along the row but we are now going to change the width and position on hover so that a whole row of images can be overlaid over the existing row. This is done by changing the width of the anchor on hover only and then setting the left position back to the beginning of the row. The effect is that a whole row of 5 stars are overlaid over the default state and creates a new row with the default state apparently turned off and the hovered items lit up. All that needs to be done is to select the correct background image to show for each anchor in the row.
However, the problem isn’t completely solved because when the mouse is now moved back to the left over another star the image displayed just stays the same because we have one anchor basically on top of all the others and at full width. We need some way to keep the effect we have but allow the anchors underneath to apply their hovered images in turn. Luckily we can do this by setting the original anchors to have a higher z-index than the hovered anchor. This will allow the background to stretch full width but keep the anchors on top so that a new image can be effected on rollover.”
Using a class added to the body element we learned a technique for identifying the current page menu item and to have it highlight almost automatically.
“Now that we have a means of addressing each list item due to the class identifier we placed there we will add a class to the body tag. Once we have added the class to the body then it is a simple matter of using that body class combined with the list class to target our current page.”
In this article issues of margin collapse were again discussed but we also looked at the effect that negative margins can have on floats. In fact it is now commonplace to use this negative margin floated type of layout.
“If you float an element left you will find that adding a left negative margin will pull the element in that direction much the same as explained already for static containers. However, if you try to use a negative margin on the right side of a left floated element (or vice versa for a right floated element with a left negative margin) you will find that things aren’t all that they seem.”
Using the z-index property we manipulated an image gallery to good effect. One of the key points in using a z-index is as follows:
“Only positioned elements can have z-index – you can’t just apply z-index to any element — only positioned elements can have z-index applied. This means that if you want to place one element on top of another you first have to make it a positioned element and then you can control the stacking order by manipulating the z-index. Therefore, if an absolutely positioned element overlaps your static container you can apply position:relative to your static container and then apply a higher z-index to bring it on top of the absolutely positioned element (this does depend on the stacking context of the elements concerned and will be discussed further down the page). By applying position:relative to the static container (without specifying co-ordinates) you are making that element a positioned element, but more importantly you are not interfering with the document flow in anyway or changing how that element behaves.”
This article explains why you need to clear floats and how you should go about it. We also encounter a few bugs along the way and learn what the different values for the property “clear” are.
“clear:both – ensures that no floating content is on either side of the element.
clear:left – ensures that no floating content is to the left of the element.
clear:right – ensures that no floating content is to the right of the element.
clear:none – doesn’t clear any floats and is the default state of elements anyway and isn’t usually needed unless you need to over-ride a previous clear value. Floated elements can appear on either side of the element depending on the exact structure and given the allowance that there is room for this to happen.
clear:inherit – inherits the clear value of the parent, although IE doesn’t understand the inherit value so you will seldom have any need to use this. ”
The article finishes with a simple tip which is reproduced below.
“The answer in fact is pretty simple — instead of applying a margin top to the cleared paragraph you simply need to apply a margin bottom to the floated element. If you wanted the floated image to have 30px of space underneath then simply apply a bottom margin of 30px (remembering that margins on floated elements don’t collapse). It’s as simple as that!”
Floats usually only float left or right but sometimes it would be nice if they actually floated in the middle. This article explains how this can be achieved with “widthless” floats to create a centered fluid width navigation menu.
“The premise is simple — it basically just involves a widthless float that is placed 50% from the left using position:relative. The nested inner element is then reversed and a negative relative position of 50% (-50%) is applied. This has the effect of placing the element in the center. Recall that relative positioning maintains the flow of the document and allows other content to flow underneath quite normally.”
Sometimes floats just aren’t good enough and authors have more complicated requirements that floats just can’t handle. One such example would be to have a gallery of images and captions that need to be centered and aligned horizontally but also to flow from row to row. This would be easy if the image and caption were the same height but in many cases this is not possible or desirable.
It is not possible to do this in tables either but this article shows a way that CSS can once again do what seems impossible at first sight. Unfortunately it uses advanced techniques and a few hacks to achieve the result required but the effort is well worth it. The whole article is based around the technique mentioned in these two paragraphs.
“We need a totally different approach and as it turns out we have one! Enter display:inline-block. If you haven’t heard of inline-block before then basically what it does is cause an element to generate a box which can flow inline much the same as replaced elements (like images). This means that our block level elements can have widths and heights and also line up together horizontally across the page (like inline elements). Unfortunately, even though display:inline block is valid CSS 2.1 only some browsers have implemented it — Safari and Opera 9 have, but IE and Firefox 2.0 do not support it.
In the case of IE, it’s stated that it does support inline-block, but only on inline elements (which defeats the purpose as it’s usually block elements that you want to be made inline-block). However, IE will actually treat any inline element as display:inline-block when that element has “layout” (see MSDN for more information on HasLayout). So in theory you could set an anchor (which is an inline element by default in HTML) to be display:inline-block simply by applying one of the properties that cause “HasLayout” to be true. For an inline element the only properties that we can really use to do this are, strangely enough, display:inline-block itself or the MS proprietary zoom property (zoom sets the magnification scale of an element; the value 1.0 means no change at all) ”
In November we set about creating the effect seen with “lightbox” scripts and see how far we could go with CSS. This was rather a complicated subject and involved us getting IE6 to behave as though it understood position:fixed. Although this is a little “hacky” the basic method was shown as follows:
“So far we have constructed the message box and centered it both horizontally and vertically. The next requirement was to make sure that it remains fixed in the viewport while the content underneath can scroll. Unfortunately IE6 and under don’t understand fixed positioning so we have got to use some complicated methods to mimic this.
The basis of the technique we will use is to turn off the scrollbars from the HTML and body elements using overflow:hidden. We then construct a 100% high scrollable element that will in effect replace the body element and hold all the content. This will allow us to place the message box absolutely from outside of this new “body” element so that it sits on top of our content but is not contained within the element. This means that when the element below scrolls the message box is unaffected and appears to be a fixed position.”
Another popular article that sparked a lot of comments and had me coming up with different versions to keep everybody happy. The premise seemed simple in that “dotted leaders” were added to a restaurant type menu to draw the eye nicely across from one column to the next. In the end it wasn’t that difficult but we did encounter some bugs and obstacles on the way.
One of the things that spoiled IE6 and under was the 1px dotted border problem.
“Looks pretty good but what’s happening with the nice dotted border? They look like dashes and are a bit chunky for the design. This is an old IE problem where IE6 (and under) will display dashes instead of dotted borders when the border size is 1 pixel. There is nothing we can do about this. Or is there?
In fact we can make IE6 look much better by doing away with the bottom dotted border and using a background image instead. We can just give it to IE6 and under like so.”
Well that about wraps 2007 up but what can you expect from this column in 2008?
I have a few ideas rattling around my head and in future articles we will address some of the topics noted below (in no particular order and possibly subject to change):
Styling Forms (Always a delight)
Drop Down Flyout Menus (including expanding menus when clicked)
CSS Tooltips (always a favourite)
Simple Tabs Menus
If you have enjoyed the articles and have any special requests for articles then why not add your comments below and if the topic looks interesting then I will consider writing it up.
Happy New Year to you all.