Overflow:auto issue in IE7

HTML & CSS
1

Hi all,

Just wondering if someone could help me with my overflow:auto IE7 bug.

I have the following defined in my CSS style sheet:

#scrollblock {
	float:right;
	width:495px;
	height:450px;
	position: relative;
	overflow-x:auto;
	background:#0f7fb3;
	line-height:1.6em;
	padding:0 0 10px 0;

}

This does not display the scroll bar in IE7; however, it works fine in Firefox. I have looked on various forums and people have mentioned that the addition of position: relative; resolves this - however, in my case this still does not display a scroll bar in IE7.

Can anyone possibly assist?

Many thanks

2

Hi olly79, welcome to SitePoint! :wave:

We are happy to assist, but I think it can be difficult to tell without seeing your HTML code too.

Post the code, or even better if you have a page online you can post the link as plain text without the http-www part.

3

Hi,

Yes, sure the webpage is:

I have had to put some spaces in the web URL as it won’t let me post it.

Many thanks

4

On “#scrollblock” yoiu have overflow:hidden; set.

Make the change:

#scrollblock
{
overflow:auto;
}
5

Hi,

Yes, I had tried the following in order to remove the horizontal axes in IE7:

overflow-x:auto;
overflow-y:hidden;

However, by doing this it removes all the scroll bars from IE7 - can you possibly suggest a work around to remove this in IE7?

Many thanks

6

overflow-x shouldn’t be needed.

Set the width and add “white-space:nowrap”

7

Hi,

Not sure if this is correct; however, I have the following block:

#scrollblock {

	float:right;
	width:495px;
	height:450px;
	white-space:nowrap;
	overflow:auto;
	background:#0f7fb3;
	line-height:1.6em;
	padding:0 0 10px 0;
}

Can you possibly assist with the code as I still have the horizontal axes in IE7.

Thanks

8

Hmm I don’t know of a way to get rid of the horizontal scrollbar easily because choosing overflow-y/x is CSS3 and I don’t like it…perhaps some other person can help you as my time is limited/I can’t give a realll good solution.

9

You seems to have mixed the x and y, x=horizontal, the bottom scrollbar and y=vertical, the right hand scrollbar. :slight_smile:

Try this and remove the white-space setting:

#scrollblock {
	float:right;
	width:495px;
	height:450px;
[COLOR="Red"]/*[/COLOR]	white-space:nowrap;[COLOR="Red"]*/[/COLOR]
	overflow:auto;
	[COLOR="Red"]overflow-x:hidden;[/COLOR]
	background:#0f7fb3;
	line-height:1.6em;
	padding:0 0 10px 0;
}
10

Hi,

Yes, I have tried your suggestion and this still gives me the horizontal axes in IE7.

Any other thoughts?

Many thanks

11

Try giving overflow-y:scroll; and THEN overflow-x:hidden;.

Worked for me in IE7.

12

Hi,

That is great and works perfectly!

I really appreciate your help and it is great to be able to receive such support :slight_smile:

13

Very quickly and this is really a ‘would like to have’…do you know how I can change the colour of the scroll bar to match the website which is blue?

14

error

15

You can use some IE proprietary code but it is not supported in majority of browsers. I wouldn’t recommend it-some people might not be able to see it/know it’s a scrollbar.

Edit: Your welcome.

16

Okay, well many thanks for all your help - much appreciated.

17

Your welcome :). If you have any more questions just ask.

18

Hi Ryan,

It’s really nice that you’re doing your best to help out. I’m having an issue with overflow-y in IE7.

Can you please check out this page?

raymondselda . com / teacher-moodwatch / teacher-moodwatch-fullview . htm

This works perfectly in Firefox but everything goes chaotic when viewed in IE7. I only need to make this work in IE7.

Any help would be greatly appreciated. Thank you.

19

Hi. I thought someone might step in but I’m unable to access the site due to my proxy not letting me. You can post your own thread you know-you are a seperate person and can have an own thread. You will likely get more answers because some don’t view threads with a lot of posts because they are likely solved or almost.

Off Topic:

Thanks for visiting my site btw and emailing :slight_smile:

20

It’s probably a hasLayout issue.

#red-mood
{
/*add*/min-height:0;
}
* html #red-mood
{
  height:1%;
  overflow:visible;
}

Gives haslayout in IE6/7. Should be fine I hope :p.