Setting overflow to visible for the container
often fixes the problem. Alternatively, setting the value to hidden crops the unruly
few extra pixels.
The 3-pixel text jog
Problem: Inline content next to a floated element
is pushed away by 3 pixels. In the
depicted example, the content in the dotted
line has a 3-pixel jog in the text that appears
under the floated element.
Solution: Apply the ???Holly hack,??? a 1% height
value to the relevant containing element(s).
See three-pixel-jog.html in the chapter 9
folder of the download files. Try removing
height: 1%; from #textWrapper to see how
the page looks without the hack.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
362
Whitespace bugs in styled lists
Problem: The browser wrongly interprets whitespace in the code as actual space in styled
navigation lists, thereby placing space between lists and list items. This affects lists such as
that created in Chapter 5??™s ???Using HTML lists and CSS to create a button-like vertical navigation
bar??? exercise.
Solution: There are several solutions to this problem, the most
drastic of which is to remove whitespace from the relevant portions
of code (between the list items). You can also leave a space
between the last character of the link text and the closing tag,
assuming this doesn??™t compromise your layout in any way.
Otherwise, use one of the following rules:
li {
display: inline;
}
li {
float: left;
width: nnnpx;
}
li a {
display: block;
float: left;
clear: left;
width: nnnpx;
}
Note that in the preceding code, where nnnpx is shown, nnn should
be replaced with a numerical value.
Pages:
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467