Page 1 of 1

Anchor overstepping its bounds.

Posted: Tue Sep 13, 2011 5:59 pm
by drayarms
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.


Image

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>


and the CSS

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?

Re: Anchor overstepping its bounds.

Posted: Tue Sep 13, 2011 6:56 pm
by califdon
"Clearly, the anchors have been defined only for the menu items "

Quite the contrary. You have enclosed the entire menu_decor class in the anchor. It is doing precisely what you coded it to do. Just move the <a tag to just before the part you want to serve as the hyperlink.

Re: Anchor overstepping its bounds.

Posted: Wed Sep 14, 2011 10:12 am
by Weirdan
Invalid markup tends to behave differently in different browsers. You shouldn't have been putting block elements (divs) in an inline element (a). At least style those divs as display:inline-block if you can't change the structure.