CSS layout shows bars on lower resolution

I would appreciate some comments on a test site
http://www.flipside.co.uk/~iconboy/test/
Using a CSS template but on lower resolutions, I get scrollbars (where
the white meets the grey on the left) which I do not want.
Any help appreciated as to why this is.
Thanks

I would appreciate some comments on a test site
http://www.flipside.co.uk/~iconboy/test/
Using a CSS template but on lower resolutions, I get scrollbars (where
the white meets the grey on the left) which I do not want.
Any help appreciated as to why this is.
Thanks

Using Netscape 7.2 I don't see that. I'm on high resolution, but shrunk
the window to give the browser fewer bits to work with. What I =do=
see, which is highly undesirable, is that the navigation pane on the
left insists stubbornly on remaining full width while the content alone
shrinks. Then, if I try to use the (ack) horizontal scrollbar to put
that unwanted navigation pane off the window, it won't go. I have to
scroll left and right to read the content.

bad bad bad

I don't see the problem in the source, but I assume it's hidden here:
<link rel="stylesheet" href="msp.css" type="text/css" />
where the stylesheet specifies a pixel value for width. Don't do that!
Use percents. Ems if you must.

When I shrink the window to the point where the left (menu) pane is too
small to show the content fully, then scrollbars appear for that pane.
Given the fact that the master scrollbars only work for the content
pane, this is desirable behaviour, as it is the only way for the user to
see the rest of the menu. Is this what you are referring to?

Jose
--
Money: what you need when you run out of brains.
for Email, make the obvious change in the address.

Jose wrote:

Use percents. Ems if you must.

Thanks for the info. Would you be able to help me with *where* I change
the pixels to % as I am still new to all this CSS. Any help appreciated.

Here is the CSS:
---
/* andreas07 - an open source xhtml/css website layout by Andreas
Viklund - http://andreasviklund.com . Free to use for any purpose as
long as the proper credits are given for the original design work.

Version: 1.1, November 28, 2005 */

/**************** Page and tag styles ****************/

body
{margin:0; padding:0; color:#303030; background:#fafafa
url(images/bodybg.gif) top left repeat-y; font:76%
Verdana,Tahoma,sans-serif;}

ul
{list-style:circle; margin:15px 0 20px 0; font-size:0.9em;}

li
{margin:0 0 8px 25px;}

a
{color:#008fd8; font-weight:bold; text-decoration:none;}

a:hover
{color:#505050; text-decoration:underline;}

img
{float:center; margin:0 15px 15px 0; padding:1px; border:0px solid
#d0d0d0;}

a img
{border-color:#008fd8;}

a img:hover
{background:#008fd8; border-color:#008fd8;}

/**************** Sidebar area styles ****************/

#sidebar
{position:absolute; top:0; left:0; width: 220px; height:100%;
overflow:auto; background:#e0e0e0 url(images/sidebarbg.gif) top right
repeat-y; text-align:right;}

body > #sidebar
{position:fixed;}

#sidebar h1
{margin:20px 18px 0 5px; color:#008fd8; font-size:1.6em;
letter-spacing:-2px; text-align:right;}

#sidebar h2, #sidebar h3
{margin:0 20px 18px 5px; color:#628600; font-size:1.1em;
font-weight:bold; letter-spacing:-1px; text-align:right;}

#sidebar h3
{margin:20px 18px 4px 5px; color:#606060;}

#sidebar p
{margin:0 20px 18px 5px; color:#606060; font-size:0.8em;}

#sidebar a
{color:#808080;
}

/**************** Navigation menu styles ****************/

#menu a
{display:block; width: 202px; padding:5px 18px 5px 0; color:#606060;
background:#e0e0e0 url(images/sidebarbg.gif) top right repeat-y;
font-size:1.8em; font-weight:normal; text-decoration:none;
letter-spacing:-2px;}

#menu a:hover
{color:#303030; background:#f0f0f0 url(images/sidebarbg.gif) top right
repeat-y;}

#menu a.active
{padding:5px 18px 5px 0; background:#fafafa; border-top:2px solid
#c0c0c0; border-bottom:2px solid #c0c0c0;}

#menu a.active:hover
{color:#505050; background:#fafafa;}

/**************** Content area styles ****************/

#content
{width: 520px; margin:0 0 0 240px; padding:20px 0; background:#fafafa;}

#content p
{margin:0 0 20px 0; line-height:1.5em;}

#content h1
{margin:0; color:#008fd8; font-size:4em; letter-spacing:-5px;
text-align:center;}

#content h2
{margin:0; color:#808080; font-weight:normal; font-size:2.5em;
letter-spacing:-2px; text-align:center;}

#content h3
{clear:both; margin:30px 0 10px 0; color:#008fd8; font-weight:normal;
font-size: 2em; letter-spacing:-2px;}

©® wrote:

body
{margin:0; padding:0; color:#303030; background:#fafafa
url(images/bodybg.gif) top left repeat-y; font:76%
Verdana,Tahoma,sans-serif;}

Oft discussed in these groups:

Set body and content font size to 100%;
Drop Verdana.

76% is only three-quarters of my default size; I probably couldn't read
it. If the font looks too big in your browser, change *your* default
size but leave mine alone. You also have a menu size there of 1.8em.
Once you change the 100% above, you will be able to drop the font size
on the menu.

About Verdana:
http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

--
-bts
-Warning: I brake for lawn deer

Would you be able to help me with *where* I change
the pixels to % as I am still new to all this CSS.

Dunno. I'm new to CSS too. But that won't stop me. This is Usenet.

Basically, wherever you use px, don't. If you want space based on the
text (for example, margins), use ems. If you want space based on the
entire window (for example, column width), use percent.

Just a quick stab:

ul
{list-style:circle; margin:15px 0 20px 0; font-size:0.9em;}

instead of 15px and 20px, try 1em or 2em (or maybe 1.5em). Whatever
value you choose will depend on the size of your em, but once you have
settled on an "exchange rate", all the spacing will become relative to
the font size, and will increase or decrease as the user changes the
font size in their browser.

li
{margin:0 0 8px 25px;}

Same here. instead of 8px and 25px, try 1em and 4em. This way the
margin size will expand and shrink with the font size, should the user
need to or want to enlarge or shrink it.

img
{float:center; margin:0 15px 15px 0; padding:1px; border:0px solid
#d0d0d0;}

15px -> 2em. 1px maybe could stay as is (why is it there?)

#sidebar
{position:absolute; top:0; left:0; width: 220px; height:100%;
overflow:auto; background:#e0e0e0 url(images/sidebarbg.gif) top right
repeat-y; text-align:right;}

Here's the killer. In this case, the sidebar width (220px) is probably
based on the size of YOUR window. I'm guessing you are using an 800x600
display? Other people aren't, and the page will still insist on 220
pixels even if that's all the user offers your site for the entire page.
Change it to 25% so that the column changes width as the window does.

#sidebar h1
{margin:20px 18px 0 5px; color:#008fd8; font-size:1.6em;
letter-spacing:-2px; text-align:right;}

20px -> 3em... etc. Keep hunting down px values and replacing them!

#menu a
{display:block; width: 202px; padding:5px 18px 5px 0; color:#606060;
background:#e0e0e0 url(images/sidebarbg.gif) top right repeat-y;
font-size:1.8em; font-weight:normal; text-decoration:none;
letter-spacing:-2px;}

202px should be replaced by a percent (20% for instance) and the padding
should be expressed in ems. Letter spacing should also be expressed in
ems, so that the spacing scales with the text.

Skipping a bit...

#content
{width: 520px; margin:0 0 0 240px; padding:20px 0; background:#fafafa;}

The width should be in percent... maybe 70% or so. You'll have to
decide based on your layout and content. Widths should all add up to
100%. The padding should probably be in ems.

Just go through the whole stylesheet this way, and see how it works out.

Jose
--
Money: what you need when you run out of brains.
for Email, make the obvious change in the address.

On Tue, 14 Feb 2006, Jose wrote:

Dunno. I'm new to CSS too. But that won't stop me. This is Usenet.

Basically, wherever you use px, don't.

Sort-of, and the rest of the reasoning looked OK. But px units aren't
always wrong: they're useful for border widths; also, as far as
margins and padding are concerned, em units can be good, or px units
can be good, etc., depending somewhat on context.

And in practical terms, if an object is pixel-sized (as images
generally are) then asking the browser to re-size them in non-pixel
units can produce suboptimal results. Just don't go making images of
an unreasonable width and demanding that they fit into the reader's
window - that's rude (BBC news, to take an example, sticks what
appears to be a completely unnecessary transparent gif specified to be
of height 1px and width 760px, which I rate as distinctly rude - along
with a load of other old-fashioned clutter that could be swept away
with a proper CSS-based design, leaving a much more flexible and
user-friendly page IMNSHO).

Having said that: there *are* some uses for resizing an image in
em units - it depends on circumstances.

If you want space based on the text (for example, margins), use ems.

See, the problem with this is that if someone is visually impaired and
needs to crank up the text size way above normal, then you're going to
also inflate the margins - and, as a result, waste a lot of their
precious display canvas. The same goes for padding. So think about
how your design is going to behave as the text size is changed, as
well as how it behaves as the canvas size is changed.

If you set margins which don't inflate with the size of the text, the
results should still be usable, and make more efficient use of the
canvas. You might finally decide that 1em was the right choice, but at
least you'll have thought about it.

h t h

If you want space based on the text (for example, margins), use ems.


See, the problem with this is that if someone is visually impaired and
needs to crank up the text size way above normal, then you're going to
also inflate the margins - and, as a result, waste a lot of their
precious display canvas. The same goes for padding. So think about
how your design is going to behave as the text size is changed, as
well as how it behaves as the canvas size is changed.

You are correct - and thinking about the question is the key (rather
than just putting px values based on the webmaster's monitor). Now, if
somebody needs to increase the text size, and does not want to increase
the margins, then why are they there to begin with? I'd presume
legibility, but if the user needs large type to be legible, they
probably also need a wider margin too.

Sometimes px units are the right ones. But I'd rather abolish px units
entirely than have the mess so many webmasters make of them.

Jose
--
Money: what you need when you run out of brains.
for Email, make the obvious change in the address.