Anchor overstepping its bounds.
Posted: Tue Sep 13, 2011 5:59 pm
Hello everybody, Im trying to create a menu on a page. Instead of using lengthy descriptions, I'll just include a screenshot of what I have.

and the code is as follows:
and the CSS
So basically, tier 2 is the black background which contains the menu items. Now the problem is this. For Safari and Chrome, the entire div (tier 2) behaves as a link when the mouse is rolled over it. Well at least most parts of it. Clearly, the anchors have been defined only for the menu items but for safari and chrome, they extend over to the black area. How can one fix that?
and the code is as follows:
Code: Select all
<html>
<body>
<div id = "tier2">
<a href =""> <div class = "menu_decor" style = "position:relative;left:40px;bottom:40px;"> <p class="menu" > ABOUT US </p> </div> </a>
<a href =""> <div class = "menu_decor" style = "position:relative;left:165px;bottom:140px;"> <p class="menu" > EVENTS </p> </div> </a>
<a href =""> <div class = "menu_decor" style = "position:relative;left:295px;bottom:239px;"> </li> <p class="menu" > MUSIC </p> </div> </a>
<a href =""> <div class = "menu_decor" style = "position:relative;left:425px;bottom:337px;"> <p class="menu" > GALLERY </p> </div> </a>
<a href =""> <div class = "menu_decor" style = "position:relative;left:555px;bottom:436px;"> <p class="menu" > DOWNLOADS </p> </div> </a>
<a href =""> <div class = "menu_decor" style = "position:relative;left:685px;bottom:535px;"> </li> <p class="menu" > LOCATIONS </p> </div> </a>
</div> <!--closes tier 2-->
</body>
</html>
Code: Select all
#tier2{height:26%; width:85%; border:1px solid black; margin:auto;
/* fallback (Opera) */
background: #000000;
/* Mozilla: */
background: -moz-linear-gradient(top, #000000, #252525);
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, left bottom, from(#000000), to(#252525));
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#000000', EndColorStr='#252525', GradientType=0);
}
.menu{position:relative;top:30px;left:2px; color:#ffffff; font-family:"Lucida Console"; font-size:20px; font-weight:bold;}
.menu_decor{ width:100px; height:80px; border-bottom-left-radius:15px; -moz-border-radius-bottomleft-:15px; border-bottom-right-radius:15px; -moz-border-radius-bottomright-:15px;
/* fallback (Opera) */
background: #023a67;
/* Mozilla: */
background: -moz-linear-gradient(top, #023a67, #008983);
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, left bottom, from(#023a67), to(#008983));
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#023a67', EndColorStr='#008983', GradientType=0);
So basically, tier 2 is the black background which contains the menu items. Now the problem is this. For Safari and Chrome, the entire div (tier 2) behaves as a link when the mouse is rolled over it. Well at least most parts of it. Clearly, the anchors have been defined only for the menu items but for safari and chrome, they extend over to the black area. How can one fix that?