Off page scrollbars with div and css

Discussion in 'HTML' started by Yereth Jansen, May 9, 2005.

  1. Hi all,

    I am getting fairly desperate by now, trying to figure out why browsers
    cannot calculate the remainder of the page like I want it to be, namely
    the *actual visible* remainder of the page.

    It shows my scrollbars an inch or so outside the page, while of course
    it should be exactly at the window edge at all sides.

    I work in IE (it was not my choice!) and there it doesn't show correctly.

    Thanx in advance!
    Yereth Jansen

    Here is my code:


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

    <style>
    body {
    font-size: 12px;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    }


    div.previewInfoAssets {
    float: left;
    height: 100%;
    padding: 0px 2px 0px 2px;
    margin: 0px;
    background-color: menu;
    }

    div.previewInfoAssets fieldset {
    display: inline;
    height: 100%;
    margin: 0px;
    padding: 3px;
    width: inherit;
    }

    div.previewContent {
    border: inset 1px black;
    height: 100%;
    margin: 0px;
    padding: 5px;
    background-color: window;
    overflow: scroll;
    }

    div.container {
    background-color: menu;
    padding: 0px;
    margin: 0px;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <div class="previewInfoAssets">
    <fieldset>
    <legend>zoutuitbloei3.jpg</legend>
    <table>
    <tr>
    <td>Width:</td>
    <td>&nbsp;</td>
    <td></td>
    </tr>
    <tr>
    <td>Height:</td>
    <td>&nbsp;</td>
    <td></td>
    </tr>
    <tr>
    <td>Modified:</td>
    <td>&nbsp;</td>
    <td>1970-01-01, 01:01:25</td>
    </tr>
    <tr>
    <td>User Modified:</td>
    <td>&nbsp;</td>
    <td>Yereth</td>
    </tr>
    <tr>
    <td>Created:</td>
    <td>&nbsp;</td>
    <td>1970-01-01, 01:01:25</td>
    </tr>
    <tr>
    <td>Owner:</td>
    <td>&nbsp;</td>
    <td>Yereth</td>
    </tr>
    </table>
    </fieldset>
    </div>
    <div class="previewContent">
    <img
    src="http://www.wharfmedia.nl/ewyse/site/library/images/zoutuitbloei3.jpg"
    />
    </div>
    </div>
    </body>
    </html>
    Yereth Jansen, May 9, 2005
    #1
    1. Advertising

  2. Yereth Jansen wrote :
    > Hi all,
    >
    > I am getting fairly desperate by now, trying to figure out why browsers
    > cannot calculate the remainder of the page like I want it to be, namely the
    > *actual visible* remainder of the page.
    >
    > It shows my scrollbars an inch or so outside the page, while of course it
    > should be exactly at the window edge at all sides.
    >
    > I work in IE (it was not my choice!) and there it doesn't show correctly.
    >
    > Thanx in advance!
    > Yereth Jansen
    >
    > Here is my code:
    >.........


    i am not exactly sure of what you are asking. perhaps a picture of what
    you expect would help....

    if i am guessing correctly, would this change help in any way...


    change this.....


    body {
    font-size: 12px;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    }


    ..... to this.....

    body {
    font-size: 12px;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    soverflow: hidden;
    }

    --
    mmmmm, jerky : http://www.choicebeefjerky.com.au
    dance with children in the rain
    Disco Octopus, May 9, 2005
    #2
    1. Advertising

  3. Yereth Jansen

    Mark Parnell Guest

    Mark Parnell, May 10, 2005
    #3
  4. Disco Octopus wrote:
    > i am not exactly sure of what you are asking. perhaps a picture of what
    > you expect would help....


    If you'd take the code and open it in internet explorer then you would
    see that the page is not actually showing correctly, as part of it is
    showing 'outside' the page and I don't want the window itself to have
    scrollbars. I want my page to exactly fill the window.

    > if i am guessing correctly, would this change help in any way...


    Your guess is? Change overflow to soverflow so that the overflow will be
    ignored and the window will have scrollbars anyway? Very amusing.

    > change this.....
    >
    >
    > body {
    > font-size: 12px;
    > margin: 0px;
    > padding: 0px;
    > width: 100%;
    > height: 100%;
    > overflow: hidden;
    > }
    >
    >
    > .... to this.....
    >
    > body {
    > font-size: 12px;
    > margin: 0px;
    > padding: 0px;
    > width: 100%;
    > height: 100%;
    > soverflow: hidden;
    > }


    Are you trying to be funny?
    Yereth Jansen, May 10, 2005
    #4
  5. Mark Parnell wrote:
    > Previously in alt.html, Disco Octopus <> said:
    >
    >
    >>change this.....
    >>
    >>body {
    >> font-size: 12px;

    >
    > <snip>
    >
    >>.... to this.....

    >
    >
    > body {
    > font-size: 100%;
    >


    Another joke?
    Yereth Jansen, May 10, 2005
    #5
  6. Yereth Jansen wrote:
    > Mark Parnell wrote:
    >> body {
    >> font-size: 100%;

    >
    > Another joke?


    Haven't been reading here long, eh?

    --
    -bts
    -This space intentionally left blank.
    Beauregard T. Shagnasty, May 10, 2005
    #6
  7. On Tue, 10 May 2005 09:54:22 +0200, Yereth Jansen
    <> wrote:

    > Disco Octopus wrote:
    >> i am not exactly sure of what you are asking. perhaps a picture of what
    >> you expect would help....

    >
    > If you'd take the code and open it in internet explorer then you would
    > see that the page is not actually showing correctly,


    Had you put up a decent mockup or example somewhere on the internet and
    provided this group with a URL, no one had to take the code and copy/paste
    it anywhere. They could have just clicked.

    Furthermore, there are people who don't have Internet Explorer (for
    Windows I presume) running at all. Think about that for a moment.


    --
    ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
    | weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
    | webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
    |zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
    `-------------------------------------------------- --<--@ ------------'
    Barbara de Zoete, May 10, 2005
    #7
  8. Barbara de Zoete wrote:
    > Had you put up a decent mockup or example somewhere on the internet and
    > provided this group with a URL, no one had to take the code and
    > copy/paste it anywhere. They could have just clicked.


    You are right. Didn't really think of that, sorry.
    http://www.wharfmedia.nl/ewyse/site/test.htm

    > Furthermore, there are people who don't have Internet Explorer (for
    > Windows I presume) running at all. Think about that for a moment.


    lol! Of course there are such people. Haha. You actually think I believe
    everyone in this world uses IE? I would actually advise them otherwise.
    Fact is, that for this specific job, I *need to* and *have to* use IE. I
    quote myself:
    "I work in IE (it was not my choice!) and there it doesn't show correctly."

    So, for everyone who DOES have IE, please help me. Help would be greatly
    appreciated.

    Cheers,
    Yereth

    ps. Dankjewel Barbara, dat je me verteld dat niet iedereen IE gebruikt.
    Yereth Jansen, May 10, 2005
    #8
  9. Beauregard T. Shagnasty wrote:
    > Yereth Jansen wrote:
    >
    >> Mark Parnell wrote:
    >>
    >>> body {
    >>> font-size: 100%;

    >>
    >>
    >> Another joke?

    >
    >
    > Haven't been reading here long, eh?


    .... I assume this question is rhetorical. So now I have replied to you,
    maybe someone can explain to me what Beauregard and Mark think is so
    mightily amusing here?
    Yereth Jansen, May 10, 2005
    #9
  10. Yereth Jansen

    Tonnie Guest

    Yereth Jansen wrote:
    > Beauregard T. Shagnasty wrote:
    >
    >> Yereth Jansen wrote:
    >>
    >>> Mark Parnell wrote:
    >>>
    >>>> body {
    >>>> font-size: 100%;
    >>>
    >>>
    >>>
    >>> Another joke?

    >>
    >>
    >>
    >> Haven't been reading here long, eh?

    >
    >
    > ... I assume this question is rhetorical. So now I have replied to you,
    > maybe someone can explain to me what Beauregard and Mark think is so
    > mightily amusing here?


    It wasn't a joke, never ment to be one to.

    Don't use 'px'.

    Groet,

    Tonnie



    --
    Glas geschiedenis http://vision2form.nl/glashistorie.html
    Passie en talent http://vision2form.nl/young_talent.html
    Webontwerp http://vision2form.nl/webontwerp/index.html
    SEO gaat zo http://vision2form.nl/webontwerp/gevonden-worden.html
    Tonnie, May 10, 2005
    #10
  11. Tonnie wrote:
    > It wasn't a joke, never ment to be one to.
    >
    > Don't use 'px'.


    Well, in this case px with the font was definitely not the problem, but
    thanx anyway.

    Yereth
    Yereth Jansen, May 10, 2005
    #11
  12. On Mon, 09 May 2005 18:27:10 +0200, Yereth Jansen
    <> wrote:

    > I am getting fairly desperate by now, trying to figure out why browsers
    > cannot calculate the remainder of the page like I want it to be, namely
    > the *actual visible* remainder of the page.
    >
    > It shows my scrollbars an inch or so outside the page, while of course
    > it should be exactly at the window edge at all sides.
    >
    > I work in IE (it was not my choice!) and there it doesn't show correctly.
    >
    > <http://www.wharfmedia.nl/ewyse/site/test.htm>


    The problem is the box lengths of 100% (among other things). 100% Of what?
    Also note that the image gets cropped when I resize the viewport of my
    browser to a significantly smaller size than fullscreen. That of course is
    the result of your 'overflow:hidden' property on the body.

    One could just as easily say that the problem is IE.
    One could just as easily say that the problem is the effect you're trying
    to create. :)

    I'm not sure what it is you're trying to do? Why are the scrollbars that
    come automatically with the viewport if something is wider or higher than
    that viewport, not sufficient means for you goal?

    --
    ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
    | weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
    | webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
    |zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
    `-------------------------------------------------- --<--@ ------------'
    Barbara de Zoete, May 10, 2005
    #12
  13. Yereth Jansen

    Adrienne Guest

    Gazing into my crystal ball I observed Yereth Jansen
    <> writing in news:d5qlg1$qgj$:

    > Tonnie wrote:
    >> It wasn't a joke, never ment to be one to.
    >>
    >> Don't use 'px'.

    >
    > Well, in this case px with the font was definitely not the problem, but
    > thanx anyway.
    >
    > Yereth


    The reason px was mentioned is because pixels, points and centimeters
    should not be used for font sizing because they cannot be resized in IE.
    Percentages are a good choice because they can be resized, and IE does not
    have problems as it does with ems.

    --
    Adrienne Boswell
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
    Adrienne, May 10, 2005
    #13
  14. Yereth Jansen wrote :
    > Disco Octopus wrote:
    >> i am not exactly sure of what you are asking. perhaps a picture of what you
    >> expect would help....

    >
    > If you'd take the code and open it in internet explorer then you would see
    > that the page is not actually showing correctly, as part of it is showing
    > 'outside' the page and I don't want the window itself to have scrollbars. I
    > want my page to exactly fill the window.


    If you'd taken a moment to explain the desired result of what you
    wanted, then I would perhaps have taken a different approach.

    >
    >> if i am guessing correctly, would this change help in any way...

    >
    > Your guess is? Change overflow to soverflow so that the overflow will be
    > ignored and the window will have scrollbars anyway? Very amusing.


    Yes. i did mean to ignore the overflow.

    I guessed what I thought you were wanting. ... small minds perhaps?....

    ....and you're welcome yereth!

    --
    the beef jerky team :
    http://www.choicebeefjerky.com.au/distributors.html
    not a beef jerky web site : http://mycoolfish.com/vote.cmks
    freeball
    Disco Octopus, May 10, 2005
    #14
  15. Yereth Jansen

    Mark Parnell Guest

    Mark Parnell, May 11, 2005
    #15
  16. Barbara de Zoete wrote:
    > The problem is the box lengths of 100% (among other things). 100% Of
    > what? Also note that the image gets cropped when I resize the viewport
    > of my browser to a significantly smaller size than fullscreen. That of
    > course is the result of your 'overflow:hidden' property on the body.


    Well, the overflow hidden property is there because the overflow should
    apply on the area where the image is in. Unfortunately, I cannot seem to
    get internet explorer to handle that correctly. It moves the image area
    down if the window gets too small. The width is 100% because I want it
    the extend to the width of the screen. Am I forced to somehow reach out
    to tables again?

    > One could just as easily say that the problem is IE.
    > One could just as easily say that the problem is the effect you're
    > trying to create. :)


    Well, the effect I try to create should be possible, considering CSS2
    specs, but I know, IE is not exactly implementing CSS2 like it should.

    > I'm not sure what it is you're trying to do? Why are the scrollbars
    > that come automatically with the viewport if something is wider or
    > higher than that viewport, not sufficient means for you goal?


    Because I wanted the scrollbars to appear within the section where the
    image is showing. What we try to do here is to create a CMS (which is
    mostly done, but has still a few problems) that has sort-of a windows
    look-and-feel, as many customers desire this. That's why I do have quite
    specific demands in how it should look. The thing that annoys me most is
    that I seem not to be able to find out why the page does not exactly
    fills up the window, but is larger. I obviously have no clue how a page
    is build up and how I can *actually*, with more collumns or rows, get a
    full window page without some pixels not showing somehow. This is a very
    basic requirement, IMHO, and it just doesn't want to do that somehow. If
    you could just tell me how I can get the page aligned with the window
    size I would be very happy.

    Thanks for your time until now. I hope you are still willing to help me.

    Regards,
    Yereth
    Yereth Jansen, May 16, 2005
    #16
  17. Adrienne wrote:
    > The reason px was mentioned is because pixels, points and centimeters
    > should not be used for font sizing because they cannot be resized in IE.
    > Percentages are a good choice because they can be resized, and IE does not
    > have problems as it does with ems.


    I can understand that. I should do that differently, I know. My
    objection is more to the fact that people pretend like they're giving me
    a solution to the *actual* problem, while they just want to point out
    that I am doing something else not quite like I should.

    Cheers,
    Yereth
    Yereth Jansen, May 16, 2005
    #17
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Vijay
    Replies:
    0
    Views:
    467
    Vijay
    Nov 30, 2007
  2. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    728
  3. Herbert Meister

    IE oversize div and without scrollbars

    Herbert Meister, May 19, 2009, in forum: HTML
    Replies:
    12
    Views:
    3,103
    dorayme
    May 20, 2009
  4. Ciaran
    Replies:
    14
    Views:
    1,728
    dorayme
    Jun 27, 2009
  5. Replies:
    3
    Views:
    274
    GĂ©rard Talbot
    Aug 17, 2005
Loading...

Share This Page