473,389 Members | 1,082 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,389 software developers and data experts.

Right margin NS 8 (Maximizing the useable screen width)

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;

Dec 20 '05 #1
3 2153
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
Dec 20 '05 #2
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
Dec 20 '05 #3
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)
Dec 20 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

22
by: Marek Mand | last post by:
How to create a functional *flexible* UL-menu list <div> <ul> <li><a href=""></li> <li><a href=""></li> <li><a href=""></li> </ul> </div> (working in IE, Mozilla1.6, Opera7 (or maybe even...
2
by: sylvian stone | last post by:
Hi, I'm trying to do something that has always been easy with tables - namely use a three column layout, and above the main layout, show three images - one on the absolute left, one on the absolute...
7
by: Alex | last post by:
Hi Everone, I need some advice on how to setup 4 columns where the outside two are absolute (120px) and the inner two (side by side) are relevent (Fluid) and change with the screen. Here's my...
12
by: Paul Mars | last post by:
How can I get the useable dimensions or coordinates of the working area of a form? All that I can find return the monitor screen area, but I need the usable area inside the open form. Not incl....
0
by: jonipony | last post by:
HELP: Float Left box is drifting to the right in ie! -------------------------- I need som HELP with my CSS coding! On the following web page my design falls apart at screen size 800 x 600...
1
by: mac | last post by:
Hi everyone I need your help just want to know why my webforms doest maximize i paste the script on the onload event <head runat="server"> <title>Untitled Page</title> </head>
1
by: rsteph | last post by:
I've got a page with a menu div that is 1066px wide by 150px high. And then I have some images that are 150px by 150px for the menu items. I put the images in a table that is set to 150x150px with a...
5
by: Timeri | last post by:
This is a bit confusing until you actually see what I'm talking about but the main content of my page is not growing with the right column. I want the main content (left/larger column) to take into...
3
by: Noorain | last post by:
I designed a site. i want to header,footer,left & right column fixed but body information only scrolling. this site screen to be 800/600 px. i designed this way but when i used position fixed all...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.