Ever had people gripe because the second line of a list item doesn’t align under the bullet correctly? (This is only a problem in IE by the way – Firefox does the work for you.)

So here is an example of the problem (remember if your not viewing in IE you won;t see anything wrong.) :

Here is how I fixed it, first the code:

<li>Over 50 years of staffing </li>
<li class=”bullet-hidden”><span class=”bullet-visible”>industry knowledge</span></li>

Then the CSS styles:

.bullet-visible {
visibility:visible;
}

.bullet-hidden {
visibility:hidden;
}

If for some reason you can define the style sheets or don;t want ot you can do it directly in the code as follows:

<li>Over 50 years of staffing </li>
<li style=”visibility: hidden;”><span style=” visibility:visible;”>industry knowledge</span></li>

And abracadabra:

This entry was posted on Monday, May 5th, 2008 at 4:21 am and is filed under CSS, General WebDev, HTML. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.