Using CSS to change text

code error

[bigbobby73]

Hello,

I have been working on changing a graphic into straight text modified by CSS. I'm having trouble with the line-height. I am trying to make the line height 3.2em; to allow for the text to display properly. The code works perfect in Mozilla based browsers but Opera and IE both cut off the bottom of the text.

I'm not sure if the error is my code, hence a lack of understanding on my part, or if it is a browser rendering problem.

Thanks for helping me out.

- Bob

[the bottoms of the pp's are cut off]

Code:

<div class="bigtest">
<div class="bigblue">Test1</div>
<div class="bigblack1">testtest2</div>
<div class="bigblack2">test3</div>
<div class="bigblue">Chopping</div>
</div>

CSS:

.bigtest {
line-height: 3.2em;
margin-left: 20px;
}
.bigblue {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 48px;
color: #004176;
font-weight: bold;
float: left;
letter-spacing: 2px;
margin: 0px 15px 0px 0px;
}
.bigblack1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 24px;
font-weight: bold;
}
.bigblack2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 24px;
float: left;
vertical-align: super;
letter-spacing: .1em;
font-style: oblique;
font-weight: bold;
margin: 0px 5px 0px 27px;
}

[Reflection]

Well you are using relative units for line height and fixed sized units for font-size. Your 48px font-size is probably bigger than 3.2em.