HTML Utopia: Designing Without Tables Using CSS- P8: I’ve been around the Web for a while now some might say I’ve been here from the beginning. And one thing that always bothered me about the Web was its inherent inability to disentangle content from presentation. | The Header Area it sits to the left of the rest of the content which in this case is our navigation list. After making this change to the rules for the tagline paragraph save your style sheet and view your page in a browser. You should see the navigation display alongside the tagline. These elements behave in exactly the same way as the paragraph that wraps around the image in the example we discussed above. All we need to do now is to align the list of navigation items to the right and alter the padding on the list to move it in slightly from the right-hand edge. Here s the markup you ll need the resulting display is depicted in Figure . File excerpt header-bottom ul margin 0 padding 0 30px 0 0 text-align right Figure . The display after floating the tagline and aligning the navigation If you ve been working through this example in Internet Explorer 6 you may already have noticed that things aren t going quite to plan. Sometimes as if by magic the navigation list that s aligned to the right just seems to disappear along with part of the light blue borders above and below the list. Then if you switch to another window the list magically reappears Well sometimes it does other times it stays hidden. If you ve experienced this problem welcome you ve stepped through the looking glass into the wonderful world of Internet Explorer CSS bugs. This one is called the peekaboo bug as the content disappears and reappears in an almost completely random fashion. There are quite a few of these Internet Explorer CSS bugs but the majority seem to revolve around a mysterious non-standard DOM property called hasLayout. The galaxy of hasLayout bugs is vast and difficult to understand but thankfully 189 Licensed to siowchen@ Chapter 8 Simple CSS Layout these bugs aren t too tricky to squash. Usually eradicating them is just a matter of adding one of a number of inconsequential declarations to the style rules of the element that s giving you trouble. For .
