Recently, I noticed when I have the following code, my text wraps and ignores my padding for the second line.

<style>

.menuItemLvl2 {

Padding-left: 24px;

}

</style>

I wanted the hyperlink a tag to wrap and respect the padding. I also had highlighting on the A hyperlink tag for :hover state, so I coudnt use Margin-left:24px.

I applied the following CSS to fix my issue: ( I only add the green highlighted text to the above code)

<style>

.menuItemLvl2 {

Padding-left: 24px;

Float:left;

Width:200px; /* Note: you cannot use 100%, as the padding pushes the element out of its container that has a width of 224px. Use container width minus padding of this element*/

}

</style>

And on hover: (note, I did not include the code for a:hover in this example, but just set the background-color: #666666 or whatever color)

Works in Firefox and IE7.