Need CSS Help with a hover element - cant extend to left and right of page

Question

Hi there, Need some CSS guru help. If you visit my link:

http://www.gabbr.com/js/viewer/cmedata/index1.html

and hover over the years (top middles, 2008, 2009, 2010, etc) you will notice an orange bar extending from the top to the bottom of the page. I am trying to get the same effect on the left (month and day) but am unable to do so.

The problem I am having is that I cannot get the orange hover bar to extend off the left of the screen for either #dayleft or for #monthleft. It extends all the way to the right margin of the screen but not the left. The problem is the margin-left: 15px; in #monthleft and margin-left: 80px; in #dayleft. But I cannot get rid of these since I require them for the letter spacing.

Any advice?

Answer 1

#monthleft ul li a:hover {
   margin-left: -20px;
   width: 110%;
   text-indent: 20px;
}

Add this to your hover code. This did the trick for me in firebug.

Apply the same principle for your #dayleft element, adjusting the measurements of margin-left and text-indent to suit.

EDIT: This works for #dayleft

#dayleft ul li a:hover {
   margin-left: -110px;
   width: 110%;
   text-indent: 110px;
}