What happens if you set visibility:hidden on the parent element but the child element has visibility:visible?

Visibility hidden can be overwritten by a descendant. Consider that you have box1 with visibility:hidden that contains box2 with visibility:visible. box2 will be visible. This is not a bug. This is according to CSS 2.1 specification.

How to deal with displaced or disappeared elements?

If an element is displaced, check to see if any element in the chain is floated. If an element in the chain is floated, try adding 'position:relative'. This bug effect IE6.

Why do we need to eliminate the overflow-x property if possible when we do not define a height?

This is a problem with Firefox 3.6.x. If we have div, which we did not define a height, but we define overflow-x: hidden, vertical scrollbar appear (at least with Firefox 3.6.x). Eliminate overflow-x if possible if we don't want to explicitly define the height

How can we effectively cause the textarea to have 100% width without overflowing the parent DIV?

We have a div, which contains a textarea, and we want the textarea to have borders, paddings, and width=100%. The problem is that the width=100% means that the width of the textarea equal to the width of the parent div. Because the width does not contain the border and padding, the textarea will overflow the parent div. To work around this issue, we can use one of the following approaches:

Set padding-right on the parent div to twice the border of the textarea.

Try to eliminate the parent DIV if possible (not tested)

Use position:absolute on the textarea, and assign appropriate value for the left, and right property (not tested).

How can we use overflow:auto to prevent unnecessary scrollbar?

For textarea, by default, IE will display the vertical scrollbar even when it is not necessary. To tell IE not to display the vertical scrollbar until necessary, use overflow:auto. For a div, if all of its child elements are floated or position:absolute, the div collapsed (causing its background to disappear, or your elements are not displayed appropriately). To fix these problems, use overflow:auto and set the height on the div. This cause the div to regain its dimension.

How to Replace nobr with css?

The <nobr> is supposed to prevent the text from wrapping. However, the <nobr> tag is not part of any standard specification, and it is not supported by all browsers. If you need to prevent the contained text from wrapping (all the contained text must be rendered on the same line for some reason), you can achieve this behavior with CSS:

.nobr { white-space:nowrap; }

Problem with fluid header / footer:

If your header and footer DIVs are fluid (you do not want to set the width on these because you want them to stretch nicely), a problem occurs when the window is resized so that it is smaller than the content DIV (which is typically 960px). At this point, the horizontal scrollbar appears, and if you scroll right, you will see that your header and footer DIVs do not stretch as you may expect. Possible solution is to put all of your elements (header, content, footer DIVs) inside another DIV

How to create a block that extends to the bottom of the viewport?

You have a page with two blocks (a header and a body). How can you get the body to start below the header, and extends all the way to the bottom of the viewport, whatever the size of the window is? One obvious way is to use JavaScript to set the height of the body block at runtime. However, we can also do this with CSS. Make the body block absolutely positioned, and set both top and bottom attributes to 0. The drawback of this technique is that we need to know the height of the header block ahead of time.

How can we use the overflow property to clear float instead of adding extra markup with clear:both?

You can use overflow:hidden to prevent the box next to a float from extending and wrapping below the float. For example, you have a profile photo which you need to display on the left, and on the right you need to display some text. You use float:left on the profile photo. On the right, you can set overflow:hidden or overflow:auto (for IE6, we also need zoom:1). Another solution is to set margin-left on the right element.

How to align images with an input field?

If you need to have an image next to an input element and have the two element vertically align, set vertical-align:middle on both elements. The default value for vertical-align of the input element is baseline.

How to find bugs in your style sheet?

Before delving into cross-browser CSS compatibility issues, validate your style sheet. If it passes this test you are sure that the problems aren't caused by incorrect code but by incorrect browser implementations. Validation doesn't remove the problems, though. If you encounter weird behavior, don't assume you found a bug. Ask for help at the wonderful css-discuss mailing list, where plenty of experts are ready to lend a helping hand. If you still think you've discovered a bug, follow the instructions on the MysteryBug page to isolate and define the bug. Usually you'll find that you've misunderstood an obscure detail in the specs.

What is the purpose of clipping?

Consider that each element has a "box" surrounding it. Changing the elements's clipping area is a way of shrinking or growing this box. Clipping can be used to create a box for an element that extends way beyond the box necessary to contain the element. Clipping can shrink this box, cutting off the content.