Question

I have an element, which Opera displays higher than it should be (53 instead of 35 px). So, I have tried to explicitly set the style of this jquery-ui element. When I look at the element with Dragonfly, this is what I see in styles:

.ui-tabs-nav { 
height: 35px;
max-height: 35px;
min-height: 35px;
padding: 0px;
vertical-align: bottom;
}

Looks like it is set (there would be strikethrough the rows otherwise, right?). Min-height, max-height and height the same – 35px. But this is what ‘Computed style’ looks like:

height: 53px;
max-height: none;
min-height: 35px;

Do you have any ideas on what might be wrong? Why is max-height property ignored and height is computed with digits (by chance) switched?

Answer 1

Can I ask why you are using the same value for min and max height? If you are trying to limit the height of the item to 35px consider using overflow:hidden.

.ui-tabs-nav { 
    height: 35px;
    overflow: hidden;
    padding: 0px;
    vertical-align: bottom;
    display: block; /* if it is not a block element already */
}