Side Links
Note that for these various examples I am using the class of sideLinks and then adding a number for each following example to separate the styling from one example to the next.
So I have the 'hover' property giving a different color to the background, but it is limited to the size of the text. I would like it to expand to the orange 'border' in all four directions.
With the addition of .sideLinks2 a { display: block; } the background extends side to side, but not vertically.
Changing the anchor definition to .sideLinks3 a { margin: 0; padding: 0.5em 0em; } (removing the display:block) we get it working vertically but not horizontally.
Combining the sideLinks2 and sideLinks3 .sideLinks4 a { margin: 0; padding: 0.5em 0em; display: block; } (removing the display:block) we get the background filling completely, but uneven <P> spacing.
I've tried to even out the spacing by reducing the padding in .sideLinks5 p { padding: 0; } to zero. But again, vertical spacing is uneven between the links and non-links. This example is the closest I have gotten. It was suggested I add in a .sidelinks5 { margin: 0; padding: 0; } but it doesn't seem to help any.
Does it work? No. This is just a more complicated way of getting the results in sideLinks2.
I tried reducing the padding when an A followed a P. .sideLinks6 p a { padding: 0; }. I think I need the opposite. Something like sideLinks5, but adding padding when there is a P not followed by an A. But I don't think you can have .sideLinks5 p !a { padding: 0.5em 0em; }
Hmm.... .sideLinks7 p !a { padding: 0.5em 0em; }. Not valid CSS.
