How can I keep css rules of tags containing text the same before and after I put them inside <li> tag?

Question

Hello,

I've difficulties to set up css rules of tags containing text inside li tag. Anything inside li becomes anormaly smaller. To make it readable, I need to make it bigger in an important scale (for instance, from .8em to 1.1 em). Unfortunately, the new text's size doesn't always match the one before it was put inside the anchor tag.

What I want is to be able to restore the previous settings as before I place the tag containing the text inside the li tag. Is there a trick to do that? Let's say, for font-size = 12px, do I need to make it, for instance, 15px to go back to 12px?

EDIT

Actually, a tag is not causing me trouble, but it's rather li tag which shrinks all the put inside. So, I've edited the above post by replacing all the a tag by li tag. I'm sorry for that. Anyway; while I thought I've run into an issue, after reading article suggested by S. Jones, I'm aware of the inheritence property on some tags.

Here's the issue. Let's say, I have

<a href = "somewhere">Somewhere<a>
a { font-size: 12px;}

After I put the above tag inside a li tag

<li><a href = "somewhere">Somewhere<a></li>
a { font-size: ???;}

After reading S. Jones article, I wonder if I need to disable inheritence or use IMPORTANT!!!

Thanks for helping

Answer 1

It sounds like you've got cascading and inheritance issues with your CSS.

You might want to look through the following:

• Cascading Order and Inheritance in CSS
• CSS Structure and Rules

---

There are several ways that you could fix your issue, but I can't say sure without seeing your CSS and HTML. If you could post some sample HTML along with your CSS file which illustrates your issue - several people here on SO will be able to recommend solutions.

---

Debug Recommendation: If you're not currently using it, you might want to look at installing the Firebug plugin for Firefox. It's a great tool for inspecting your page. You can highlight specific areas, and Firebug will show you which HTML elements and CSS classes are responsible for the layout.

---

UPDATE: Thanks, that's much more clear. Check your CSS file for any styling being applied to your list elements (li, ol, ul). You'll either need to remove some styling from these elements, or define font-size specifically for a elements nested within li.

For Example: li a {font-size:12px;} which will set the font size for a elements, only when they are nested within li elements.

Cheers.