SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    [Call me Bram] iBram007's Avatar
    Join Date
    Feb 2001
    Location
    Belgium
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning and scrollbars: problem.

    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?

  2. #2
    SitePoint Addict Ronny's Avatar
    Join Date
    Sep 2003
    Location
    Israel
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think adding "overflow-x: hidden" or something similar to this CSS will do the job. Good luck!

  3. #3
    [Call me Bram] iBram007's Avatar
    Join Date
    Feb 2001
    Location
    Belgium
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Ronny,
    I've tested overflow-x, but that doesn't seem to work...

  4. #4
    SitePoint Addict Ronny's Avatar
    Join Date
    Sep 2003
    Location
    Israel
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tested it with all the possible values? IT should work, I think.

  5. #5
    [Call me Bram] iBram007's Avatar
    Join Date
    Feb 2001
    Location
    Belgium
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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.

  7. #7
    SitePoint Addict Ronny's Avatar
    Join Date
    Sep 2003
    Location
    Israel
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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

  9. #9
    [Call me Bram] iBram007's Avatar
    Join Date
    Feb 2001
    Location
    Belgium
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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

  11. #11
    [Call me Bram] iBram007's Avatar
    Join Date
    Feb 2001
    Location
    Belgium
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found a solution:

    Code:
    <style>
    body{ width: 97%; }
    </style>
    Thanks for all your help anyway.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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

  13. #13
    [Call me Bram] iBram007's Avatar
    Join Date
    Feb 2001
    Location
    Belgium
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, but I've already fixed that issue

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Thanks Paul, but I've already fixed that issue
    Ok Great - Sorry for mentioning it again


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
  •