I have included my .css script below.
This is my first attempt at CSS.
The pages look fine through they eyes of PC browsers and NS on the
Mac.
On IE and Safari for Mac all hell breaks loose.
I am getting huge amounts of white space between lines probably
comparable to about 5-10 line breaks.
Can anybody see a problem with the below script that could be causing
this?
I have removed the reference to the .css and the problem goes away,
but I then do not have styles included.
Thanks,
Tom
..bodytext {
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
line-height: 20 px;
color: #000000;
background: #98C3C0;
}
..subnavLeft {
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
background: #1F5329;
}
..subnavBottom {
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
line-height: 20 px;
color: #1F5329;
}
..cabinRatesTab le {
font-family: Verdana, Helvetica, sans-serif;
font-size: 15px;
font-style: normal;
font-weight: normal;
font-weight: bold;
color: #000000;
}
..cabinMenu {
font-family: Verdana, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color: #000000;
background-color: #84C1DF;
border: 1px #000000 solid;
}
a:active {
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
}
a:link {
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
}
a:visited {
text-decoration: none;
color: #A386B9;
font-weight: bold;
}
a:hover {
text-decoration: underline;
color: #E29F1C;
}
..bodytextbold {
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: 16px;
font-weight: bold;
color: #333333;
}
..h1 { font-family: Verdana, Helvetica, sans-serif;
font-size: 14pt;
color: #4F8884;
font-weight:bold;
}
..h2 { font-family: Verdana, Helvetica, sans-serif;
font-size: 12pt;
color: #1F5329;
font-weight:bold;
}
..h3 { font-family: Verdana, Helvetica, sans-serif;
font-size: 11pt;
color: #1F5329;
font-weight:bold;
} 9 4167
On Fri, 05 Mar 2004 00:22:08 -0500, PinkBishop <pi********@hot mail.com>
wrote: I have included my .css script below.
This is my first attempt at CSS.
The pages look fine through they eyes of PC browsers and NS on the Mac.
On IE and Safari for Mac all hell breaks loose.
I am getting huge amounts of white space between lines probably comparable to about 5-10 line breaks.
Let's see if we can find it, and what else we find along the way, shall we?
.bodytext { font-family: Verdana, Helvetica, sans-serif; font-size: 13px; font-style: normal; font-weight: normal; line-height: 20 px; color: #000000; background: #98C3C0; }
1) If you size Verdana to look good, it being replaced by Helvetica will
result in tiny text. Not the best choice. Arial and Helvetica match up
pretty well. I'd advise NOT using Verdana unless it's going to be at large
sizes anyway, where replacement won't result in inability to read the text.
2) px is an absolute measurement. If my monitor is set for 600X400, then I
reset it for 1024x768, px-sized trext will become half the size. Best
choice is to use % based on the user's preferred default - and going lower
than 90% is risking illegibility. Same with line height. And that's
probably the source of your immediate problem - pixels vary in size from
monitor to monitor. Really, totally ABANDON the notion that anything but %
and maybe ems are useful for sizing fonts, and do murder the person who
told you otherwise.
3) Good for you, setting color and background-color simultaneously.
.subnavLeft { font-family: Verdana, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: bold; color: #FFFFFF; background: #1F5329; }
1) Verdana issue again.
2) px issue again.
3) Good for you again.
.subnavBottom { font-family: Verdana, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: normal; line-height: 20 px; color: #1F5329; }
Same, same, same.
.cabinRatesTabl e { font-family: Verdana, Helvetica, sans-serif; font-size: 15px; font-style: normal; font-weight: normal; font-weight: bold; color: #000000; }
Specify that background-color just in case.
.cabinMenu { font-family: Verdana, Helvetica, sans-serif; font-size: 11px; font-style: normal; font-weight: normal; color: #000000; background-color: #84C1DF; border: 1px #000000 solid; }
a:active { text-decoration: none; color: #FFFFFF; font-weight: bold; }
a:link { text-decoration: none; color: #FFFFFF; font-weight: bold; } a:visited { text-decoration: none; color: #A386B9; font-weight: bold; } a:hover { text-decoration: underline; color: #E29F1C; }
If the links are only clear when hovered, how will anyone know to hover?
The color? What if it's a b/w monitor or a colorblind person? Keep the
underlines or at least do something to cue the user in besidfes color.
.bodytextbold { font-family: Verdana, Helvetica, sans-serif; font-size: 12px; font-style: normal; line-height: 16px; font-weight: bold; color: #333333; }
You know what I'm going to say...
.h1 { font-family: Verdana, Helvetica, sans-serif; font-size: 14pt; color: #4F8884; font-weight:bold; }
You know, I should tell you, if you set the font-family for body, all the
elements will inherit it. No need to repeat this like you have. It's
redundant.
.h2 { font-family: Verdana, Helvetica, sans-serif; font-size: 12pt; color: #1F5329; font-weight:bold; }
.h3 { font-family: Verdana, Helvetica, sans-serif; font-size: 11pt; color: #1F5329; font-weight:bold; }
Same same same.
Whenever you state color, state background color - you never know when a
user style sheet will have something which will too closely match the
color in the background.
Just a few basic tweaks, and this'll pass muster.
PinkBishop wrote: The pages look fine through they eyes of PC browsers and NS on the Mac.
On IE and Safari for Mac all hell breaks loose.
I am getting huge amounts of white space between lines probably comparable to about 5-10 line breaks.
Can anybody see a problem with the below script that could be causing this?
.bodytext { font-family: Verdana, Helvetica, sans-serif; font-size: 13px; font-style: normal; font-weight: normal; line-height: 20 px;
Get rid of the space between "20" and "px". A validator, or even a
syntax-highlighting editor should pick up that error.
Andrew Graham
On Fri, 5 Mar 2004, Andrew Graham wrote: PinkBishop wrote: Can anybody see a problem with the below script that could be causing this?
.bodytext { font-family: Verdana, Helvetica, sans-serif;
ahem, someone seems to have reading difficulties... please try to
get tuned to the group's wavelength before trying to take advantage of
its assistance, OK? As the traditional usenauts used to say, "lurk
before you leap".
font-size: 13px; font-style: normal; font-weight: normal; line-height: 20 px; Get rid of the space between "20" and "px".
Sure; but that's not all that's wrong with the above. Consider a user
who, for whatever reason, has told their browser to set a min font
size of say 28px. That line height isn't going to be very useful.
That would be fine if designing for the author's own printout,
but in a WWW context it needs a significantly more flexible approach.
I'd suggest working mostly in em units (and/or percentage).
A validator, or even a syntax-highlighting editor should pick up that error.
Certainly the questioner should use appropriate software, such as a
CSS syntax checker, before appealing to the liveware on usenet. But
syntactical correctness by itself is not enough.
all the best
In article <8j************ *************** *****@4ax.com>, PinkBishop
<pi********@hot mail.com> wrote: The pages look fine through they eyes of PC browsers and NS on the Mac.
On IE and Safari for Mac all hell breaks loose.
I am getting huge amounts of white space between lines probably comparable to about 5-10 line breaks.
The problem is indeed the space between the 20 and the px. Fix that,
and all is better.
A tip to save you some work:
I notice you are using class names such as .bodytext .h1 and .h2 and
..h3. This requires markup such as:
<p class="bodytext ">
<p class="h1">
<p class="h2">
<p class="h3">
Why not simple style the HTML elements directly? You can then replace
the above markup with:
<p>
<h1>
<h2>
<h3>
--
Jim Royal
"Understand ing is a three-edged sword" http://JimRoyal.com
PinkBishop <pi********@hot mail.com> wrote: I have included my .css script below.
<grr>Script!? Did you say, "Script"!?</grr>
I am getting huge amounts of white space between lines probably comparable to about 5-10 line breaks.
Can anybody see a problem with the below script that could be causing this?
.bodytext { font-family: Verdana, Helvetica, sans-serif; font-size: 13px; line-height: 20 px;
Line height is just a number, it doesn't need units. 13/20 would be
about :
line-height: 1.5;
Now you can do it the hard way, and include units, like this:
line-height: 20px;
But definitely *not* like this:
line-height: 20 px;
And don't believe any CIWAHian trolling about Verdana (unless you want
to). But, do believe anyone who says not to set font-size in pixels.
And do send hate mail to Jonathan Frakes.
--
Karl Smith.
On Sat, 5 Mar 2004, Karl Smith wrote: And don't believe any CIWAHian trolling about Verdana
Feel free to present the facts. If you don't, people might suspect
you had nothing better than resorting to name-calling.
On Sat, 6 Mar 2004 01:00:24 +0000, "Alan J. Flavell"
<fl*****@ph.gla .ac.uk> wrote: On Sat, 5 Mar 2004, Karl Smith wrote:
And don't believe any CIWAHian trolling about Verdana
Feel free to present the facts. If you don't, people might suspect you had nothing better than resorting to name-calling.
There seems to me to be at least two issues.
One the one hand, there is the unfortunately too-common practice of
suggesting a small font size for main text, then "rescuing" its
legibility by also suggesting Verdana, in which case the text may be
unreadable if Verdana is not available to the user.
On the other hand, there is also the belief that Verdana is too "big
looking" or otherwise unappealing at 1em. Although I happen to think
it may look a little odd in such cases (although I wouldn't go so far
to say it's ugly), surely there can be room here to account for
personal taste?
On the gripping hand, at larger sizes (such as the typical browser
defaults for <h2>), I actually think that Verdana looks pretty decent.
So perhaps a case can me made for suggesting Verdana when the text is
likely to be large (e.g., headings) or small (<sup>?) but not
in-between.
I think there also might be a case for not suggesting Helvetica, at
least for a first choice. Although it is a beautiful font when done
properly (if you like sans-serif fonts), some common browers (let the
reader understand!) make an absolute mess of it. I also notice that my
copy of Mozilla (1.4 on Win98) doesn't even try to render it; it
sneakily slips Arial in its place, even though I have Helvetica
installed.
Nick
--
Nick Theodorakis ni************* *@hotmail.com
nicholas_theodo rakis [at] urmc [dot] rochester [dot] edu ni************* *@hotmail.com (Nick Theodorakis) wrote: One the one hand, there is the unfortunately too-common practice of suggesting a small font size for main text, then "rescuing" its legibility by also suggesting Verdana, in which case the text may be unreadable if Verdana is not available to the user.
U-huh. In which case the blame should be assigned correctly. To an
author's pathological desire to use the smallest text possible, not to
any alleged shortcomings of the Verdana font.
On the other hand, there is also the belief that Verdana is too "big looking" or otherwise unappealing at 1em. Although I happen to think it may look a little odd in such cases (although I wouldn't go so far to say it's ugly), surely there can be room here to account for personal taste?
U-huh. But there is no room for personal taste in the CIWAHian world.
Everyone must conform, in every way, every time.
On the gripping hand, at larger sizes (such as the typical browser defaults for <h2>), I actually think that Verdana looks pretty decent. So perhaps a case can me made for suggesting Verdana when the text is likely to be large (e.g., headings) or small (<sup>?) but not in-between.
Something both I and Lauri R. have previously said. I can't speak for
Lauri, but I still like Verdana for headings.
I think there also might be a case for not suggesting Helvetica, at least for a first choice. Although it is a beautiful font when done properly (if you like sans-serif fonts), some common browers (let the reader understand!) make an absolute mess of it. I also notice that my copy of Mozilla (1.4 on Win98) doesn't even try to render it; it sneakily slips Arial in its place, even though I have Helvetica installed.
[How do you tell the difference between real Helvetica and Arial?]
The real issue is what does the author hope to achieve in setting a
typeface at all? Is there actually any goal in mind, or is it merely
habit?
I think the constant stream of warnings about Verdana are just a
habit. What's its crime - being widely spaced? So what? Web pages
aren't books, we're constantly being hounded - put aside your
prejudices. If you print a book in a wide font it will literally cost
you more because you'll get fewer words per page and need more pages.
Web pages are as long as they are. The cost doesn't change with
typographical choices.
Now back to authors - if the desire is to use small sizes on screen
(why!?), specify high ex-height fonts. Something like:
"Georgia, Verdana, Tahoma"
"What? One is seriffed and others sans-serif!" says Mr Newbie.
So what? Eh, so what? OTOH, If the desire is merely to give a list of
commonly installed sans-serif fonts, Verdana is possibly
inappropriate. It seems to stand out as different in the commonly seen
"Verdana, Arial, Helvetica, sans-serif". But then if you're just
listing commonly installed sans-serif fonts, for no particular
purpose, you're definitely on Team Clueless.
--
Karl Smith.
On 6 Mar 2004 00:41:45 -0800, go************@ kjsmith.com (Karl Smith)
wrote:
[...] [How do you tell the difference between real Helvetica and Arial?]
See:
<http://www.ms-studio.com/articlesarialsi d.html>
for example.
Nick
--
Nick Theodorakis ni************* *@hotmail.com
nicholas_theodo rakis [at] urmc [dot] rochester [dot] edu This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
by: Hal Vaughan |
last post by:
I'm testing a GUI app on a couple Linux boxen and one Win2k box. I'm using
Java 1.4.2 on each (or the closest on Win2k -- whatever version comes
close). On one Linux box and the Win2k box the line spacing is very close
(for example, when I use HTML in JLabels, or even in JTextAreas), but on
the other Linux box, the line spacing is much wider.
I'm using default Swing fonts -- I'm not setting anything. I can't find a
field or function...
|
by: Kim Scarborough |
last post by:
Say I wanted to put a couple lines of asterisks between paragraphs, and have
it stretch the spaces so that it spanned 100% of the text-width, like this:
* * * * * * * *
Is there a way to do this in CSS? I don't want it to line break, just collapse
the spacing between the stars if the window gets narrower.
--
----------------------------------------------------------------------------
|
by: puzzled |
last post by:
I am trying to use css to control the indentation within items in a
list. I would like something that looks like this:
Text of a paragraph goes here, leading to the following list:
* list item 1
* list item 2
* and so on
|
by: John |
last post by:
Now and again I like to start a sentence with a large capital, maybe
in a different font. This upsets the line spacing and I've failed to
find any css that will effectively crop the capital letter from the
bottom, to allow the line spacing of the following smaller font text
to remain unaffected. I've always had to resort to a graphic for the
leading capital - is there a way I can do this with css?
Thanks
John
|
by: Danny |
last post by:
I have a small <div> element which contains two text blocks - one within
<h5> tags and the other within <p> tags.
I don't want any extra line spacing between elements so use the
display:inline property.
This works for IE6 but Opera7.54 and Netscape7.1 add large line spacing
between the text blocks and any lines of wrapped text.
The line spacing is independant of the font size and is consistent between
all lines.
ie: it's not larger...
| |
by: Andrew Poulos |
last post by:
If I have a text INPUT within a block of text how do I 'correct' for the
line spacing. The line spacing above and below the INPUT is larger than
the line spacing generally:
<div style="position:absolute; left:100px; top:100px; width:200px;>blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah <input type="text"...
|
by: metoikos |
last post by:
I've scoured the web (clumsily, I'm sure) for information on the
difficulties I am having, checked my markup in validators, and had a
friend with more CSS clue look over it, but I haven't had any luck.
I'll detail my difficulties here and hope for help. I will note that
I'm using headings to delineate different sections of my message for
easier reading.
As you can see from the subject, my problems are related to spacing;
one of them is...
|
by: joshvito |
last post by:
my site is having spacing issues in IE only. The page looks great in FF and Opera, but in IE7, i get a crazy spacing issue around my navigation links.
The page source code is located at...
http://joshvito.com/portfolio.html
the style sheet is located at...
http://joshvito.com/joshvito_portfolio.css
I have exhausted hours trying to figure out why IE kills my table spacing...help
thanks
|
by: replyrpatil |
last post by:
What I am trying to do: I need to print a compact access report (font 6 size) created using RTF2 program developed by Stephen Lebans to generate a TIF image of custom size (5.5 in x 2.0 in)
Problem Recreation : Download attached RAR file (http://download.yousendit.com/627919383AFAA7E3 )
Steps 1) Install RTF2 program created by Lebans
2) Install ZAN Image Printer (Virtual Printer)
3) Create Custom Paper Size ----...
|
by: John Nagle |
last post by:
I'm having problems with excessive line spacing in FireFox. This
seems to happen when "line-height" is set to "normal" when a large
font is in effect, then there's a font change to a smaller font in
HTML at a lower level. It looks like line height gets "stuck" at the
value in effect in the outer block. DOM inspector shows the line height
as "normal" on the small text, but the line spacing renders too big.
This is with Firefox 2, so it...
|
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
| |
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |