Overflow:hidden ignored by rebellious child image

This is a weird one:

.naReduced{
    max-height: 200px;
    height:200px;
    width: auto;
    overflow:hidden;
    border: blue 1px solid;
}
.naReduced>img{
    height: 250px;
    width: auto;
}

As you can see here: http://syndex.me (second post, which appears as a TV still of a a women drinking from a glass) overflow:hidden is being ignored.

If you inspect the element, all is in order in terms of the CSS, but the divs computed style is still set to 250px instead of 200px, why is that?

Answers


The reason is because of the .noArt style you have applied to the parent div. This is styled as display: table-cell; which causes the div to stretch to contain the content (as table cells do).

If you turn that off, it works as you want.


You need to change its display property to block. At present it is table-cell which is conflicting with the overflow:hidden. Something like this should do:

.naReduced{
    max-height: 200px;
    height:200px;
    display:block;
    width: auto;
    overflow:hidden;
    border: blue 1px solid;
}

Need Your Help

Scrubbing list for non matching values in B

excel indexing excel-2007 pivot matching

I would really appreciate a help on my Excel problem.

Create Invisible Window in GTK#?

c# mono window x11 gtk#

I'm looking to create an invisible window for the processing of certain X events (sort of like NativeWindow in Winforms). Is this possible in GTK#? Or do I need to manually create such a window us...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.