CODEWITHSUNDEEP
css
Daniel Yule
Daniel Yule

Reputation: 121

CSS line-height smaller than font-size results in odd overflow within a div

I've encountered some bizarre CSS behavior. However, it works exactly the same across Firefox, Chrome and IE (9) so I suspect it is a part of the CSS standard, however, I cannot find any reference to why it might be the case.

I have a div with some text in it. When I set the font-size larger than the line height, the height of the div is calculated using the line-height, but the content is much larger. That is, the text in the box is much larger than the box itself. I have a jsfiddle with the situation here:

http://jsfiddle.net/RVgzV/4/

If you move the mouse to above the bounding box, you can see the hover css activates before you enter the div. Similarly, clicking close to, but still outside of the box activates the javascript click event. It's slightly easier to see where the content box is here:

http://jsfiddle.net/RVgzV/5/

The height is correctly calculated when the display property on the div is set to inline (which I can't do for various styling reasons). Also, the issue is solved if I set the overflow property to hidden. To me this indicates that the content is larger than its containing box, but I am not sure why. In particular I want to know why the "height" css box model property of the object is smaller than its actual height as displayed on the page.

I've had a look through the CSS spec, and I didn't see my answer there, but I suspect there may be something there I am missing.

Edit

I've found the following link which makes some reference to the problem I am having, but I have no idea what their source is, or why it might be the case.

Also, in response to some answers I have received, I am not looking for how to fix my css so the hover issue doesn't appear anymore, I am looking for why it's happening in the first place.

Edit Again Apparently, any content of the box, no matter whether inside the box's boundaries or not invokes hover on the box. (See Mr. Lister's comment on This answer. What I'd really like to know is where in the specification this behavior comes from. Is it in there? Or is it an implementation that all browsers have agreed on?

Upvotes: 2

Views: 2705

Answers (2)

LessQuesar
LessQuesar

Reputation: 3193

Use overflow:hidden to hide anything outside of the div.

Its acting correctly as children can exist & be hoverable outside of the block area of an element.

This technique is used frequently to move inner pieces of block elements by using negative-margin/padding/absolute positioning etc. yet those pieces will always maintain the hover-ability of the parent.

Upvotes: 1

Sven Bieder
Sven Bieder

Reputation: 5681

The div is not incorrectly sized. It is the normal behavior. You have used CSS incorrectly. The div-height is defined by the number of lines in it. You have given a bigger font-size than line-height, that means it can be only taken the max-line-height to define the number of needed lines.

By the way, what sense makes it to define the font-seize larger than the line-height?

Upvotes: 0

Related Questions