• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 453
  • Last Modified:

CSS question

I am using Dreamweaver CS3 to edit a web page.  (Windows 7)

When I changed the font color and bold the text, it automatically created  CSS style 1 on top for me.  Code as below.  That is fine.  However, when I view the page in FireFox or Safari, I realized the text is smaller than the other text.  I do not understand why.

I purposely put in the font size 15 px and calibri to match the page but still cannot make the font size of the text looks the same as the remaining of the page.  Any advice is appreciated.  Attached the screen captured.

Thanks, CGMK.

<style type="text/css">
<!--
.style1 {
      color: #0000FF;
      font-weight: bold;
      font-size: 15px;
      font-family: calibri;
}
-->
</style>

----------------------------------

     <p><span class="style1">New Life Expo</span><br />
                                March 19-20, 2011<br />New York, New York</p> screen captured - show the font size.
0
cgmk89
Asked:
cgmk89
  • 7
  • 7
  • 6
  • +3
3 Solutions
 
dwkdCommented:
maybe it's your browser zooming in
go to "View" > "Zoom" > "Reset"
or just press CTRL+0
0
 
dwkdCommented:
and modify that font-family to something more inclusive..in case calibri doesn't exist on a particular computer:
font-family: calibri, Arial, Helvetica, sans-serif;
0
 
meb_santosoCommented:
Try this:

<style type="text/css">
body {
	font-family:calibri;
	font-size:15px;
}
.style1
{color:#00F;
font-weight:bold;
}
</style>

<p>
 	<span class="style1">
    	New Life Expo
    </span><br />
    March 19-20, 2011<br />
    New York, New York
 </p>
	 

Open in new window


will give you this :

 screenshot
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
meb_santosoCommented:
the reason that your browser in your computer render the text outside the style1 into something different maybe because the text is rendered based on some other rule or by general rule defined in the browser's engine.

Explicitly set the rule for the font size and type in the CSS under html {} will make sure everything will be displayed using that same font --unless otherwise stated.

It is also important to declare some alternative font faces just in case the font is not available on the system that is currently browsing your page (as also stated by dwkd)
0
 
cgmk89Author Commented:
Taking both your points into consideration, below is my 'new' code.  NO different in display.
I did the Zoom - Reset too.

The font size looks the right (the same) in Dreamweaver.  It looks not right only when I transferred the file to the host server.  I did clear the cache too!

<style type="text/css">
body {
      font-family:calibri, Arial, Helvetica, sans-serif;
      font-size:15px;
}
<!--
.style1 {
      color: #0000FF;
      font-weight: bold;
}
-->
</style>
0
 
dwkdCommented:
i say try without calibri altogether, dreamweaver design mode is not a way to determine browser compatibility

font-family:Arial, Helvetica, sans-serif;

definitely calibri is not a common font..
0
 
meb_santosoCommented:
with this code :

I get this on Firefox 3.6.15 & IE8 :


Capture-212.jpg
0
 
meb_santosoCommented:
sorry, forgot the code:

 code
<style type="text/css">
body {
      font-family:calibri, Arial, Helvetica, sans-serif;
      font-size:15px;
}
<!--
.style1 {
      color: #0000FF;
      font-weight: bold;
}
-->
</style>

 <p>
 	<span class="style1">
    	New Life Expo
    </span><br />
    March 19-20, 2011<br />
    New York, New York
 </p>

Open in new window

0
 
Jason C. LevineNo oneCommented:
There is no <body> tag above so the CSS definition for body will never apply.

Try it like this instead:

<html>
<head>
<style type="text/css">
body {
      font-family:calibri, Arial, Helvetica, sans-serif;
      font-size:15px;
}
<!--
.style1 {
      color: #0000FF;
      font-weight: bold;
}
-->
</style>
</head>
<body>
 <p>
 	<span class="style1">
    	New Life Expo
    </span><br />
    March 19-20, 2011<br />
    New York, New York
 </p>
</body>
</html>

Open in new window

0
 
dwkdCommented:
lol.. let's see .. THERE'S NO DOCTYPE SO WRITE IT LIKE ...

cmmon, it's common sense
0
 
meb_santosoCommented:
oh for crying out loud... @jason1178 : let's see... there's no TITLE as well...  duh...

@dwkd: high five!
0
 
Jason C. LevineNo oneCommented:
dwkd, who is that addressed to?
0
 
Jason C. LevineNo oneCommented:
Is my sarcasm meter broken again?
0
 
cgmk89Author Commented:
Sorry for the confusion...

I did have a template page insert into this web page.

Coding from the page.dwt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- #BeginEditable "doctitle" -->
<title>xxx</title>
<!-- #EndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link href="../style.css" rel="stylesheet" type="text/css" />


My style.css file has the below code:

BODY {
margin:0px;
padding:0px;
font-family: calibri;
font-size: 15px;
color: #000000;
background: #FFF;
}

p {
font-size: 15px;
color: #000000;
font-family: calibri;
}

------------------------------

Meb,
I tried to create a new web page called test.html (without the template insert).
It displayed the text (all same size) correctly once transferred the file to host server.
(comment 03/15/11 07:47 PM, ID: 35143334)

So the issue may come from somewhere else??!!
0
 
meb_santosoCommented:
# It displayed the text (all same size) correctly once transferred the file to host server.
# So the issue may come from somewhere else??!!

yes and no; it can be caused by so many factors (your browser vs mine, etc. --not important)
the thing is, if by using your latest code your page is being displayed properly, certainly it helps to explicitly declare the styles.

but to tell you the truth, your code:

BODY {
margin:0px;
padding:0px;
font-family: calibri;
font-size: 15px;
color: #000000;
background: #FFF;
}

p {
font-size: 15px;
color: #000000;
font-family: calibri;
}

Open in new window


is declaring the exact same formatting, twice. (which the p{} is not necessary / doenst make any difference).

0
 
cgmk89Author Commented:
Thanks for comment 03/15/11 08:10 PM, ID: 35143453.
I fully agreed with that.
0
 
dwkdCommented:
well templates usually come with a lot of styles ...one of the styles may have been causing the glitch.
Unless you post the whole code inside that file or provide a link to the file that includes the template, we won't know

0
 
cgmk89Author Commented:
For my immediate display, I worked out a solution to solve the look of the page.

In the Preferences, I uncheck use CSS style.

On the web page, I delete the CSS style at the top.  In the 'body' part, I remove the <span class="style1"> and just replaced with  <strong><font color="#0000FF">New Life Expo</font></strong><br />

I get what I want.  However, I still do not understand what's wrong with my CSS code that render a smaller font size??!!
0
 
meb_santosoCommented:
# In the Preferences, I uncheck use CSS style.
# On the web page, I delete the CSS style at the top.  In the 'body' part, I remove the <span
# class="style1"> and just replaced with  <strong><font color="#0000FF">New Life Expo</font>
# </strong><br />

This will indeed get you totally what you want :-) Welcome back to HTML 3.0, the year is 1995 :D (damn, I used Netscape back then)

# I get what I want.  However, I still do not understand what's wrong with my CSS code that render a
# smaller font size??!!

there are a whole bunch of loose ends that can cause this as I and dwkd have state them upfront. I personally can't really answer this part of the question.
0
 
cgmk89Author Commented:
ok.  I will try to figure out myself when I get the time.  If I find the cause in the next few days, I will update here.

With reference to 03/15/11 08:17 PM, ID: 35143491 (dwkd), I create the template myself.  So there is no style there except the style.css file.  The template is solely for header and left navigation so I can have a global update of all pages in one place.  I checked the style.css file.  I do not expect anything from there too!

Anyway, I still welcome suggestion.  Thanks for all your time.  I appreciate that.
0
 
Prafulla MaharjanCommented:
You sould not change directly in the design page
you first create the css page and call the css in your page. then just call the class
which may help u

thanks
0
 
dwkdCommented:
have you tried my suggestion about getting rid of calibri and trying another font family to see if you get the same results?
0
 
andrewkhanCommented:
Try adding !important to the font-size of your CSS.

ie,

font-size: 15px !important;

!important sets that style as the most important over any other conflicting styles, telling the browser to use that style rather than any others.

Andrew
0
 
cgmk89Author Commented:
03/16/11 11:58 AM, ID: 35149190 dwkd - I tried with Arial alone and also the one you suggested: font-family:Arial, Helvetica, sans-serif;  It did not make any different.  The font size still small.

03/28/11 05:23 AM, ID: 35230453 andrewkhan - I tried the !Important;  No change too.  The font size is small.

Conclusion: I believe I should uncheck CSS style in the preference to prevent the program from creating the style automatically and just stick to html code.  For frequent style, I should write it in CSS file and call the class id in the web page.  Hopefully, this way, browser will not get confuse.

Thanks all for your time and patient with me.
0
 
cgmk89Author Commented:
Even I do not have a 100% answer to know what exactly is the issue.  However, all your answers help me.  Thanks.
0
 
Prafulla MaharjanCommented:
when you work in design it will automatically create.
so it is good that you create the style first in the css then you call the style in the design or
you can apply by code itself..
i think it will help you

 thanks..
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 7
  • 7
  • 6
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now