Yet another problem with Netscape

W

Will Spencer

Before I make my query, I should state that I have validated my HTML with
W3C and WDG and that I have also validated my CSS with W3C. All three
tests return 100% scores.

The URL in question is http://www.fortliberty.org

It displays perfectly in Internet Explorer, and horribly in Netscape 7.1.

In Netscape 7.1, the center column displays at the bottom of the screen.

My CSS is stored in the external file
http://www.fortliberty.org/special.css

div.menu floats left. div.rightmenu floats right. div.body is supposed
to float left, but between div.menu and div.rightmenu.

On IE, it does. On Netscape 7.1, div.body doesn't start until *below*
div.menu and then it overwrites portions of div.rightmenu.

I would like to support this browser, which is currently utilized by 2.5%
of my sites visitors.

Assistance will be *much* appreciated!

Thanks. :)

Will
 
J

Jersey

Will Spencer said:
Before I make my query, I should state that I have validated my HTML
with W3C and WDG and that I have also validated my CSS with W3C. All
three tests return 100% scores.

I didn't validate shit, and I'll bet my website renders better than yours in
both browsers you mention below.

www.crampy.com
The URL in question is http://www.fortliberty.org

It displays perfectly in Internet Explorer, and horribly in Netscape
7.1.
Correct.

In Netscape 7.1, the center column displays at the bottom of the
screen.

Correct again. :-(
My CSS is stored in the external file
http://www.fortliberty.org/special.css

div.menu floats left. div.rightmenu floats right. div.body is
supposed to float left, but between div.menu and div.rightmenu.

On IE, it does. On Netscape 7.1, div.body doesn't start until *below*
div.menu and then it overwrites portions of div.rightmenu.

I would like to support this browser, which is currently utilized by
2.5% of my sites visitors.

Assistance will be *much* appreciated!

STUPID! Don't you know only like 85% of the people who hit you, use IE?

So naturally, you should optimize your site for Opera, Mozilla, and every
other obscure browser you can download and install within the next 24
hours..... Then post your question here again.

Nobody here cares about IE or Netscape. They're all *WAY* to intelligent
for such nonsense.

Some of 'em even post links to webpages that render a verticle scrollbar for
absolutely no reason at all! Cool huh?

Welcome. Glad I could help!
 
B

boclair

Will Spencer said:
Before I make my query, I should state that I have validated my HTML with
W3C and WDG and that I have also validated my CSS with W3C. All three
tests return 100% scores.

The URL in question is http://www.fortliberty.org

It displays perfectly in Internet Explorer, and horribly in Netscape 7.1.

In Netscape 7.1, the center column displays at the bottom of the screen.

My CSS is stored in the external file
http://www.fortliberty.org/special.css

Nest the floating divs in the content div

<div class="body">

<div class="menu">
......
</div>

<div class="rightmenu">
......
</div>

<H1>Welcome to the Fort!</H1>
.........
 
R

rf

Will Spencer wrote
Before I make my query, I should state that I have validated my HTML with
W3C and WDG and that I have also validated my CSS with W3C. All three
tests return 100% scores.

The URL in question is http://www.fortliberty.org

It displays perfectly in Internet Explorer, and horribly in Netscape 7.1.

You have floated the class="body" div but you have not specified a width. It
is up to the UA to determine the outcome of this. IE chooses to fit the div
in whatever canvas is left after the other two divs have been rendered. The
other browsers decide that the div will be as wide as its content, that is
100% of the canvas. Of course then it will not fit between the other two
divs and so gets shunted to the bottom.

Do not float that div. Just specify some margins.
 
W

Will Spencer

Do not float that div. Just specify some margins.

I don't want to specify margins.

I want the center div to resize to fit the users browser window as best as
possible.

Make sense?

Will
 
R

rf

Will Spencer wrote
I don't want to specify margins.

I want the center div to resize to fit the users browser window as best as
possible.

You miss the point.

The margins are to move the text slightly away from the left and right divs,
and also to make sure the middle content does not flow under the other two
divs.

http://users.bigpond.net.au/rf/fort/fort.htm

This is the standard way of doing this sort of layout, providing the IE
float: right bug does not bite you.
 
W

Will Spencer

Will Spencer wrote

You miss the point.

Ah... wait... yes... I believe I did miss your point. <blush>

I'll re-read your post and check out the URL you posted.

Thanks. :)

Will
 
W

Will Spencer

Do not float that div. Just specify some margins.

Sweet!

Perfect and quick!

I'm certain boclair's suggestion was a good one also, but this one was
a change to one CSS file and the other one was a change to every .shtml
file.

This never occured to me, because I am only now slowly (and unwillingly)
converting from using % widths on the left and right menus to using
absolute widths. (Not just on this site...)

Thanks for the great solution!

Will
 
R

rf

Will Spencer wrote
Sweet!

Perfect and quick!

I'm certain boclair's suggestion was a good one also, but this one was
a change to one CSS file and the other one was a change to every .shtml
file.

Good that it works :)
This never occured to me, because I am only now slowly (and unwillingly)
converting from using % widths on the left and right menus to using
absolute widths. (Not just on this site...)

<aside>
I recommend that you use em instead of pixels for the width of those menus.
When your viewer changes her font size you sort of want those menus to stay
proportinoally the same. Using fixed width means that the menu items start
to wordwrap as the font gets bigger, making it hard to tell exactly what the
items are, without mousing over them.

You probably use fixed width because you are using points for the font size.
IE is the only browser with a bug that stops you viewer from changing font
size when you do this. Many people *will* want to change thier font size.
10pt is, for me, way too small. I like about 16 pixels. If you were to
specify 100% for font size then you wouldl be choosing a font size that is
exactly what your viewer has chosen as her favourite.

I also note that you specify line-height. This mucks up IE when your viewer
chooses to ignore your font size. Line height is not ignored (another bug)
so the text lines overlap. Unless you have a very specialized reason you
should never have to specify line-height. The browser knows how tall the
lines should be :)

Your CSS is, in general, overburned with things like this. You specify font
size, colour, family etc in most of your rules. Don't. Specify these things
once, in a rule that selects the body. Elements within the body will inherit
these values. You also only have to change it in one place (within the CSS
file) if you change your mind.
 
B

boclair

Will Spencer said:
Sweet!

Perfect and quick!

I'm certain boclair's suggestion was a good one also, but this one was
a change to one CSS file and the other one was a change to every .shtml
file.

No it wasn't good.

I didn't read the css file carefully and hadn't noticed the unnecessary
float on the content div. When I did see "rf" had already advised

Louise
 
A

Arondelle

Will said:
I don't want to specify margins.

I want the center div to resize to fit the users browser window as best as
possible.

Don't float anything: nest your content divs inside a container div and
position them. You can use percents (%) to specify position and width,
where appropriate, and everything will resize as necessary.

For example:
http://www.red-death.com/~arondelle/home.html
The stylesheet is home.css

This works in IE, and works almost entirely in NS. NS has some issues
with margins and borders.

Arondelle
 
R

rf

Arondelle wrote

Oh my... how awful.

Checks HTML...

<quote>
<div id="left">
<div id="box" style="background-color:#D2ECD2;">
<font color="#003333">3D Graphics:</font>
<br><font size=-1><a
href="http://www.renderosity.com/">Renderosity</a></font>
</quote>

gark.

Checks CSS...

scrollbar-base-color:#FFF;

Hmmm.

position:relative;
position:relative;
position:absolute;
position:absolute;

position:relative;
position:relative;
position:absolute;

position, position, position applies to real estate advertisments, not web
sites.

The browser knows how to position things. Let it. This is probably why you
are having troubles with the only other browser you may have tested this
with, other than IE that is.

Lurk here for a while. You may pick up some information on how to fix the
above site :)
 
A

Arondelle

rf said:
Arondelle wrote
Oh my... how awful.

Ah, another Expert who knows everything and is always right. Glad you
love it. When can I expect the Coding Cops to come and take me away? :p

[snip]
The browser knows how to position things. Let it. This is probably why you
are having troubles with the only other browser you may have tested this
with, other than IE that is.

Lurk here for a while. You may pick up some information on how to fix the
above site :)

So far, the only person here from whom I've learned anything at all is
brucie.

Unfortunately for you, the page in question is just for my personal use
locally and, therefor, doesn't need "fixing." My desktop is just
covered with assorted tchatchky because it pleases me (I love nasty
wallpaper): I really don't give a rat's ass if you wouldn't like to use
it. Write your own home page if you don't like it. So, there! :p

Meanwhile:

I had been using floats to build the table, but it rendered the page
less than useless in Navigator. Position puts the columns where I want
them and they don't go popping all over the place if I resize the
browser. (This is important to me: when I browse other sites, I leave
the browser at full size so it's not an issue. Sometimes, though, I need
to downsize when I'm working from this local page or with multiple
instances.)

So, if stable columns aren't an issue, go ahead use float if you can
make them go where you want them to. (Provide some code that shows us
how it's done rather than just criticizing, please.) Once I understood
how position works, I've found it's a lot less of a headache to get
things precisely where I want them (which is the whole point of using
position or float in the first place, yes?) AND it seems to work better
across browsers. Naturally, YMMV -- especially if you have a lot
invested in one technique over all others.

Arondelle
 
C

C A Upsdell

Will Spencer said:
Before I make my query, I should state that I have validated my HTML with
W3C and WDG and that I have also validated my CSS with W3C. All three
tests return 100% scores.

The URL in question is http://www.fortliberty.org

It displays perfectly in Internet Explorer, and horribly in Netscape 7.1.

In Netscape 7.1, the center column displays at the bottom of the screen.

My CSS is stored in the external file
http://www.fortliberty.org/special.css

div.menu floats left. div.rightmenu floats right. div.body is supposed
to float left, but between div.menu and div.rightmenu.

On IE, it does. On Netscape 7.1, div.body doesn't start until *below*
div.menu and then it overwrites portions of div.rightmenu.

I would like to support this browser, which is currently utilized by 2.5%
of my sites visitors.

Assistance will be *much* appreciated!

Looks fine to me in Mozilla 1.7.1 and Netscape 7.1.
 
D

Daniel R. Tobias

rf said:
Jersey wrote

You must be using a different validator than the rest of us then :)

I've heard they've got some snazzy electronic toilets in Japan with all
sorts of weird functions... maybe those things will validate your shit?
 
R

rf

Arondelle
Ah, another Expert who knows everything and is always right.

No. I don't know everything and I am not always right. It this case
however...
So far, the only person here from whom I've learned anything at all is
brucie.

I'll pass that on to him when he returns from sabattical :)
Unfortunately for you, the page in question is just for my personal use
locally and, therefor, doesn't need "fixing."

If you are going to offer it up as an example of how to do things then yes
it does need fixing. At the moment it is not a good example. You yourself
even state that it does not work in non-IE browsers. Remember, there are
newbies here. They may just believe you and use your code.

With a little work it could become a quite good example of a three column
layout, better in fact than many found via google.

In any case your advice is incorrect. One of the standard ways of producing
a multi column page is to use float: left. It is *much* easier than
positioning stuff all over the place. It is also dead simple to add/remove
columns. Whack an extra column in the HTML and change one number in the CSS.
So, if stable columns aren't an issue, go ahead use float if you can
make them go where you want them to. (Provide some code that shows us
how it's done rather than just criticizing, please.)

Here ya go:

http://users.bigpond.net.au/rf/arondelle/

CSS at
view-source:http://users.bigpond.net.au/rf/arondelle/home.css

Tested in IE6, Mozilla and Opera.

Whose CSS is simpler and easier to understand/maintain?
 

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,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top