Re: "Normal" typeface shows as Italic in Browser

#1

mr nelson <webforumsuser (AT) macromedia (DOT) com> wrote:

Quote:

W2k, DW 4.01 On a website I run
(www.endoflifechoiceswis.org/EOLCWImeetings.html) I have just posted
a new page, using my CSS styles. The style is my .h3, which is a
Verdana, Arial, Helvetica, size 14 px, weight Bold, Style Normal.
However, when viewed in my IE
6.0..2800.1106 browser, the type face shows up as Italic!

That is true on many of the other pages too, although they all have
the same css style (not italic) Some text is in tables, some is not.
What am I doing wrong for the style to show up as Normal in the DW
window but Italic in the browser?

1) It's not a good idea to name a custom class the same name as an element,
especially when it means something completely different. An h3 is a heading
3 tag. Good idea to find another name for something that ISNT an h3, which
this text isn't.

2) Your .h3 class is italic:

..h3 {
FONT-WEIGHT: bold; FONT-SIZE: 14px; COLOR: #000066; LINE-HEIGHT: 22px;
FONT-STYLE: italic; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
h3Ital: Verdana, Arial, Helvetica, sans-serif
}

Take the font-style out of there completely. There's no need for it in this
case anyhow, since the default style of text is normal and this text isn't
inheriting anything else from its parents.

--
--
DiMa
Team Macromedia Member for Dreamweaver MX
--------------------
WEB FORUM USERS: Please log on to the Newsgroup for quicker replies to
your posts: news://forums.macromedia.com/macromedia.dreamweaver
For Answers, check here first:
http://groups.google.com/advanced_group_search?q=+group:macromedia.dreamwea ver
http://www.macromedia.com/support/dreamweaver/technotes.html
http://www.projectseven.com/faqbase
http://dwfaq.com

http://www.macromedia.com/support/forums/etiquette.htm

www dot flyingtigerwebdesign dot com

#2

Where do you look to find that my style .h3 is .h3 {
FONT-WEIGHT: bold; FONT-SIZE: 14px; COLOR: #000066; LINE-HEIGHT: 22px;
FONT-STYLE: italic; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
h3Ital: Verdana, Arial, Helvetica, sans-serif
} ? When I look it up under CssStyles/edit I find font style to be normal,
not italic.

Where do you look to find the specifics of the formatted styles (h3) listed in
the Property Inspector under "format", so that I can find if I'm trying to
overwrite a preset format??

Furthermore I don't understand what you mean by " Take the font-style out of
there completely. There's no need for it in this case anyhow, since the default
style of text is normal and this text isn't
inheriting anything else from its parents." Who (what) are "it's parents".

default style of text is normal and this text isn'tnormal and this text isn't
inheriting anything else from its parents.

#3

It's likely -- in fact, it's guaranteed -- that DiMa looked at the
actual source HTML and CSS for your file(s) to arrive at her answer. This
is available to anyone who visits your URL and right-clicks to "View
Source." It's also available to you when you switch Dreamweaver to Code
view.

Often, viewing the actual markup source reveals details not immediately
apparent to the Design view interface. For example, she might have searched
for the word "italic" in your style sheet and seen the answer right away,
whereas you'd have to know where to look if you used the CSS Styles palette.

Quote:

Furthermore I don't understand what you mean by " Take the font-style
out of
there completely. There's no need for it in this case anyhow, since the
default
style of text is normal and this text isn't
inheriting anything else from its parents." Who (what) are "it's
parents".

"Parents" in this context means any HTML tag or CSS style that contains
the tag or style in question. For example, if your <body> tag has a style
attached to it that makes its text green, all <p> tags, <table> tags, etc.
that appear within the <body> -- that is, tags that are the <body> tag's
"children" -- will "inherit" the green style and also render themselves
green, unless they themselves specify otherwise.

Quote:

default style of text is normal and this text isn'tnormal and this text
isn't
inheriting anything else from its parents.

This text is indeed inheriting something. It's inheriting an italics
property you didn't expect, and the way to get rid of that is to override
the italics in the child tags, or remove the parent's italics property.

David
stiller (at) quip (net)

#4

Thanks, David, that helps me a lot. I am aware of the ability to view the
source code from the browser interface and I use code view all the time. I
didn't know, however, that you could view css styles that way, by "view
source". Where, in viewing the source code at a site, do you find the css style
sheet?

I'll spend some time seeing where my "parents" tags are getting in the way of
the "child's" properties.

I still don't understand about my self-defined .h3 css style being interfered
with by the "element", as mentioned by DiMA at 9:56 pm.

Thanks again.

#5

If you view source from a browser, you'll notice if a given HTML page
has CSS by checking to see if 1) there's a <style> block somewhere on the
page (basically, this is a <style> tag with style rules in it, followed by a
close </style> tag); 2) if there's inline CSS (a style attribute of a given
HTML tag); or, finally, 3) a <link> tag that links to an external CSS file.
In your case, the last choice is what applies.

<link rel="stylesheet" href="CSSStyles/EOLCStyles.css" type="text/css">

This tells you there's an external CSS file at the a folder one level in
from the current folder, under CSSStyles.

So if you point your browser to ...

http://www.endoflifechoiceswis.org/CSSStyles/EOLCStyles.css

.... the CSS file will open in your default CSS editor (might be Dreamweaver,
TopStyle, Notepad, whatever). Of course, you can always open the CSS file
yourself, right in Dreamweaver. All the CSS Styles palette does in
Dreamweaver is write to this file (or write to a style block in the HTML
page).

There's nothing essentially wrong ("illegal") about naming a class style
..h3, but DiMa's point, I believe -- I really can't speak for her -- is that
it can be confusing to name a style for an existing HTML element. There is,
after all, an <h3> tag. <h3> tags in HTML cause the text inside them to
render a bold, slightly larger font than normal (<h[number]> tags are
"header" tags -- <h1>, <h2>, <h3> ... <h6>). A developer might see .h3 and
think, "Ah, this person has redefined the <h3> tag" -- which isn't the case
here -- and would thus be misguided.

It makes good sense to use HTML tags for the semantic value they have.
For example, if you want to set apart some text in your page as a header,
use an <h1> (or h2, or h3, etc.) tag. If you want your <h1> tag to be red,
use CSS to redefine the <h1> tag, like this:

h1 {
color: #FF0000;
}

Note, there is no dot ( . ) at the beginning of that rule. By omitting the
dot, you're saying, "CSS, I want you to make <h1> tags look like they
normally do, with bold, larger font, etc., but in addition, make all <h1>
tag content red."

I've seen many developers put their header text in a <div>, for example,
and style it like this:

..header1 {
font-size: 18px;
font-weight: bold;
color: #FF0000;
}

<div class="header1">Header Text Here</div>

The reason this isn't as good is because the developer wasted his efforts by
creating a header-type style from scratch. He wanted a larger font, bold,
and red, and this way, he has to code it all. If he just used an <h1> tag,
he'd only have to code for the red. Less CSS code, less HTML code ... it's
better for everybody! Easier to maintain. (Note here that .header1 is
preceeded by a dot. The dot means you're not redefining an HTML tag, but
rather are creating a custom style; that is, a "class".)

In your HTML code, many of your <p> tags say <p class="h3">. If you
look at the .h3 rule definition, it does NOT include a property for italic.
You mentioned that before, and you're correct on that count. But here's the
problem: that same rule (.h3) is missing its closing curly brace ( } ).
That's important! Because of that missing punctuation, the browser thinks
that your .h3 tag includes all the properties of your NEXT rule too, which
is .h3Ital -- and that one DOES have an italics property. Make sure all of
your rules state their name, like .h3, then have an open brace {, and
finally, a closing brace }.

David
stiller (at) quip (net)

"mr nelson" <webforumsuser (AT) macromedia (DOT) com> wrote

Quote:

Thanks, David, that helps me a lot. I am aware of the ability to view the
source code from the browser interface and I use code view all the time. I
didn't know, however, that you could view css styles that way, by "view
source". Where, in viewing the source code at a site, do you find the css
style
sheet?

I'll spend some time seeing where my "parents" tags are getting in the
way of
the "child's" properties.

I still don't understand about my self-defined .h3 css style being
interfered
with by the "element", as mentioned by DiMA at 9:56 pm.

Thanks again.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Re: "Normal" typeface shows as Italic in Browser

Macromedia Dreamweaver Macromedia Dreamweaver Discussions (macromedia.dreamweaver)

Re: "Normal" typeface shows as Italic in Browser - 08-06-2004 , 04:56 PM

Re: "Normal" typeface shows as Italic in Browser - 08-06-2004 , 08:05 PM

Re: "Normal" typeface shows as Italic in Browser - 08-06-2004 , 09:39 PM

Re: "Normal" typeface shows as Italic in Browser - 08-06-2004 , 10:32 PM

Re: "Normal" typeface shows as Italic in Browser - 08-07-2004 , 12:03 AM