Anchor overstepping its bounds.

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
drayarms
Forum Contributor
Posts: 134
Joined: Fri Dec 31, 2010 5:11 pm

Anchor overstepping its bounds.

Post 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?
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: Anchor overstepping its bounds.

Post 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.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: Anchor overstepping its bounds.

Post 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.
Post Reply