473,395 Members | 1,466 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,395 software developers and data experts.

netscape chops off my b's



Hi.

Why does netscape chop off the bottom of the b's in this example (see
below) ?

It seems to work fine in ie ? NOTE: My main goal is to be able to use
8 point text in my input fields.

Thanks. er*******@rcn.com

Here's the example:

<html><head><style>
input {height:12pt; font-size: 8pt}
body {font-size:8pt}
</style></head>
<body>
Why do these b's get chopped off on the bottom in netscape 7.01 ? :
<input type=text size=30 value="bbb">
</body></html>

Jul 20 '05 #1
12 2447
Eric Osman wrote:
Why does netscape chop off the bottom of the b's in this example (see
below) ?

It seems to work fine in ie ? NOTE: My main goal is to be able to use
8 point text in my input fields.
Using pt units for font size is a poor choice on the WWW, especially at such
small sizes. There's plenty that has been said about that in here before,
use Google for details. In short, your visitor knows better than you do
what size text they prefer to read, and overriding their decision may well
make the site unreadable for them. Stick to relative units like em or %,
and don't go far below normal.

Furthermore, if you are setting a height on input elements with pt units,
then things are going to get even worse when your visitors are using
browsers that allow them to ignore your font sizes (the very reason those
features are in the browsers is because of authors doing exactly what you
are doing!).

<html>


I know I'm beginning to sound like a stuck record, but *please* validate
your code before asking for help. It saves your time and ours.

In this particular case, the validator would have told you off for not
having a doctype. Not having a doctype kicks the browser into "Quirks
mode". "Quirks mode" means the browser assumes you aren't coding for
standards, and intentionally screws up the rendering of your code.

This "bug" appears to be one of those intentional misrenderings. Code to
standards, and the "bug" disappears. Or, if you are a masochist and want
to stay with quirks mode, you can work around it by setting a border
explicitly on that element.

(Another to add to the "standards == future compatibility" list).

--
Jim Dabell

Jul 20 '05 #2

One validator I found in some old email is activated by putting the
following code snippet on your web page and then clicking on either the
html or the css link.

However, unfortunately even though I'm running an apache web server on
my home machine, when I click on the link, the validator site says it
can't access my page. This is a drag, because if I have to copy the
page onto a remote web server with ftp, then every time I fix something
that the validator complains about, i'll have to ftp the new file to the
remote web server, which is much more tedious than merely running the
page on my local apache server.

Any of you know about apache web server and why it might not be allowing
more sites to access my pages here on my local apache web server ?
Hmmm, I wonder if my isp (which is rcn.com) is disallowing access to my
local web server ????

Anyway, here's the validator snippet that I found:

<a
href="http://validator.w3.org/check/referer"><img
style="border:0; width:88px; height:31px"

src="http://validator.w3.org/images/vh40"
alt="Valid HTML
4.0!" height=31 width=88></a><br>
<a
href="http://jigsaw.w3.org/css-validator/check/referer"><img
style="border:0; width:88px; height:31px"

src="http://jigsaw.w3.org/css-validator/images/vcss.gif"
alt="Valid
CSS!"></a>

Eric Osman wrote:

Jim, thanks for your response.

Any of the following, however, would have made your response more useful:

o Some specifics about "validating" the code. Is this done with a
particular web site ? If so, can you please say which one ? Or is it
done with a tool ? How much money ? Or are you talking about manual
validation ?

o A working example that solves the problem would help too, or at
least some hints about what to change in my code to fix it.

o You mention not using point sizes. I'm willing to use different
units if need be. In my case, the reason for wanting to choose some
small size is that the form was converted from a paper form that
originally fit on two sides of a piece of paper. I'm trying very hard
to make the web version of the form print on only two sides of a paper
when "print" is chosen in the browser.

/Eric
Jim Dabell wrote:
Eric Osman wrote:

Why does netscape chop off the bottom of the b's in this example (see
below) ?

It seems to work fine in ie ? NOTE: My main goal is to be able to use
8 point text in my input fields.


Using pt units for font size is a poor choice on the WWW, especially
at such
small sizes. There's plenty that has been said about that in here
before,
use Google for details. In short, your visitor knows better than you do
what size text they prefer to read, and overriding their decision may
well
make the site unreadable for them. Stick to relative units like em or %,
and don't go far below normal.

Furthermore, if you are setting a height on input elements with pt units,
then things are going to get even worse when your visitors are using
browsers that allow them to ignore your font sizes (the very reason those
features are in the browsers is because of authors doing exactly what you
are doing!).
<html>


I know I'm beginning to sound like a stuck record, but *please* validate
your code before asking for help. It saves your time and ours.

In this particular case, the validator would have told you off for not
having a doctype. Not having a doctype kicks the browser into "Quirks
mode". "Quirks mode" means the browser assumes you aren't coding for
standards, and intentionally screws up the rendering of your code.

This "bug" appears to be one of those intentional misrenderings. Code to
standards, and the "bug" disappears. Or, if you are a masochist and want
to stay with quirks mode, you can work around it by setting a border
explicitly on that element.

(Another to add to the "standards == future compatibility" list).


Jul 20 '05 #3
Eric Osman wrote:
However, unfortunately even though I'm running an apache web server on
my home machine, when I click on the link, the validator site says it
can't access my page.
The validator can't access your localhost (127.0.0.1). You have to
figure out the IP you received from your ISP (on Windows it's ipconfig
or winipcfg for example). If your server allows connections from
remote hosts then it should work with that IP.
This is a drag, because if I have to copy the
page onto a remote web server with ftp, then every time I fix something
that the validator complains about, i'll have to ftp the new file to the
remote web server, which is much more tedious than merely running the
page on my local apache server.


Use the Opera browser. With ctrl-alt-v you can send the whole page to
the W3C-validator without uploading it to your remote server (there's
still a problem with recent Opera when using content negotiation, but
nevertheless it should be a good starting point).

Micha
Jul 20 '05 #4
Eric Osman wrote:
By the way, one of the things I'd like to know, is what style sheet
features will let me reduce the amount of white space between lines of
text ? That would help too.
To control space between paragraphs you can adjust the margins of the
p-element, e.g.

p {margin: .5em 0;} /* reduces top & bottom margins to half fontsize */

8.3 Margin properties: 'margin-top', 'margin-right', ...
http://www.w3.org/TR/REC-CSS2/box.ht...gin-properties

For the normal text you may adjust the line-height as well.

p {line-height: 1em;}

10.8 Line height calculations ...
http://www.w3.org/TR/REC-CSS2/visudet.html#line-height
o Someone mentioned "@media print" . Is there a way I can use
that to perhaps apply a different set of parameters to the page when it
is printed as when it is just displayed ?
Exactly.
perhaps you could show me an example.


Put something like this in the head of your document:

<link rel="stylesheet" type="text/css" media="screen,projection" href="default.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

(It's just one way of using media types.)

With the above you specify two stylesheets, one for screen and
projection (at least Opera uses this media type in fullscreen mode)
and a second one for printing.

In this print.css you may

* disable all elements that shouldn't be printed, e.g. navigation
bars, e.g.

#nav {display: none;}

* set printer friendly colors and backgrounds, e.g.

body (background: white; color: black;}

* adjust line-heights

* set printer friendly fontsizes

There are a lot of more useful things you can do with paged media
(if the browser supports it, try it with Opera or Mozilla).

13 Paged media
http://www.w3.org/TR/REC-CSS2/page.html

HTH
Micha
Jul 20 '05 #5
Eric Osman wrote:
o Some specifics about "validating" the code. Is this done with a
particular web site ? If so, can you please say which one ? Or is it
done with a tool ? How much money ? Or are you talking about manual
validation ?
My apologies, I usually include a link to the W3C validator. I see Michael
has done this now. I believe there are several validators you can download
and use on a Windows desktop, if you prefer this. One URL I saw recently
was: <URL:http://www.arealvalidator.com/>.

Basically, SGML and XML applications, such as HTML and XHTML, have a formal,
machine-readable definition. Documents written in these languages can be
checked for errors by a program. This is known as validation (because you
are determining whether a document is valid or not).

o A working example that solves the problem would help too, or at
least some hints about what to change in my code to fix it.
There are different "flavours" of HTML. There's common and garden tag soup,
which doesn't conform to any standards, there's HTML 4.01, and there's
XHTML 1.0. The latter two also come in two different "flavours" -
Transitional and Strict. Transitional is the old-fashioned, backwards
compatible version, and Strict is what should be used for new documents.
There are other "flavours" as well, but they can be safely ignored for now.

At the moment, you are using tag soup. By adding a doctype line to the top
of your document, you will claim that your documents are conforming to a
certain specification - you'll probably want to choose HTML 4.01 Strict or
XHTML 1.0 Strict for this. The relevant doctypes are mentioned in each
specification:
<URL:http://www.w3.org/TR/html401/>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
More information about doctype switching can be found here:

<URL:http://gutfeldt.ch/matthias/articles/doctypeswitch.html>

o You mention not using point sizes. I'm willing to use different
units if need be. In my case, the reason for wanting to choose some
small size is that the form was converted from a paper form that
originally fit on two sides of a piece of paper. I'm trying very hard
to make the web version of the form print on only two sides of a paper
when "print" is chosen in the browser.


Well there's really no guarantee of any particular presentation with CSS.
If it's absolutely crucial that it fit on two sides of paper when printed,
you might want to consider using PDF. Otherwise, as Michael has suggested,
provide a separate print stylesheet. This will allow you to keep a
friendly presentation for on-screen viewing, and a constrained presentation
for the printed version.

You might also want to read this:

<URL:http://allmyfaqs.com/faq.pl?How_to_post>

--
Jim Dabell

Jul 20 '05 #6
Hi!

Eric Osman <er*******@rcn.com> wrote in message
news:3F**************@rcn.com...
Why does netscape chop off the bottom of the b's in this example

input {height:12pt; font-size: 8pt}
body {font-size:8pt}

<input type=text size=30 value="bbb">
Because the line height and other parts of the input at 8pt text is more
than 12pt in Netscape but isn't in IE.

An essential feature of the web is that it's content can be output in any
way imaginable - this means that the height of the content of the input can
be absolutely any length, from an angstrom to an astronomical unit* CSS is
specifically designed to make it easy to account for this. Don't fight
against it by using absoulute units.

In this case the most simple way to control the element is to use
height:auto, or not use a height rule at all.

Control the spacing inside the border using padding:. Control the border
with border:. Control the spacing outside the border with margin:. Control
the positioning of the element within the rest of the line, if there is one,
with line-height: and vertical-align:.
http://www.w3.org/TR/REC-CSS2/visudet.html#line-height
My main goal is to be able to use 8 point text in my input fields.


Well then I suggest that if you know the size and resolution of your output
media that you publish in postscript. If you don't, don't pretend you do.
* 2.83x10^-5pt to 4.24x10^14pt

Jul 20 '05 #7
On Tue, 29 Jul 2003 06:23:06 +0200, Michael Fesser <ne*****@gmx.net>
wrote:
Eric Osman wrote:
o Someone mentioned "@media print" . Is there a way I can use
that to perhaps apply a different set of parameters to the page when it
is printed as when it is just displayed ?
Put something like this in the head of your document:

<link rel="stylesheet" type="text/css" media="screen,projection" href="default.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

(It's just one way of using media types.)


If you only want to have a small number of things in the print version
that differ from the screen version, it's probably better to stick to
one stylesheet and add to the bottom something like the following:
@media print
{ BODY { font-size: 11pt; }
#footer { display: none; }
}
--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #8
Hi!

Eric Osman <er*******@rcn.com> wrote in message
news:3F**************@rcn.com...

> Control the spacing outside the border with margin:

One would want to change the space around entire paragraphs, or/and
change the space around individual lines in a paragraph.

Consider this style:

p {margin: 0.1in}

If that style controls one of the above two things, how to control the
other ?


p {
margin:3em;
line-height:2em;
}

lines in the paragraph will be widely spaced.

p {
margin:3em;
line-height:1.2em;
}
em {
line-height:2em;
}

<p>foo foo foo foo foo foo foo
foo foo foo foo foo foo foo
foo <em>bar</em>foo foo foo
foo foo foo foo foo foo foo
</p>

The line that bar falls in will have greater gaps around it than the others.



Jul 20 '05 #9
Tim
On Mon, 28 Jul 2003 22:41:40 -0400,
Eric Osman <er*******@rcn.com> wrote:
However, unfortunately even though I'm running an apache web server on
my home machine, when I click on the link, the validator site says it
can't access my page. This is a drag, because if I have to copy the
page onto a remote web server with ftp, then every time I fix something
that the validator complains about, i'll have to ftp the new file to the
remote web server, which is much more tedious than merely running the
page on my local apache server.

Any of you know about apache web server and why it might not be allowing
more sites to access my pages here on my local apache web server ?
Hmmm, I wonder if my isp (which is rcn.com) is disallowing access to my
local web server ????


There are validators which allow you to cut and paste code snippets into
a webform, and validate that way (useful for quick checking of a
problem).

But you haven't said why it can't connect. It could be that you didn't
give it the internet address for your server, or that your ISP is
blocking the normal port (80). My ISP blocks port 80 (annoying twits),
so I have my Apache set to listen to port 80 and another port that they
don't block.

--
My "from" address is totally fake. The reply-to address is real, but
may be only temporary. Reply to usenet postings in the same place as
you read the message you're replying to.
Jul 20 '05 #10
In article <3F**************@rcn.com>, one of infinite monkeys
at the keyboard of Eric Osman <er*******@rcn.com> wrote:
However, unfortunately even though I'm running an apache web server on
my home machine, when I click on the link, the validator site says it
can't access my page.


Of course it can't - you're not sending it a globally-valid URL.

If you want to validate regularly, the best solution is to install
a local validator from one of
http://www.webthing.com/software/validator-lite/
http://www.arealvalidator.com/

--
Nick Kew

In urgent need of paying work - see http://www.webthing.com/~nick/cv.html
Jul 20 '05 #11
Nick Kew wrote:
In article <3F**************@rcn.com>, one of infinite monkeys
at the keyboard of Eric Osman <er*******@rcn.com> wrote:
However, unfortunately even though I'm running an apache web server
on my home machine, when I click on the link, the validator site
says it can't access my page.


Of course it can't - you're not sending it a globally-valid URL.

If you want to validate regularly, the best solution is to install
a local validator from one of
http://www.webthing.com/software/validator-lite/
http://www.arealvalidator.com/


Or install Opera and use [Ctrl]+[Alt]+[V] when online to validate your
pages. This brings your page right to the W3C validator and any mistakes
right back to you.

--
Groet,
Barbara

http://home.wanadoo.nl/b.de.zoete/html/vliegen.html
Jul 20 '05 #12
In article <bg************@ID-52872.news.uni-berlin.de>,
b_********@hotmail.com says...
Nick Kew wrote:
In article <3F**************@rcn.com>, one of infinite monkeys
at the keyboard of Eric Osman <er*******@rcn.com> wrote:
However, unfortunately even though I'm running an apache web server
on my home machine, when I click on the link, the validator site
says it can't access my page.
.... If you want to validate regularly, the best solution is to install
a local validator from one of
http://www.webthing.com/software/validator-lite/
http://www.arealvalidator.com/


Or install Opera and use [Ctrl]+[Alt]+[V] when online to validate your

....
Or use Mozilla & install checky which gives you a right-click menu with
all sorts of validation options:

http://checky.mozdev.org/Install/

Not quite as quick & cool as Opera's version, but with more options.
Which is one of several reasons I usually have both browsers open.
Jul 20 '05 #13

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

Similar topics

1
by: Sims | last post by:
Hi, if i use... // php $info = getenv("HTTP_USER_AGENT"); // I noticed that Mozzila and Netscape <6(?) both use the same Agent. // so i was thinking of if...
1
by: mark.reichman | last post by:
First off.. Thanks to Grant Wagner for help in a previous thread related to this one. I am at a total loss... I have multiple fields in a form with the same name. Lets call the fields with the...
9
by: rez | last post by:
I find it rather frustrating that Netscape 4.x is "no longer supported:" http://help.netscape.com/products/client/communicator/reflib.html Same seems true with IE. How am I ever supposed to...
2
by: SabMan | last post by:
I understand that document.layers is no longer supported in Netscape 7.1 but I am not sure on how to fix the code so that it will work with Netscape 7.1. I understand that document.all is no...
26
by: Roger Desparois | last post by:
Hi, I need help : I found the simplest and most precise way to open and close submenu layers. it works perfectly with IE, but for some odd reason NS won't recognize it. Can anyone tell me why...
6
by: qqq | last post by:
I'm a relative newbie... I'd like my site to support Netscape browsers. For a page I set 'TargetSchema' to 'IE 3.02/Netscape 3'. When I insert label or textbox web controls on the page, they...
10
by: News | last post by:
I have a page up trying to learn how to ID a browser and other info. http://wyght.com/warren/testPos.html here is the code <script type = "text/javascript"> var space = ", "; var name...
4
by: Nathan Sokalski | last post by:
I was testing out a page of mine that displays the information from Page.Request.Browser. It works exactly as I expected in Internet Explorer and Netscape 4.75 (I didn't expect much in Netscape...
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: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
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...
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
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

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.