Horizontal scroll bar appearing in middle of screen
I am building a website and want each page to have the Horizontal/Vertical scroll bars visible. The main reason for this is so that the menu bar (that is centred on the screen) always appears in the same place. To do this I have used the Overflow/Scroll properties, which seems to work fine. However, on one PC the user get the horizontal scroll bar in the middle of their screen (behind the content). I’ve tested it on about 15 other PCs / Macs and it’s fine – but I still need a fix.
Any ideas?
Any ideas?
ASKER
IE8
I have tried it on other versions ranging from Safari to IE8 (backwards) and also Chrome - all seem ok - except on this one PC.
I have tried it on other versions ranging from Safari to IE8 (backwards) and also Chrome - all seem ok - except on this one PC.
Well, first we need to know is if it's a browser's problem or a computer's one.
I'm not very sure for your response...
Are other PCs working fine using same browser that affected PC?
Affected PC reproduces the error only in IE8 or in several browsers? Any of these worked fine in other pcs?
I'm not very sure for your response...
Are other PCs working fine using same browser that affected PC?
Affected PC reproduces the error only in IE8 or in several browsers? Any of these worked fine in other pcs?
ASKER
Every other machine / browser is fine, so I would guess it is down to the PC - but it's the PC of the bosses wife, so I need to be sure before suggesting anything. The PC in question works fine - until I add Overflow/Scroll property.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Here you go.
Image1.jpg
Image1.jpg
Ok, I see... so the scrolls are not from the body of the page, they are from a layer, probably a div that you're using as main container.
This type of behavior on IE usually is due to a floating css option on content, that makes it to "separate" from container. IE thinks that the container is empty and reduces it's size to the minimum where it can fits.
The strange thing here is that it only happens on one of your PCs (and also in IE8, I thought this was corrected in IE7 and beyond). ¿Maybe this PC's IE have activated compatibility mode and it's behaving like an IE6.2?
Try to assign to you main container (the one with the scrolls) the following CSS options:
height:auto;
min-height:100%;
I don't remember the exact solution to this type of problems, but it came from those css attribs.
Let me know if this solves the issue, if not I'll look further into it.
This type of behavior on IE usually is due to a floating css option on content, that makes it to "separate" from container. IE thinks that the container is empty and reduces it's size to the minimum where it can fits.
The strange thing here is that it only happens on one of your PCs (and also in IE8, I thought this was corrected in IE7 and beyond). ¿Maybe this PC's IE have activated compatibility mode and it's behaving like an IE6.2?
Try to assign to you main container (the one with the scrolls) the following CSS options:
height:auto;
min-height:100%;
I don't remember the exact solution to this type of problems, but it came from those css attribs.
Let me know if this solves the issue, if not I'll look further into it.
ASKER
I'll give it a try in a little while - thanks for all of your help.
ASKER
I've taken a look at the html and the overflow command is only on the body tag (see below).
body {
overflow: scroll;
}
body {
overflow: scroll;
}
Without seeing the rest of the CSS it is hard to tell exactly, but you might try
body {
overflow: auto;
}
body {
overflow: auto;
}
ASKER
I'm pretty sure it is something on the PC - thanks for all of your help.
¿Has any other of the normal PCs the same browser and version running?