CSS Font Sizing Issue Sideboxes Different Please Help !

[pasb]

Hi all,

I have been having a problem with re-sizing the fonts for the sidebox headings.

I have managed to get the other headings to change in size to match
But these - new products, featured, new all with links in other words, all seem to be at leat one size ahead of the others, so when I change the font size in this section of code,

/*sideboxes*/
.columnLeft {}

h3.leftBoxHeading, h3.rightBoxHeading,
h3.leftBoxHeading a, h3.rightBoxHeading a {
font-size: 1.2em;
color: #000000;
}

it changes them but the linked ones are still bigger?

I have separated this code like this

/*sideboxes*/
.columnLeft {}

h3.leftBoxHeading, h3.rightBoxHeading, {
font-size: 1.5em;
color: #000000;
}

h3.leftBoxHeading a, h3.rightBoxHeading a {
font-size: 1.5em;
color: #000000;
}

This allows me to change the link headings now, but the general headings does not change anything after separating, the headings can only be changed by the h3 at the top of the stylesheet now?

In other words I have acheived what I needed, but am concerned I am leaving in this section

h3.leftBoxHeading, h3.rightBoxHeading, {
font-size: 1.5em;
color: #000000;
}

but it alters nothing now, so have I done something wrong here, should I take of the h3 from the leftboxheading etc, will this make the difference or is there a way to do this that is easier please.

I don't want to leave something that is wrong or redundant as this should not be left like this as it will sereve no use, i am assuming??

I have placed no link as my site is in test, I can send a link if needed via pm etc!

I hope it makes some sort of sense and anyone who can help I would be really greatful to

cheers
Paul

[niccol]

Please send me a URL and I'll have a look

[niccol]

You were pretty much right The difference is because some of the heading are links and some of the headings are not links.

You have an em size adjustment of 1.2em applied to both the <h3> tags and the <a> tags . The bit of text that is a link is both inside a <h3> tag and a <a> tag. Em is a relative font size rather than absolute so these bits of text are actually 1.44 time as big as the base font size.

When I see it on my browser the font size of 'hardware' is 12px
The font size of 'Categories' is 14.4px.
The font size of 'New Products [more]' is 17.28px

You can change this by just editing the stylesheet. Try changing the rule that reads

h3.leftBoxHeading, h3.rightBoxHeading, 
h3.leftBoxHeading a, h3.rightBoxHeading a {
	font-size: 1.2em;
	color: #000000;
	}

to

h3.leftBoxHeading, h3.rightBoxHeading, 
h3.leftBoxHeading a, h3.rightBoxHeading a {
	color: #000000;
	}

You can't to too much irreparable damage in the stylesheet. If you are unsure then just make sure you are backed up so you can revert if your changes have unexpected consequences.

Another little tip is that instead of deleting lines then you can just comment them out which means that you can still see what you have done. In this case that would look like:

h3.leftBoxHeading, h3.rightBoxHeading, 
h3.leftBoxHeading a, h3.rightBoxHeading a {
	/*font-size: 1.2em;*/
	color: #000000;
	}

The font size rule will not be applied.

That way when you are editing furiously you can always change back easily. Once you are certain that this section is not required you can delete it.

Nik

[pasb]

Hi,

Thanks for your help , I have not tried it yet as I havent been able to access my account properly since yesterday.

But will do it for sure, I have seen different ways of altering around things and it gets confusing.

Before long to much has been changed, when usually its something quite simple. Well sometimes!

Will post when tried it out,

Thanks again
Paul.

[niccol]

Yes, sometimes it can get confusing. Particularly when multiple styles are applied to one element. If you ever want to get muddled do a search for specificity!

A good tool for this is an add-on to the firefox browser called firebug. Firstly, I'd really recommend using firefox as a browser for development. Firebug takes a bit of learning but it will tell you exactly which styles are being applied to any particular element. This can be really useful at times!

Also a little trick with font sizes is to temporarily swap back to absolute sizes. For instance font-size:12px. It just sometimes lets you see what is what. Of course, using ems rather than absolute sizes is a really really good thing and you will want to swap back later.

Nick

[pasb]

Hi,

In reply, I have been working on this one, couple of weeks away, but back to it now, thanks for all your help, it's tricky and I am sure my hols rest will fade away shortly, but still I needed it.

Paul