Off page scrollbars with div and css

Y

Yereth Jansen

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>
 
D

Disco Octopus

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;
}
 
Y

Yereth Jansen

Disco said:
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?
 
B

Barbara de Zoete

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 |
`-------------------------------------------------- --<--@ ------------'
 
Y

Yereth Jansen

Barbara said:
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.
 
Y

Yereth Jansen

Beauregard said:
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?
 
T

Tonnie

Yereth said:
... 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
 
Y

Yereth Jansen

Tonnie said:
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
 
B

Barbara de Zoete

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 |
`-------------------------------------------------- --<--@ ------------'
 
A

Adrienne

Gazing into my crystal ball I observed Yereth Jansen
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.
 
D

Disco Octopus

Yereth Jansen wrote :
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.
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!
 
Y

Yereth Jansen

Barbara said:
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
 
Y

Yereth Jansen

Adrienne said:
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
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,049
Latest member
Allen00Reed

Latest Threads

Top