HTML and CSS Reference
In-Depth Information
Figure 9-5.
The border and background extend under the floated image
Fortunately, the solution is very simple. Just add the
overflow
property to the style rule that adds the
background and/or border, and set its value to
hidden
(the code is in the
#location
style rule in border_oat_x.
html). As Figure
9-6
shows, this neatly solves the problem.
Figure 9-6.
The background and border now flow alongside the floated image with the text
Setting
overflow
to
hidden
works in all browsers in widespread use. However, if you need to support IE 6, you
need to set the Microsoft proprietary
zoom
property to
1
in the relevant style rule. Because
zoom
is not needed (or
supported) by other browsers, you can use an Internet Explorer conditional comment in the
<head>
of your page
like this (the selector needs to be the same as in your main style sheet):
