Right margin stuck on viewport edge

[Warren Post]

Here's a problem I've never seen before. On
<http://snow.prohosting.com/srcopan/anti/>, should the viewport width be
less than the width of the page's header, then the right margin becomes
stuck at the viewport's right edge. This is perhaps better observed than
described; try it yourself at narrow viewport widths and/or high zoom
levels.

I am guessing that I've mucked up something in the CSS's margin
settings, but I can't find it by trial and error. The CSS and
HTML validate, naturally.

Any clues, people? TIA,
Warren

[Els]

Warren Post wrote:

Here's a problem I've never seen before. On
<http://snow.prohosting.com/srcopan/anti/>, should the viewport width be
less than the width of the page's header, then the right margin becomes
stuck at the viewport's right edge. This is perhaps better observed than
described; try it yourself at narrow viewport widths and/or high zoom
levels.

Have a look in IE and in NS, and see the difference, both
problematic.
I saw you're using position:absolute in your stylesheet, but
without setting left or top values. What you want is better
and easier achievable using float instead of position:absolute.

Have a look at this construction on my site:
http://locusmeus.com/simple.html

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Els]

Els wrote:

Warren Post wrote:

Here's a problem I've never seen before. On
<http://snow.prohosting.com/srcopan/anti/>, should the viewport width be
less than the width of the page's header, then the right margin becomes
stuck at the viewport's right edge. This is perhaps better observed than
described; try it yourself at narrow viewport widths and/or high zoom
levels.

Have a look in IE and in NS, and see the difference, both problematic.
I saw you're using position:absolute in your stylesheet, but without
setting left or top values. What you want is better and easier
achievable using float instead of position:absolute.

Have a look at this construction on my site:
http://locusmeus.com/simple.html

sorry, should be http://locusmeus.com/html-css/simple.html

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Warren Post]

On Thu, 20 May 2004 13:56:00 -0600, Els wrote:

I saw you're using position:absolute in your stylesheet, but without
setting left or top values.
You're right; thanks.
What you want is better and easier
achievable using float instead of position:absolute.
I agree with your immediate point, but one of my objectives is to have the
page content (div.content) up front in the HTML and tuck the site
navigation stuff (div.navbar) at the end of the HTML, and yet still be
able to place div.navbar wherever I want it on the displayed page. I can
do this with position:absolute. If I use float, however, I have to place
div.navbar before div.content in the HTML. Of course, I'd love for someone
to prove me wrong.

As an aside for those who are wondering why I want content before site
navigation in the HTML, take a look at the page with style sheets turned
off. Jukka Korpela (who got me thinking about this issue in the first
place) has a fine essay on the subject on his website.
Have a look at this construction on my site:

http://locusmeus.com/html-css/simple.html

Yes, I see how you use float to position the navigation links on the left
without requiring absolute positioning (at the cost of having the navlinks
appear before content in the HTML). What I do not see is a solution to my
original problem, and in fact in my browsers your page has the same issue
that mine does: at high zoom levels or narrow viewport widths, the right
margin grows larger and larger, and text spills into the margin and
becomes illegible.

What seems to be happening in both our cases is that text (in my case,
p.header, in your case, <pre>) is spilling over the edge of the viewport
and off the right margin of the viewer space. Why the right margin does
not adjust for this I do not know, but a workaround I've just come across
is to specify overflow:hidden for p.header. My page's overflowing text
isn't critical and can be truncated.

So thank you for your comments; they were what got my mind unstuck and
helped me to find the workaround.

Warren

[Els]

Warren Post wrote:

On Thu, 20 May 2004 13:56:00 -0600, Els wrote:

What you want is better and easier
achievable using float instead of position:absolute.
I agree with your immediate point, but one of my objectives is to have the
page content (div.content) up front in the HTML and tuck the site
navigation stuff (div.navbar) at the end of the HTML, and yet still be
able to place div.navbar wherever I want it on the displayed page. I can
do this with position:absolute. If I use float, however, I have to place
div.navbar before div.content in the HTML. Of course, I'd love for someone
to prove me wrong.
Makes two of us.
I found the only way to use floats and have the navigation
after the content, is to know the width of the content. But
that defies the purpose of the floats, i.e. having flexible
widths.
As an aside for those who are wondering why I want content before site
navigation in the HTML, take a look at the page with style sheets turned
off. Jukka Korpela (who got me thinking about this issue in the first
place) has a fine essay on the subject on his website.
Have a look at this construction on my site:
http://locusmeus.com/html-css/simple.html

Yes, I see how you use float to position the navigation links on the left
without requiring absolute positioning (at the cost of having the navlinks
appear before content in the HTML). What I do not see is a solution to my
original problem, and in fact in my browsers your page has the same issue
that mine does: at high zoom levels or narrow viewport widths, the right
margin grows larger and larger, and text spills into the margin and
becomes illegible.

That's only on that page, because I used pre to show the css
of the page. Any other page on my site doesn't show that
problem.

Also, you say the right margin grows larger and larger.. I
don't see that. In which browser do you see that?
What seems to be happening in both our cases is that text (in my case,
p.header, in your case, <pre>) is spilling over the edge of the viewport
and off the right margin of the viewer space. Why the right margin does
not adjust for this I do not know, but a workaround I've just come across
is to specify overflow:hidden for p.header. My page's overflowing text
isn't critical and can be truncated.
Huh? You mean you have text on your page, that you'd rather
see inaccessible than overflowing into the margin?
So thank you for your comments; they were what got my mind unstuck and
helped me to find the workaround.

Cool ;-)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Neal]

On Sat, 22 May 2004 10:17:11 -0600, Warren Post <wp***@hondutel.hn> wrote:

one of my objectives is to have the
page content (div.content) up front in the HTML and tuck the site
navigation stuff (div.navbar) at the end of the HTML, and yet still be
able to place div.navbar wherever I want it on the displayed page. I can
do this with position:absolute. If I use float, however, I have to place
div.navbar before div.content in the HTML. Of course, I'd love for
someone
to prove me wrong.

Float the content instead?

#content {
float: right;
width: 75%;
}

#nav {
margin-right: 76%;
}

If you have more columns, though, this becomes a problem.

[Els]

Neal wrote:

On Sat, 22 May 2004 10:17:11 -0600, Warren Post <wp***@hondutel.hn> wrote:

one of my objectives is to have the
page content (div.content) up front in the HTML and tuck the site
navigation stuff (div.navbar) at the end of the HTML, and yet still be
able to place div.navbar wherever I want it on the displayed page. I can
do this with position:absolute. If I use float, however, I have to place
div.navbar before div.content in the HTML. Of course, I'd love for
someone
to prove me wrong.

Float the content instead?

#content {
float: right;
width: 75%;
}

#nav {
margin-right: 76%;
}

If you have more columns, though, this becomes a problem.

I find it a problem with just content and navigation
already, as it means the nav will alway have 25%, which
sometimes isn't enough, or sometimes is too much. Or else
the left and right margins are different, which I don't
think looks nice either.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Warren Post]

On Sun, 23 May 2004 12:48:53 -0600, Els wrote:

Warren Post wrote:

...in my browsers your page
has the same issue that mine does: at high zoom levels or narrow
viewport widths, the right margin grows larger and larger, and text
spills into the margin and becomes illegible.
That's only on that page, because I used pre to show the css of the
page. Any other page on my site doesn't show that problem.

True, and I suspect for the same reason that it happens on my pages: it
is nonwrapping text, so it keeps running to the right for as far as it
needs. But shouldn't the right margin accommodate this?
Also, you say the right margin grows larger and larger.. I don't see
that. In which browser do you see that?

Mozilla 1.2.1, Galeon 1.0.3, Phoenix 0.5, and Opera 6.0 B1, all on Linux
and all at high zoom levels (150% or more).

...a workaround I've
just come across is to specify overflow:hidden for p.header. My page's
overflowing text isn't critical and can be truncated.

Huh? You mean you have text on your page, that you'd rather see
inaccessible than overflowing into the margin?

The only text causing me problems is the decorative masthead I did with
text and CSS instead of the more common jpg image. All is says is the
domain name of the site, which is redundant given that if you can read
it, you already know the domain name.

I will further scandalize you be confessing that I did the same with the
navigation bar. I tried and failed to get the bar to expand in width
along with the text at higher zoom levels, so I gave up and simply hid
the overflow. I consider this a minor issue, as this only happens at high
zoom (200% or so), and even so the text is understandable, but I am the
first to admit that it really shouldn't work that way.

I of course agree with your larger point, which is that inaccessable text
is not a good idea. Surely there is a fix to these issues and not merely
my inelegant workarounds.

Warren

[Els]

Warren Post wrote:

On Sun, 23 May 2004 12:48:53 -0600, Els wrote:

Warren Post wrote:

...in my browsers your page
has the same issue that mine does: at high zoom levels or narrow
viewport widths, the right margin grows larger and larger, and text
spills into the margin and becomes illegible.
That's only on that page, because I used pre to show the css of the
page. Any other page on my site doesn't show that problem.

True, and I suspect for the same reason that it happens on my pages: it
is nonwrapping text, so it keeps running to the right for as far as it
needs. But shouldn't the right margin accommodate this?

How could it do that?

Also, you say the right margin grows larger and larger.. I don't see
that. In which browser do you see that?

Mozilla 1.2.1, Galeon 1.0.3, Phoenix 0.5, and Opera 6.0 B1, all on Linux
and all at high zoom levels (150% or more).

I see what you mean now. I thought the margin stayed the
same, but I forgot to scroll to the right ;-)
The only browser that doesn't do that (on my pc) is IE.
The only text causing me problems is the decorative masthead I did with
text and CSS instead of the more common jpg image. All is says is the
domain name of the site, which is redundant given that if you can read
it, you already know the domain name.
Okay, I understand that.
I will further scandalize you be confessing that I did the same with the
navigation bar.
Shame on you! ;-)
I tried and failed to get the bar to expand in width
along with the text at higher zoom levels, so I gave up and simply hid
the overflow. I consider this a minor issue, as this only happens at high
zoom (200% or so), and even so the text is understandable, but I am the
first to admit that it really shouldn't work that way.
It might not be high zoom, it might be narrow window. Or a
combination of a window that's slightly too narrow and a
zoom that's slightly too large.
I of course agree with your larger point, which is that inaccessable text
is not a good idea. Surely there is a fix to these issues and not merely
my inelegant workarounds.

Do you have a url of your page?
An expanding navigation bar can't be so difficult, I think?
--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -