CSS Overflow: hidden works at first and then doesn't?

Question

For some reason the code below works once, but if I change the height values for .Image, it stops working. The test image overflows instead of being hidden. Then the containing div won't resize no matter how often I try to change height.

    .Image{
        background-color:red;
        height:400px; 
        overflow:hidden;    
    }

 </style>

</head>
<body>
<div class="main">
    <div class="Image">
        <img "src="images/test.jpg" alt="test">
         </div> 
</div>
</body>
</html>

can you give a working example? because overflow and height should always work — x4rf41
– x4rf41, Commented Jan 5, 2014 at 9:08
Please do provide an example jsfiddle of what won't work, I tested your code and changing the image's height using CSS dosen't seem to reproduce your issue. I would reccomend removing the quotation mark preceding the src, but I assume this was not in your initial code as it stops the image rendering altogether. — JaanRaadik
– JaanRaadik, Commented Jan 5, 2014 at 9:33
Okay..so it looks like I was using the wrong comment tags? In creating a fiddle I stumbled across a comment I had written in the original code next to the .Image height property. I used  instead of /* */. If you add  to rrugby's fiddle, it reproduces the problem I was seeing, except sometimes it would work at first, then stop. So is  not allowed in internal style sheets?? — user2559519
– user2559519, Commented Jan 5, 2014 at 16:26
You might not fully understand CSS -  is not a valid comment in CSS. Comments in CSS are /* */ - please Edit your question to include a full code example with jsfiddle that consistently fails. Voting to close. — Chris Moschini
– Chris Moschini, Commented Jan 5, 2014 at 16:51

kanthonye · Accepted Answer · 2014-01-05 21:27:03Z

1

the reason why is doesn't work is because you have an error in your code at img

<img "src="images/test.jpg" alt="test">

your error is ->

<img "src="...">

it should be ->

<img src="...">

with out the extra quote

so your code should look like this

   .Image{
        background-color:red;
        height:400px; 
        overflow:hidden;    
    }

 </style>

</head>
<body>
    <div class="main">
    <div class="Image">
        <img src="images/test.jpg" alt="test">
    </div> 
    </div>
</body>
</html>

answered Jan 5, 2014 at 21:27

kanthonye

1591 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS Overflow: hidden works at first and then doesn't?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related