3 problems: varying font sizes, image link borders and body font size

[JackA]

Product Image Item Name- Price fonts are different sizes and I can't find the fix

1. Prev Listing Next image buttons have what appear to be different color (red and blue) link status borders around them. How do I make them go away?
   
2. I want light gray borders around all my product images, but there is a tiny 1x1 pixel image above my first subcategories page (no images) with that same gray border around it. Can I turn off that litte image somehow, since I am not displaying product images at this level?
   
3. Why does the body tag have a font size of 62.5% applied? It seems to be affecting other font sizes I want to change

.

Thanks for any help.

[gjh42]

The 62.5% makes the base font size (1em) exactly 10 pixels, so other sizes are easy to figure in relation to that. It is really too small for the majority of the text on the site, in my opinion, but that is easy to change. Just be aware of all the things that will be altered if you enlarge the base.

For the items you want to style, your best bet is to use the Firefox Web Developer extension and its Information > Display Element Information tool, which will show you all the identifiers relevant to anything on the page. You can then style those in your stylesheet.

[JackA]

Trying to understand this, if the base is 62.5%, how would a 1.5em font size be styled in the css? I'm not even sure I'm asking the question correctly.

Let's put it another way: Without a 62.5% base, a 1.5em font size declaration would be 1.5ems, so how would the base setting change this setting?

[JackA]

I think I'm asking, of what parent is it 62.5% ? I'm obviously confused. I am learning to use the Web Develper tools.

[gjh42]

The base is 62.5% of the typical browser standard 16px, so that becomes 10px - that's the reason to use such an odd number, to get to a neat one.

Don't worry about what the parent of base is. 1em is now 10px, so 1.5em becomes 15px. Em is not an absolute dimension, but a relative one, equal to the height of a capital M (and more or less its width) in the font being output.

To further confuse you, if you have a block of text that has font-size: 1.5em; applied to it, it thinks of 1em as equal to 15px. Text inside that block that is styled at 1.2em will display as 1.2 x 15 = 18px. All clear? ;)