Why is this one element having wrong font-size & linked?

HTML & CSS
1

Hey all,

I am having a really strange lil problem. That is if you look at here:

https://www.anoox.com/get_free_traffic.php

you will see that the Headline of:
Get Social
Get Free Traffic
which are in Blue, via CSS class: back_blue
are in different font-size and have cursor as pointer, compared to the Orange part of the Headline, that is:
“By sharing what you know and like”
which has CSS class: back_orng

What the HEK is going on?
Why is the Blue part having a different font-size and has cursor as pointer?

Sorry to bother you all with such a lil problem, but it is driving me up the wall :slight_smile:

Cheers,
Dean @ Anoox

2 
.back_blue, .back_orng {
    font-size: 24px;
}

.back_blue {
    background: #4cb5f5 none repeat scroll 0 0;
    color: white;
    cursor: pointer;
    font-family: "trebuchet MS",sans-serif;
    font-size: 28px;
    font-weight: bold;
    padding: 3px 15px;
    width: 40%;
}

You might also want to look into why Firefox is showing this as the page title:

3 Likes
3

Hi Techno,

1st, thanks for bringing that Php based Error to my attention, it is fixed.

Now about the main question: sorry but your reply does not answer my question, since I want to know what it is that 2 Spans which have the SAME CLASS definition, have different font-sizes and why it is that the blue_back Class also has cursor as pointer, when again it has the same exact definition as the Orange back class. Only diff between these 2 classes being the background color

Thanks

4

You set the font size and cursor for both the orange and the blue backgrounds:

.back_blue, .back_orng {
	font-size: 24px;
	cursor: normal;
}

Then you over-ride both those declarations for the blue background:

.back_blue { 
	font-family: "trebuchet MS", sans-serif;
	font-size: 28px;
	color: white;
	font-weight: bold;
	background: #4CB5F5;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 3px;
	padding-bottom: 3px;
	cursor: pointer;
	width: 40%;

}

So the two spans display differently because you’re styling them differently.

5

AH I See it now!
Someone has created another Class back_blue and put it into a CSS file for this page and I was not aware of this other CSS file at all!

Well due to your insight I see it now.

thanks and have a gr8 Weekend :slight_smile:

2 Likes
6

Hi Techno,

I have a follow up question:

Can one see all the CSS that are loaded into a Web page? Of course via the Web browser?
I think you were able to see it, and I am wondering what is that Technique or is there a CSS debugging tool or add on that one needs to download and pluginto a Web browser?

Cheers,
Dean

7

If you right-click on an element and select Inspect element in most browsers you can see what CSS is being applied to it.

8

I use a couple of tools which I find really helpful. The first one is the Firebug extension for Firefox, which will display the CSS rules applied, and also indicate any rules which are not being applied because they arte being over-ridden by something else. The other is the Web Developer Toolbar, which has various options including viewing the CSS for a site.

9

Hello Techno,

Ok, this is what I suspecting.
So I shall download and install the Firebug extension for FF.

Cheers,
Dean

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.