Trying to resize font using css

I'm using a google visualization gadget in a web page which can potentially return an error message. I'm trying to increase the size of the font of the error message text.

Here is the page in question:
http://www.pikefin.com/phpdev/charts/allassets/directtable.php?taskid=10&title=US%2520Equities%2520Top%2520Gainers/Losers

The error message text is enclosed a div with this id: google-visualization-errors-0

So I tried adding the following code in the html file before the div:
<STYLE>
	.google-visualization-errors-0{
	font:1.2em arial,sans-serif;
	}
</STYLE>

Open in new window


But it had no effect.
opikeAsked:
Who is Participating?
 
jonahzonaCommented:
opike -

Add this to the header:      

<STYLE type="text/css">
	#google-visualization-errors-0 {
	font:1.2em arial,sans-serif !important;
	}
</style>

Open in new window


Does that work?
0
 
jonahzonaCommented:
You said the div is an ID, but then you called a CLASS with the css.

Anyway you can add the styling inline such as

<div class="google-visualization-errors-0" style="font:1.2em arial,sans-serif;">CONTENT</div>

Open in new window


Or you can define it in your external style sheet the way you did, and then add

<div class="google-visualization-errors-0">CONTENT</a>

Or you can add it in the header by giving it a

<STYLE type="text/css">
	.google-visualization-errors-0{
	font:1.2em arial,sans-serif;
	}
 </STYLE>

Open in new window



Also, the link you gave seemed dead..didn't load anything.
 
0
 
bill30Commented:
If it is an ID you need to grab it with an "#" as "." is for a class not an ID.  Also you say you put it in the html file before the div... shouldnt it be in this order:
<html>
<head>
<style>
	#google-visualization-errors-0{
	font:1.2em arial,sans-serif;
	}
</style>
</head>
<body>
<div id="google-visualization-errors-0"> bla bla </div>
</body>

Open in new window

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.

 
jonahzonaCommented:
Alright, it just loaded.

You DO have inline styling in place.

Currently it is:

<div id="google-visualization-errors-0" style="font:0.8em arial,sans-serif; margin-bottom: 5px;">

Open in new window


You can add the 1.2em to this inline style, or add to your stylesheet

#google-visualization-errors-0 {
	font:1.2em arial,sans-serif !important;;
}

Open in new window


This will override the current values.

Again, you can do it in the head by doing similarly:

<STYLE type="text/css">
	#google-visualization-errors-0{
	font:1.2em arial,sans-serif !important;;
	}
 </STYLE>

Open in new window


Remember that an ID selector begins with a # sign, while a CLASS selector begins with a . (period).

0
 
opikeAuthor Commented:
Whoops, brain cramp with the '.' vs '#' slip up.

However it still isn't working even after fixing that.

@bill30: I don't think the <style> tag is required to be in the header.
0
 
opikeAuthor Commented:
I'm seeing this order in firebug:

element.style {
    font: 0.8em arial,sans-serif;
    margin-bottom: 5px;
}
#google-visualization-errors-0 {
    font: 2em arial,sans-serif;
}
direct.../Losers (line 93)
* {
    margin: 0;
    padding: 0;
}

Open in new window


So the browser is putting the dynamically generated styling ahead of my inline style.
0
 
jonahzonaCommented:
Yes, the style must be declared in the head, unless it is inline inside the tag element. (div, span, p, etc)

This page shows proper usage of that tag.

http://www.w3schools.com/tags/tag_style.asp
0
 
jonahzonaCommented:
@opike

You are seeing that because the 0.8 em font is INLINE in the div.

Look at the html in the div you are talking about.

Adjust it inline, or as in one of the other ways described.
0
 
opikeAuthor Commented:
@jonahzona: that .8em font style is generated dynamically as part of the google gadget. It is not in the original php file. So I need to figure out how to override what is being dynamically returned from google.
0
 
jonahzonaCommented:
Sorry, not HEADER.

I meant HEAD.

I spend too much time in Wordpress............
0
 
opikeAuthor Commented:
I have it set up that way now and it's not working. You can refresh the original link I posted and look at the source.
0
 
opikeAuthor Commented:
Ok I was able to get it work by adding a span tag to the style info:

<STYLE type="text/css">
	#google-visualization-errors-0  span{
	font:1.2em arial,sans-serif !important;
	}
</style> 

Open in new window


Thanks for your help!
0
 
jonahzonaCommented:
Yep. Good job! Looks good.

Didn't even consider that the text was being rendered in the span.

DUH!
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.

All Courses

From novice to tech pro — start learning today.