IE vs the rest

[Goofy]

In the 'Cookbook' it is recommended to use em instead of px - primarily because px is relative to the resolution the customer is using - and we all know the customer is in charge of what they see (smile).
em is relative and works in most browsers... because it is a percentage value.

To be safe it is best to use em.
Note Goofy uses em.

Here is what my CSS looks like for the margins...

#navColumnOneWrapper, #navColumnTwoWrapper {
margin-left: 0.5em;
margin-right: 0.5em;
}

SUMMARY:
em covers the majority of browsers regardless of version - it is a way of managing 'padding' and it is in percentage instead of pixels. Pixels are 'fixed' controlled by the viewers's resolution - whereas percentage is 'proportional' regardless of the viewer's settings.

Experiment with it -

jund

Ok, thx for support. I'm learning everyday...

[Goofy]

As I look in firefox to the right column headings they are bold but left column headings aren't.

In IE both left and right column headings are bold. I thought i specified both as bold:

.leftBoxHeading, .rightBoxHeading {
font-size: 1.4em;
font-weight: bold;
text-align: left;
margin-top: 0.5em;
padding: 0px;
color: #FF479D;
background-color: #FECAE3;
}

any comments?

[JohneeMac]

Sounds like something overriding it...

Do you have a link? Or are you working locally?

[kuroi]

Actually they are bold on both sides. The problem is something rather more complicated.

In your right column sideboxes you have label tags nested around the heading text but inside the heading tags itself. There is some general styling for labels that increases the font-size by .1em to 1.1em.

As the effect of ems is multiplicative, this makes the font size of the headings in your in your right hand column 10% larger than in the left.

This is compounded by browsers not scaling text smoothly. Font sizes and weights tend to "jump", and in this case I guess IE and FF must be jumping at a different point making the difference even more obvious.

To resolve this you need to over-ride the font size adjustment for the labels by adding

.rightBoxHeading label {font-size:1em}

to your stylesheet, ideally immediately before the heading font sizes are set. You may then wish to increase the heading font-size to 1.5em, but in any case they will act more consistently.

[Goofy]

Thank you so much!!

Now the font-size is equal on both sides.