Overflow issue with IE7

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Overflow issue with IE7

Post by JellyFish »

I have a div wraped around a table(with tabular-data btw) and the div's style is:

Code: Select all

	overflow-x: auto;
	overflow-y: visible;
. The problem is that even though overflow-y is set to visible, a vertical-scroll-bar sill appears. I notice that it only appears when the horizontal-scroll-bar appears. It is because the horizontal-scroll adds 15 or 20 pixels to the inside of the div. Firefox doesn't display scroll bars inside the div(not surprising).

So I figure I'd set the bottom margin to 15 or 20px. But then Firefox isn't displayed the same.

Is there a way for IE7 to display scroll bars outside of the div? Or a way I could specify IE7 specific code?

Thanks for reading.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

I don't understand why you want a fixed height div with visible overflow but without scrollbars.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

I only want vertically horizontal scroll bar. I don't want a scroll bar for vertical scrolling. I want the div to expand whenever there's overflow vertically. So

Code: Select all

        overflow-x: auto;
        overflow-y: visible;
Doesn't work in IE7.

I want now vertical scrolling within the div, just horizontal.

Does that clear things up a bit?
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

Yes it does. This could be an IE box model issue. Do any of the elements inside the div have padding or borders? If so they could be pushing the width a bit wider than you expect. You may have to add another div inside of it which has margins set to get the desired affect. If that doesn't work, I'm not sure what would.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

If it's going down like that then why don't I just have an IE specific code that sets the padding-bottom to 25px or so?

How do I do IE specific code?
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

You could try something like this. I haven't checked it in a browser or tested it so I have no clue if this will solve your problem or not.

Code: Select all

<style type="text/css">
  #dbox {
    height: 200px;
    width: 200px;
    overflow: auto;
  }

  .gutter {
    margin: 15px;
  }
</style>

Code: Select all

<div id="dBox">
  <div class="gutter">
    <p>All your content here</p>
  </div>
</div>
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

I don't think it would. Because firefox will display that ugly margin, wouldn't it?

My code goes something like:

Code: Select all

#data {
	overflow-x: auto;
	overflow-y: visible;
}

Code: Select all

<div id="data">
<!-- dynamically generated table -->
</div>
If I could just specify 'padding-bottom: 25px;' for IE only, then things might be fine.

How would I select #data using a selector only IE knows and other browser will ignore?
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

Have you tried it? Would it be possible to change the margin in the CSS? What is the width of table inside the div set at? Do the cells have borders or padding?
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

I've tried it. It's not exactly the results I had in mind. :-.

When I set 'padding-bottom:25px;' for '#data' it works fine with IE, but shows up with this ugly 25px padding at the bottom in other browsers.

Once agian, how do I write browser specific CSS declarations?

EDIT: Actually, I also set overflow-y to hidden for IE only.

EDIT 2: I'm using conditional comments for the IE fix. I don't know if there are other hacks for IE specific declaration blocks?
Post Reply