[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 291
  • Last Modified:

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.
0
opike
Asked:
opike
  • 7
  • 5
2 Solutions
 
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
 
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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:
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:
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

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

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