CODEWITHSUNDEEP
cssinternet-explorer-6
G Kent
G Kent

Reputation: 75

Something in CSS is causing horizontal scroll in IE6

I'm a real CSS beginner, so please forgive my ignorance. I've been searching around without success regarding something which must be obvious to experienced CSS folks.

Basically the CSS below displays as expected in FF/Chrome/IE8, but not in IE6 (and who knows about other IE versions). In IE6 a friggin horizontal scrollbar keeps being displayed since some elements are overflowing the browser window. My reading seems to indicate this has something to do with padding, 100% width being a problem with IE6, or something... I've added bg colours to better visualise the problem.

I only really want the #ch/div ("head") to fill the browser window horizontally. I suppose it boils down to: why are the div's for bs_ext and cd extending beyond the right-hand browser window, causing the horizontal scrollbar to be displayed?

<head>
<style>
<!--
body{margin:0px 0px 0px 0px}

#ch,#cs{position:relative;width:100%}
#ch{margin-top:0px;height:90px;background-color:#edeff4;border-bottom:1px solid 
#dddddd}
#cs{height:55px;width:1024px;border-bottom:1px solid #dddddd}
#cb{width:1024px}
#ci{float:left;width:200px;background-color:#efefef}
#cr{float:left;width:530px;background-color:#cccccc}
#cd{float:left;width:294px;background-color:#dddddd}

#bs{position:relative;float:left;top:18px;left:15px;width:185px;background-
color:#cccccc}
#bs_ext{position:relative;float:left;top:18px;left:15px;width:824px;background-
color:#dddddd}

-->
</style>
</head>
<body>
<div id=ch>head</div>
<div id=cs>
    <div id=bs><span>sssssss</span></div>
    <div id=bs_ext><span>ppppppp</span></div>
</div>
<div id=cb>
<div id=ci>111<br>111<br>111<br></div>
<div id=cr>222<br>222<br>222<br></div>
<div id=cd>333<br>333<br>333<br></div>
</div>
</body>

I would appreciate any pointers on how to make this work in IE6.

Also, I'd like the bottom border of #cs to be 100% of the browser at all times (it's currently 1024px). But, if I use "100%", then when resizing the browser moves "ppppppp" down - I'd like it to be fixed so that resizing the browser does not change the content position.

Thank you so much for any pointers/assistance

Upvotes: 0

Views: 330

Answers (3)

Raj
Raj

Reputation: 370

To remove the scrollbar you could give this property to #CS {overflow: visible;} it may fix the IE6 Scrollbar issue.

As mentioned by BVD you shouldn't be checking for compatibility in IE6, you should install the latest versions of IE i.e., IE9. IE9 provides a Developer Tool which allows you to check the html page for compatibility in IE7, IE8 and IE9. You should ignore IE6 and focus on compatibilty from IE7 version onwards. To get an idea of which browsers are popular check NetMarketShare

The naming conventions you've used for the Div's are not right, check this article it may help you understand what I'm talking about css naming conventions.

Upvotes: 0

Phortuin
Phortuin

Reputation: 770

Short answer:

  • bs_ext is 824px wide, so any browser (not just IE6) will display a scrollbar if browser size goes below that
  • cd is positioned 200+530px from the left and is 294px wide, meaning it extends to 1024px which is too wide (any browser uses about 16 pixels of the window's width to be used for a vertical scrollbar)

Also:

  • Go with bvd's suggestion; don't try to optimize for IE6 too much
  • Try to build the site in IE6 first and modern browsers later.

Solutions:

The following CSS will remove any scrollbars on the html/body of your page. A terrible fix, as you're destroying the user's tools to navigate your site:

html, body { overflow: hidden }

Also, if you want a footer that sticks to the bottom of the page (I'm not sure if you do but it looks that way), try to follow this tutorial:

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Lastly, if you want more help, I suggest you post a picture or design of what you're trying to achieve. A lot is possible in IE6, if you know how to work around CSS imperfections that browser has.

A final tip is modernizr: http://www.modernizr.com/ Modernizr solves a lot of IE6 issues, but not all. Also, you'll have a JavaScript dependency in your website which will affect at least IE6 and 7 users.

Good luck!

Upvotes: 0

user353955
user353955

Reputation:

I would not try to make my website compatible with IE6.

IE6 is over 10 years old, you should use your time checking your code with newer browsers.

If you insist to make it IE6 compliant, you should look into using different stylesheets for different browsers.

Check this link out: http://www.thesitewizard.com/css/excludecss.shtml

Upvotes: 2

Related Questions