SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Overflow:auto issue with IE 8

    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;
    }

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,460
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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>

  3. #3
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Quote Originally Posted by ronpat View Post
    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>

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,460
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tcarl View Post
    /* 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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •