HTML Hyperlink tags and word-wrap padding fix

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s