Positioning and scrollbars: problem.

**iBram007** · Dec 13, 2003 09:07

I'm designing a site and it's the first time I'm using CSS postioning.
I have a little problem with the divs. If the page fits in a normal screen and there are no scrollbars needed, everything works fine. But if there are horizontal scrollbars needed, there are vertical scrollbars too. And the divs are all only 730px of width.

CSS:

HTML Code:

.bloklayout{
width: 730px;
background-color: #E4E4E4;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
margin-left: auto;
margin-right: auto;
}

HTML:

HTML Code:

<div class="bloklayout"> content... </div>

Any suggestions?

**Ronny** · Dec 13, 2003 10:01

I think adding "overflow-x: hidden" or something similar to this CSS will do the job. Good luck!

**iBram007** · Dec 13, 2003 10:28

Hey Ronny,
I've tested overflow-x, but that doesn't seem to work...

**Ronny** · Dec 13, 2003 10:30

Have you tested it with all the possible values? IT should work, I think.

**iBram007** · Dec 13, 2003 10:39

Yes, I did.

I've just uploaded a part of the site:
http://bramstart.be/sonara/
when you click on "over Bram"-button, you'll see my problem.

(this shop is fake, it's only a task for school)

**Paul O'B** · Dec 13, 2003 10:44

overflow-x,

overflow-x is proprietary ie code only (only works in IE).

Paul

Edit:

As mozilla isn't displaying a horizontal scrollbar anyway you could try : overflow-y:auto; instead.

**Ronny** · Dec 13, 2003 10:47

Ah Paul, glad you mentioned that... So what can he do? he need the vertical scrollbar but not the horizontal...

Bram, Nice site!

Try adding to the body {} of the content frame overflow-x: hidden; , and hope your users (or at least your teacher...) are using IE

**Paul O'B** · Dec 13, 2003 12:21

Hi,

I've just found out that the scrollbar problem is an IE6 thing and using overflow etc is not gouing to solve it.

You can read about it here:

http://www.howtocreate.co.uk/ie6pita.html

There is a solution using ie expressions.

However I have found another way in that if you force quirks mode then the problem also disappears. This can be achieved by using an html 4.01 doctype on all pages without a uri.
e.g.
Frameset page:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

Other pages:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

This will make the horizontal scrollbar diappear but you will have to work in quirks mode. This means you will have to account for the broken box model (and other things) which you would have to do anyway to support IE5 and 5.5.

If you want to validate as strict then you could always use the xhtml doctype with the xml prologue which forces quirks mode.

Hope that helps.

Paul

**iBram007** · Dec 13, 2003 12:38

The problem is that we have to work with frames en the HTML 4.01 Strict syntax...

btw, the site should be Opera/IE/NS enable...

Is there no other way to fix it?

**Paul O'B** · Dec 13, 2003 13:24

Is there no other way to fix it?

AFAIK only with the expressions method in the link I posted above.

Can't you use xhtml strict with the xml prologue. (By the way your existing doctypes are not correct anyway, you have mixed transitional and strict in the same declaration.)

Paul

**iBram007** · Dec 24, 2003 09:28

I found a solution:

Code:

<style>
body{ width: 97%; }
</style>

Thanks for all your help anyway.

**Paul O'B** · Dec 24, 2003 10:42

I found a solution:

Why didn't I see that? Sometimes the easiest solutions are the ones you overlook.

Glad you got it sorted anyway

BTW

The problem is that we have to work with frames en the HTML 4.01 Strict syntax...

As mentioned in my above posts you are working in transitional not strict as you have mixed the doctypes (validate your page and you will see i'm right).

Here are the correct doctpes for a strict frameset.

This doctype goes on the main frameset Page:

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

This doctype goes on all the other pages:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Paul

**iBram007** · Dec 24, 2003 10:49

Thanks Paul, but I've already fixed that issue

**Paul O'B** · Dec 24, 2003 11:35

Thanks Paul, but I've already fixed that issue

Ok Great - Sorry for mentioning it again

User Tag List

Thread: Positioning and scrollbars: problem.

Thread Tools

Display

Positioning and scrollbars: problem.

Bookmarks

Bookmarks

Posting Permissions