Reputation: 6269

How do I deal with this overflow in IE?

To deal with the collapsing parent when using float, I used overflow:auto. In Firefox it worked fine but in IE it had a scroll bar... Why does this scrollbar appear in IE? As far as I know the box model has the border and the padding so it must be smaller in size. What is the reason the scrollbar appears?

//Html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RamblingSoul</title>
<link rel="stylesheet" href="Rambling.css" />
</head>

<body>
<div id="wrapper">
<div id="header">
    <div id="hleft">
        <h2>RamblingSoul</h2>
        <p>A Free CSS Template from<br />RamblingSoul</p>
    </div>
    <div id="hmiddle">
        <p id="hmiddle_lg1">Great Design</p>
        <p class="bold" id="hmiddle_lg2">Guaranteed</p>
    </div>
    <div id="hright">
        <p id="hright_txt1">Client Testimonial</p>
        <div id="hright_txt">
            Lorem ipsum dolor sit amet, consecteur adipiscing<br />
            elit. Cras tristique, felis ut vehicula laoreet, nunc<br />
            dolor bibendum tortor, a faicibus eros tortor sed<br />
            nunc, Aliquam eget arcu.Nam sem justo, vulputate<br />
            eget, cursus id, volutat ullamcorper, felis. In eget<br />
            velit ut diam ultrices ultrices.<a href="">Read More</a><ul><li></li></ul>
        </div>

    </div>
</div>


<div id="content">
    <div id="cmenu">
        <ul id="menu1">
            <li class="yellow"><a href="" class="upper">HOME</a></li>
            <li class="red"><a href="" class="upper">ABOUT</a></li>
            <li class="pink"><a href="" class="upper">PRODUCTS</a></li>
            <li class="blue"><a href="" class="upper">services</a></li>
            <li class="green"><a href="" class="upper">news</a></li>
            <li class="pblue"><a href="" class="upper">contact</a></li>
            <li class="bblue"><a href="" class="upper">nogo</a></li>
        </ul>
        <ul id="menu2">
            <li class="pgreen1">Lorem</li>
            <li class="pyellow">Dolor Sit Amet</li>
            <li class="pgreen2">Consectetur Adipiscing</li>
            <li class="pyellow2">Cras tristique</li>
        </ul>
    </div>
    <div id="main">


        <div id="contents">

            <div id="services" >
            <div id="Serv" class="banner-red bold">our services</div>
            <div id="Serv1">
                <img src="images/images/serv1.jpg" alt="Service one" />
                <p>
                Lorem ipsum dolor sit amet, consecteur adipiscing elit. Cras<br />
                tristique, felis ut vehicula laoreet, nunc dolor bibendum tortor, a<br />
                faucibus eros tortor sed nunc. Aliquam eget arcu. Nam sem<br />
                justo, vulputate eget, cursus id, volutat ullamcorper,felis.<br>
                <a href=""><img src="images/images/greenbullet.jpg" alt="Read More">Read     More</a></p>
            </div>
            <div id="Serv2">
                <img src="images/images/serv2.jpg" alt="Service one" />
                <p>
                Lorem ipsum dolor sit amet, consecteur adipiscing elit. Cras<br />
                tristique, felis ut vehicula laoreet, nunc dolor bibendum tortor, a<br />
                faucibus eros tortor sed nunc. Aliquam eget arcu. Nam sem<br />
                justo, vulputate eget, cursus id, volutat ullamcorper,felis.<br>
                <a href=""><img src="images/images/greenbullet.jpg" alt="Read More">Read More</a></p>
            </div>
            <div id="Serv3">
                <img src="images/images/serv3.jpg" alt="Service one" />
                <p>
                Lorem ipsum dolor sit amet, consecteur adipiscing elit. Cras<br />
                tristique, felis ut vehicula laoreet, nunc dolor bibendum tortor, a<br />
                faucibus eros tortor sed nunc. Aliquam eget arcu. Nam sem<br />
                justo, vulputate eget, cursus id, volutat ullamcorper,felis.<br>
                <a href=""><img src="images/images/orangebullet.jpg" alt="Read More">Read More</a></p>
            </div>
            </div>

            <div id="Contents">
                    <div id="content1" class="banner-red bold">Some contents</div>
                    <div id="content2">
                        <p >Service title<br /><br /></p>
                        <p>
                            Aliquam congue,elit<br />
                            vitae feugiat pretium,<br />
                            elit diam

                            Aliquam congue,elit<br />
                            vitae feugiat pretium,<br />
                            elit diam

                            Aliquam congue,elit<br />
                            vitae feugiat pretium,<br />
                            elit diam

                            Aliquam congue,elit<br />
                            vitae feugiat pretium,<br />
                            elit diam

                            Aliquam congue,elit<br />
                            vitae feugiat pretium,<br />
                            elit diam
                        </p>

                    </div>
                    <div id="content3">
                        <p >Service title</p>
                        <p>
                            Aliquam congue,elit<br />
                            vitae feugiat pretium,<br />
                            elit diam

                            Aliquam congue,elit<br />
                            vitae feugiat pretium,<br />
                            elit diam

                            Aliquam congue,elit<br />
                            vitae feugiat pretium,<br />
                            elit diam

                            Aliquam congue,elit<br />
                            vitae feugiat pretium,<br />
                            elit diam

                            Aliquam congue,elit<br />
                            vitae feugiat pretium,<br />
                            elit diam


                        </p>

                    </div>
                    <div id="content4">
                        <p>Service title</p>
                        <p>
                            Aliquam congue,elit<br />
                            vitae feugiat pretium,<br />
                            elit diam
                        </p>

                    </div>
            </div>

       </div>

    </div>
</div>


<div id="footers">
    <p>ramblingsoul.com @ All Rights Reserved</p>
    <p>Template provided to Webucator for use in its CSS courseware</p>
    <p><span class="underline">css template</span> by ramblingsoul</p>
</div>
</div>
</body>
</html>

.//CSS

@charset "utf-8";
/* CSS Reset */
 body{width:100%;}
*{padding:0px;margin:0px}

 ul,li{list-style:none}

 #wrapper{background-color:#CF0;width:955px;margin:0 auto;overflow:auto}
/*  Css for header  */

#header{width:954px;float:left;clear:both;border:#000 dashed thin}

Upvotes: 1

Answers (2)

clairesuzy

Reputation: 27624

it showing the scrollbar because thin as a value for border-width equates to about 2px for IE and 1px for other browsers, so the width of your header is 2px + 954px + 2px = 958px which is too wide for the container of 955px IE then generates both scrollbars (arguably it should only generate a horizontal one but well well ;))

so I would suggest you change the border to:

border:#000 dashed 1px

this will bring the border width under control across browser and then you'll need to change the container width to 1px + 954px + 1px = 956px to allow for this

you can just use overflow hidden but in this case you will be cropping the right border of your header, auto can be a good setting while testing to find things like this ;)

Upvotes: 1

kinakuta

Reputation: 9037

Try overflow: hidden; instead.

Upvotes: 1

How do I deal with this overflow in IE?

Answers (2)

Related Questions