CODEWITHSUNDEEP
htmlcssgoogle-chrome
Tom
Tom

Reputation: 13

Chrome not displaying divs

This works fine on Firefox and IE but 3 divs on the right are missing on Chrome. Any suggestions would be great. It's weird that some of the divs (7,8,9) are not rendered on Chrome. Could this be a Chrome bug?

Is there no one out there who can answer this?

http://jsfiddle.net/2LfLtem6/

Css and HTML

<style type="text/css">
.ma_content {
    min-height: 100%;
    margin-top:-40px;
    position: relative;
    overflow: auto;
    z-index: 0;
    width:800px;
}
.u_content {
    min-height: 100%;
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.u_content img:hover {      
    opacity: .8;
    -webkit-transform: scale(0.9,0.9);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(0.9,0.9);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
    position: relative;
    z-index: 99;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.top_kutucuk {
    width: 300px;
    display: block;
}

.bottom_kutucuk {
    position: absolute;
    width: 300px;
    display: block;
    bottom: 0;
}

.left_kutucuk {
    display: block;
    float: left;
}

.right_kutucuk {
    display: block;
    float: right;
}

.center_kutucuk {
    display: block;
    width: 200px;
}

.kutucuk_1 {
    width: 800px;
    height: 400px;
    overflow:hidden;
}
.kutucuk_2 {
    width: 300px;
    height: 400px;
    overflow:hidden;
}

.kutucuk_3 {
    height: 400px;
    width: 300px;
    padding-bottom: 0px;
}

.kutucuk_4 {
    width: 300px;
    height: 150px;
    overflow:hidden;
}

.kutucuk_5 {
    height: 250px;
    width: 150px;
    padding-bottom: 0px;
    overflow:hidden;
}

.kutucuk_6 {
    height: 250px;
    width: 150px;
    padding-bottom: 0px;
    overflow:hidden;
}

.kutucuk_7 {
    width: 300px;
    height: 150px;
    overflow:hidden;
}

.kutucuk_8 {
    height: 250px;
    width: 150px;
    padding-bottom: 150px;
    overflow:hidden;
}

.kutucuk_9 {
    height: 250px;
    width: 150px;
    padding-bottom: 150px;
    overflow:hidden;
}

.kutucuk_10 {
    width: 800px;
    height: 150px;
    overflow:hidden;
}
</style>

<div class="ma_content">
        <div class="top_kutucuk kutucuk_1">
            <div class="u_content"><a href="#" title="" target="_self"><img src="Image4.png" width="198" height="396"></a>
                <div class="left_kutucuk kutucuk_3">
                    <div class="u_content">
                        <div class="top_kutucuk kutucuk_4">
                            <div class="u_content"><a href="#" title="" target="_self"><img src="Image1.png" width="297" height="148"></a></div>
                        </div>
                        <div class="left_kutucuk kutucuk_5">
                            <div class="u_content"><a href="#" title="" target="_self"><img src="Image2.png" width="148" height="248"></a></div>
                        </div>
                        <div class="right_kutucuk kutucuk_6">
                            <div class="u_content"><a href="#" title="" target="_self"><img src="Image3.png" width="148" height="248"></a></div>
                        </div>
                    </div>
                </div>
                <div class="right_kutucuk kutucuk_2">
                    <div class="u_content">
                        <div class="left_kutucuk kutucuk_8">
                            <div class="u_content"><a href="#" title="" target="_self"><img src="Image5.png" width="148" height="248"></a></div>
                        </div>
                        <div class="right_kutucuk kutucuk_9">
                            <div class="u_content"><a href="#" title="" target="_self"><img src="Image6.png" width="148" height="248"></a></div>
                        </div>
                        <div class="bottom_kutucuk kutucuk_7">
                            <div class="u_content"><a href="#" title="" target="_self"><img src="Image7.png" width="297" height="148"></a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="top_kutucuk kutucuk_10">
            <div class="u_content"><a href="#" title="" target="_self"><img src="Image8.png" width="797" height="148"></a>
            </div>
        </div>
    </div>

Upvotes: 1

Views: 1788

Answers (2)

Zentoaku
Zentoaku

Reputation: 767

Your fiddle HTML begins with:

<div class="ma_content">
        <div class="top_kutucuk kutucuk_1">
            <div class="u_content"><a href="#" title="" target="_self"><img src="Image4.png" width="198" height="396"></a>

add float: left to anchor and move it between those two divs on the same DOM level: http://jsfiddle.net/2LfLtem6/4/

Short explanation: if you mix floated block divs with inline content then you'll have a very big headache and messed up layout :)

Upvotes: 1

wick3d
wick3d

Reputation: 672

I've taken a look at your fiddle (http://jsfiddle.net/2LfLtem6/) Divs 8,9 and 7 are indeed not visible when you open the link - but they are visible via chrome inspector.

After tweaking the css a little I found that you should increase the .kutucuk_1 height to fit all the divs in it. Like this:

.kutucuk_1 {
 width: 800px;
 height: 800px;
 overflow: hidden;
}

fiddle: http://jsfiddle.net/2LfLtem6/2/

Tweak it any way u want

Upvotes: 0

Related Questions