Проблем с overflow:hidden във Firefox

[misho]

Искам да сложа една голяма снимка в един по-малък div, който е с различни размери според случая. Целта е в зависимост от размерите на div-а да се вижда само част от снимката. За това му дадох overflow:hidden и всичко е прекрасно в Chromium, но във Firefox снимката изкача над div-а. :lol:
Ето пример: http://micobg.net/overflow/overflow.html
Как да реша този проблем?

При свиване на прозореца можете да видите каква ми е целта - снимката да запълва всичкото свободно вляво място , независимо от резолюцията.

 

[M1tq96]

задай на снимката position:absolute;

 

[misho]

задай на снимката position:absolute;

Така снимката изчезва. :shock:
А и нали на div-а, съдържащ снимката съм дал position:absolute;.

 

[M1tq96]

не .. само на снимката позиция - абсолютена .. пак дива .. без позиция

 

[bytheway]

overflow не ти работи, защото трябва да дадеш височина на родителския елемент (в случая div).
Също така махни това position:absolute; това е голяма глупост
Няма нужда да слагаш и width:100%; защото по подразбиране всеки див запълва 100% от ширината на родителския елемент.

Т.е. кода трябва да стане така:

[css]#hello_img {
height:350px;
overflow: hidden;
}[/css]

 

[misho]

Хубавото е, че вече и под двата браузъра е едно и също.
Лошото е, че не е това, което търся. :? Така се вижда цялата снимка и разтяга съдържащите я div-ове не до желаните 100%-350px, а до размерите на снимката. :lol:

 

[misho]

Реших си проблема. Да споделя и как стана:
На външиния div - #hello_intro:

position: relative;
overflow: hidden;

На вътрешния div - #hello_img:

position: absolute;

На снимката - нищо. :wink: