Right margin NS 8 (Maximizing the useable screen width)

[stan]

I have code that produces 5 boxes across the screen width. So far I
have
only tested it in IE 6 and NS 8. It works in IE, but in NS I am not
able to
fit in the 5th box. I am using two different style sheets, one for IE
and
on e for NS. The box widths are set to 20%.

I would appreciate suggestions on how to get the 5 boxes to fit the
screen
width in NS (without reducing the widths of the boxes).

The test page URL as well as the CSS are listed below.

Stan
-------------------

The test URL is: http://www.capitalcityrealty.ca/boxes/

NS CSS:

HTML
{

PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 1em;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px;
FONT-FAMILY: Verdana, Arial, sans-serif
}
BODY
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 1em;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px;
FONT-FAMILY: Verdana, Arial, sans-serif
}
.clearall
{

CLEAR: both
}
.sectionhead
{

BORDER-RIGHT: gray thin solid;
border-style: ridge;
MARGIN-TOP: 4px;
FONT-SIZE: 10pt;
BACKGROUND: #ebebeb;
FLOAT: left;
MARGIN-LEFT: 0px;
OVERFLOW: auto;
BORDER-LEFT: gray thin solid;
WIDTH: 20%;
MARGIN-RIGHT: 0px;
BORDER-BOTTOM: gray thin solid;
HEIGHT: 14%;
TEXT-ALIGN: left
}

..sectionhead A {
FONT-WEIGHT: normal;
FONT-SIZE: 10pt;
MARGIN-LEFT: 2px;
COLOR: black;
TEXT-DECORATION: none
}

IE CSS:

html, body{
margin 0px;
padding: 0px;
overflow-y:hidden;

..clearall{
clear: both;
}
..sectionhead{
text-align: left;
background: #EBEBEB;
width: 20%;
height: 14%;
border-style:ridge;
border-width:thin;
border-color:white;
float: left;
margin-left:0px;
margin-right:0px;
margin-top:-16px;
overflow: auto
}
..sectionhead a{
color: black;

font-weight: normal;
margin-left:2px;
text-decoration:none;
}
..sectionhead
color: blue;

[Beauregard T. Shagnasty]

st**@firstport.com wrote:

I have code that produces 5 boxes across the screen width. So far I
have only tested it in IE 6 and NS 8. It works in IE, but in NS I am
not able to fit in the 5th box. I am using two different style
sheets, one for IE and on e for NS.
And what of the other 20% of your visitors?
I would appreciate suggestions on how to get the 5 boxes to fit the
screen width in NS (without reducing the widths of the boxes).

The test URL is: http://www.capitalcityrealty.ca/boxes/

<snip code>

In Firefox, all I see is an empty purple page.

Oooh. http://www.capitalcityrealty.ca/boxes/sniffer.js
445 lines of ancient code looking for ancient browser versions and
ancient operating systems. I don't see any mention of Mac or Linux, or
even modern Windows versions. And none of it will work for the 10% who
have JavaScript disabled, unavailable, or stripped by a corporate
firewall.

My advice? Drop that immediately.

You are missing a closing brace on: html, body{ ...
along with some other errors.
<http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A//www.capitalcityrealty.ca/boxes/>

and numerous HTML errors:
<http://validator.w3.org/check?verbose=1&uri=http%3A//www.capitalcityrealty.ca/boxes/>

New documents should be HTML 4.01 Strict, not Transitional.
<http://www.w3.org/QA/2002/04/valid-dtd-list.html>

Fix all the errors, and report back.

Looks like your main site is also under construction. You should
consider dropping the frames as well. Google for "frames are evil".

[Hint: purple is my default background color. You didn't assign one.]

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

[David Dorward]

st**@firstport.com wrote:

I have code that produces 5 boxes across the screen width.
You also seem to have a newsreader that does some /really/ odd things with
word wrapping, it made your post rather difficult to read. Could you get
that fixed please?
So far I have only tested it in IE 6 and NS 8.
Netscape 8 is based on a slightly older version of Firefox. I suggest
developing in the latest version (and then working out bugs that show up in
the older version).
It works in IE, but in NS I am not able to fit in the 5th box.
You have specified that the content width of each box should be 20% of the
space available, then you have added a border. 5x20% + borders is greater
then 100% and so the boxes won't fit.

You would see this in Internet Explorer, but your choice of Doctype (an
attempt at HTML 4.01 Transitional which doesn't actually match the spec)
triggers quirks mode, so it goes in to Quirks mode and reproduces a bug
seen in IE 5.5 and earlier (i.e. putting borders and padding inside the
width).

You don't actually conform to HTML 4.01 Transitional anyway.

As this looks like a new page, I suggest you forget about transitional and
go directly to strict. Use this Doctype:

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

.... which will trigger Standards mode and eliminate that bug in IE. You
should also make sure that your markup conforms to the standard:

http://validator.w3.org/check?verbos...alty.ca/boxes/
I am using two different style sheets, one for IE and on e for NS.
This is not a good idea. For a start - there are more browsers out there
then Internet Explorer and Netscape. Generally I find that one style sheet
for all browsers does the job, possibly with a second stylesheet for IE
that overrides or adds to certain things in the first to work around bugs
in Microsoft's browser.

Maintaining two completely separate stylesheets is more work then is
needed :)
FONT-SIZE: 10pt;

Most systems are not configured to correctly translate points into pixels,
also users of Internet Explorer have to jump through a great many hoops in
order to resize the text if you've set it to something they can't read. For
use on screen, pt units are best avoided altogether.

Font sizes are generally best set using percentages (with the body text
being 100% of the user's default).

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[Jim Moe]

st**@firstport.com wrote:

[...] I am using two different style sheets, one for IE
and
on e for NS.
Why?
I would appreciate suggestions on how to get the 5 boxes to fit the
screen
width in NS (without reducing the widths of the boxes).

That is what you must do.
IE includes the border width when it calculates the width for the block:
block_width = (20%w - 2*border_width) + 2*border_width.
NS and others add the border width
block_width = (20%w) + 2*border_width.
If you remove the side borders, the boxes fit. Or set the width to less
than 20%, say 19%.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)