Solved

CSS question

Posted on 2011-03-15
26
418 Views
Last Modified: 2012-05-11
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
Comment
Question by:cgmk89
  • 7
  • 7
  • 6
  • +3
26 Comments
 
LVL 4

Expert Comment

by:dwkd
ID: 35143161
maybe it's your browser zooming in
go to "View" > "Zoom" > "Reset"
or just press CTRL+0
0
 
LVL 4

Assisted Solution

by:dwkd
dwkd earned 83 total points
ID: 35143174
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
 
LVL 5

Expert Comment

by:meb_santoso
ID: 35143180
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
 
LVL 5

Expert Comment

by:meb_santoso
ID: 35143196
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
 

Author Comment

by:cgmk89
ID: 35143249
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
 
LVL 4

Expert Comment

by:dwkd
ID: 35143292
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
 
LVL 5

Expert Comment

by:meb_santoso
ID: 35143327
with this code :

I get this on Firefox 3.6.15 & IE8 :


Capture-212.jpg
0
 
LVL 5

Expert Comment

by:meb_santoso
ID: 35143334
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
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 35143361
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
 
LVL 4

Expert Comment

by:dwkd
ID: 35143386
lol.. let's see .. THERE'S NO DOCTYPE SO WRITE IT LIKE ...

cmmon, it's common sense
0
 
LVL 5

Expert Comment

by:meb_santoso
ID: 35143401
oh for crying out loud... @jason1178 : let's see... there's no TITLE as well...  duh...

@dwkd: high five!
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 35143404
dwkd, who is that addressed to?
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 35143414
Is my sarcasm meter broken again?
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 

Author Comment

by:cgmk89
ID: 35143416
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
 
LVL 5

Assisted Solution

by:meb_santoso
meb_santoso earned 83 total points
ID: 35143453
# 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
 

Author Comment

by:cgmk89
ID: 35143480
Thanks for comment 03/15/11 08:10 PM, ID: 35143453.
I fully agreed with that.
0
 
LVL 4

Expert Comment

by:dwkd
ID: 35143491
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
 

Author Comment

by:cgmk89
ID: 35143535
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
 
LVL 5

Expert Comment

by:meb_santoso
ID: 35143558
# 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
 

Author Comment

by:cgmk89
ID: 35143591
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
 
LVL 3

Accepted Solution

by:
prafullamjn earned 84 total points
ID: 35144630
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
 
LVL 4

Expert Comment

by:dwkd
ID: 35149190
have you tried my suggestion about getting rid of calibri and trying another font family to see if you get the same results?
0
 
LVL 2

Expert Comment

by:andrewkhan
ID: 35230453
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
 

Author Comment

by:cgmk89
ID: 35236875
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
 

Author Closing Comment

by:cgmk89
ID: 35236920
Even I do not have a 100% answer to know what exactly is the issue.  However, all your answers help me.  Thanks.
0
 
LVL 3

Expert Comment

by:prafullamjn
ID: 36223423
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

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now