| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| <html> |
| <head> |
| <style> |
| body { width: 400px;} |
| .container { font: 12px Ahem; color: red; width: 100px; height: 150px; position: relative;} |
| .container:first-line { font-size: 30px;} |
| div { background: white; } |
| img { background: red; width: 20px; height: 20px; } |
| .narrowfloat { float: left; width: 10px; height: 25px; } |
| .widefloat { float: left; clear: left; width: 40px; height: 5px; } |
| .reference { position: absolute; width: 20px; height: 20px; background: black; } |
| .first { left: 40px; top: 4px; } |
| .second { top: 30px; } |
| </style> |
| </head> |
| <body> |
| <!-- In strict mode, images do not have their descent removed across line breaks. |
| Ensure the images find the correct offset for their line when avoiding floats and line-height is set. --> |
| There should be no red visible below. |
| <div class="container"> |
| <div class="narrowfloat"></div> |
| <div class="widefloat"></div> |
| <!-- This should cover the first image. --> |
| <div class="reference first"></div> |
| <!-- This should cover the second image. --> |
| <div class="reference second"></div> |
| <img><br><img> |
| </div> |
| </body></html> |
