Hei Ivan, > The only problem with this is the little fade-to-white gull effect on > the right side. > As it stands, the structure of the action statements is this: > > <li> > <div class="action-something"><h1><a href="#">I want .... > OpenOffice.org</a></h1> > <p><a href="#">Blah blah blah</a></p></div> > </li> > > The <li> style contains the general rollover effect (reused for all > list items), and the individual div style includes just the icon and > its mouseover state. Could this be simplified perhaps? (I can't come > up with any other way, and this setup helps keep file sizes low) > > > Thinking about it...why don't you just give it a fixed height? ;-) > > Wouldn't this restrict the amount of text displayed in each <li> item > if the text size is increased? Maybe proportional width instead of > fixed width for the action statements would be better?
Ahh..i was assuming you'd used a separate div for the icon. Sorry, didn't look at the actual code. There'd be two ways: 1) You introduce a separate div for the icon, pack it at the beginning of the li, float it to the left and make the necessary adjustments. 2) You do as you do now, only that you use a bit of smart padding and negative vertical margin styling to extend the upper link to the full height and overlay it with the lower link. That way you should be able to associate the gradient background with the upper link (which is now full size) and hence cover of any bits of the icon-matrix that extend into the link/text area. This way you have no need for adding another tag. André.
signature.asc
Description: This is a digitally signed message part
