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?