Overflow:auto issue with IE 8

**tcarl** · Aug 9, 2012 10:07

Hello,
I am trying to turn off an overflow:auto style with IE8. When I view the page in IE8 it will not see the hack and it still will see the overflow:auto. Are there any suggestions to remove this without deleting the code for my other browsers? I also tried multiple options such as overflow:hidden, overflow-x: hidden, overflow-y: hidden. Attached is my code:

/* Content - Main Style*/
#content {
width: 980px;
overflow: auto;
overflow /*\**/: 0\9; /*IE8 */
padding: 10px 10px 10px 10px;
margin-top:-430px;
*margin-top:-820px; /*IE7 */
z-index:9950;
position:relative;

}

/* IE 8 Code */
.ie8 #content {
height:100%;
overflow:0px;
}

**ronpat** · Aug 9, 2012 13:01

Add the following above the </head> tag and before the <body> tag as noted:

Code:

<!--[if IE 8]>
<style type="text/css">
#content {overflow:visible}  /* "visible" is the default */
</style>
<![endif]-->
</head>
<body>

**tcarl** · Aug 9, 2012 13:16

Hello,
I added the code and the overflow:auto is still there in IE8. Nothing happened. I would like to remove the overflow:auto option all together from the IE8 style.

Originally Posted by ronpat

Add the following above the </head> tag and before the <body> tag as noted:

Code:

<!--[if IE 8]>
<style type="text/css">
#content {overflow:visible}  /* "visible" is the default */
</style>
<![endif]-->
</head>
<body>

**ronpat** · Aug 9, 2012 14:04

Objective understood.

The way to remove overflow:auto in a subordinate style is with overflow:visible.

You have several pieces of "exception" code for versions of IE.

I suggest that you comment out ALL of the various pieces of "exception" code and allow overflow:auto to affect all browsers temporarily - basic uncomplicated css - then apply the snippit that I sent. It should work.

Try a process of elimination to find out where|why overflow:auto is bleeding into IE 8.

This is about all I can suggest.

**Paul O'B** · Aug 9, 2012 15:06

Originally Posted by tcarl

/* Content - Main Style*/
#content {
width: 980px;
overflow: auto;
overflow /*\**/: 0\9; /*IE8 */
padding: 10px 10px 10px 10px;
margin-top:-430px;
*margin-top:-820px; /*IE7 */
z-index:9950;
position:relative;

}

/* IE 8 Code */
.ie8 #content {
height:100%;
overflow:0px;
}

There is no such thing as overflow:0px.

As mentioned by ronpat you should be using overflow:visible to counter overflow:auto.

However your code makes me wonder whether you are doing something wrong as I haven't seen hacks like this for a while.

Code:

#content {
width: 980px;
overflow: auto;
overflow /*\**/: 0\9; /*IE8 */
padding: 10px 10px 10px 10px;
margin-top:-430px;
*margin-top:-820px; /*IE7 */
z-index:9950;
position:relative;

}

I assume you are using the IE hack here:

Code:

overflow /*\**/: 0\9; /*IE8 */

But I guess it should be:

Code:

overflow /*\**/: visible\9; /*IE8 */

However that hack seems to target all versions of IE and not just IE8. You should really use conditional comments as mentioned by ronpat to cater for IE9 and under if necessary and just add !important to the rule to see if there are specificity issues. If you use hacks like that then you may end up giving them to IE10 and above when they may not need it.

I would hazard a guess that you don't actually need those hacks at all as I can't think why IE8 would need different rules for the overflow. The two negative margin-tops are also a cause for worry and certainly need looking at. If IE7 needs double the top margin of other browsers then I would think that you are doing something wrong unless you have very good reason for it and are countering a known bug.

It also seems a little odd that you are dragging something upwards by 480px and would not be something that I recommend unless there is good reason for it. Of course you may well have good reasons for doing the above but generally I can spot when something doesn't quite seem right

Do you have a link to the page in question so that we can debug further?

User Tag List

Thread: Overflow:auto issue with IE 8

Thread Tools

Display

Overflow:auto issue with IE 8

Bookmarks

Bookmarks

Posting Permissions