a simple css issue about overflow:hidden

Question

This is my css content :-

   <style type = "text/css">
       li
    {
        display:inline;
    }
    .carousel
    {
        position:absolute; 
        white-space:nowrap;

    }
    .sliderGallery
    {
        width:800px;
        overflow:hidden;
        height:100px;

    }
 </style>

This is my html content :-

 <div id="sliderGallery" class = "sliderGallery">

        <ul id = "carousel" class="carousel">
            <li>
                <img src ="Images/1.jpg" />
            </li>

            <li>
                        <img src ="Images/2.jpg" />


            </li>

            <li>
                    <img src ="Images/3.jpg" />

            </li>

            <li>
                        <img src ="Images/4.jpg" />

            </li>

            <li>
                        <img src ="Images/5.jpg" />

            </li>

            <li>
                                <img src ="Images/6.jpg" />

            </li>
        </ul>
      </div>

As you can see i have set overflow:hidden but still, my content is being displayed if it is more than 800px. Where am i wrong?

Thanks in advance :)

theorise · Accepted Answer · 2010-07-07 16:16:26Z

3

What about adding a height to the div too?

Also try removing position:absolute; on the carousel.

edited Jul 7, 2010 at 16:16

answered Jul 7, 2010 at 16:02

theorise

7,49514 gold badges49 silver badges66 bronze badges

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

8 Comments

Ryan Kinal Over a year ago

Yep. If you don't have a specified height, the container will just expand.

TCM Over a year ago

Hi, Sorry. It still doesn't work :(. I am posting the edited code.

TCM Over a year ago

Then it works. However i want it to be absolute only. Since i am manipulating left property of css using jquery. And unfortunately left property only works when position is absolute. I am actually developing a carousel.

theorise Over a year ago

Then set the overflow hidden and height/width on the carousel ul, or add position: relative to the sliderGallery div.

TCM Over a year ago

No i don't want to set overflow:hidden on ul. Please see this link :- apple.com/mac . See the carousel on top. If i set overflow:hidden on ul then how am i going to show the rest of <li> when slider is moved left and right. Please give some idea to tweak the container. I can't set overflow:hidden on ul. It works but then my whole application stops working. :(

|

Jimmy · Accepted Answer · 2010-07-07 15:54:56Z

2

Try changing .sliderGallery to #sliderGallery in your CSS

answered Jul 7, 2010 at 15:54

Jimmy

5554 silver badges15 bronze badges

1 Comment

TCM Over a year ago

Oops! sorry i forgot to add classname. I changed it in my post. But still it is not working :(

electrichead · Accepted Answer · 2010-07-08 01:19:53Z

0

Danixd above should be correct: setting position:relative on .sliderGallery (the div) will make the ul slide around inside it. Currently, it is sliding around relative to the outer container (or body if you don't have one). You can also try specifying an explicit width for the li.

answered Jul 8, 2010 at 1:19

electrichead

1,1708 silver badges20 bronze badges

Collectives™ on Stack Overflow

a simple css issue about overflow:hidden

3 Answers 3

8 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related