Clickable link area in Horiz Menu - IE problem

HTML & CSS
1

Hi,

I’m trying to create a horizontal menu using CSS. It has to be fixed width because the ‘buttons’ tie into an image below.

I have created the menu and it works, however, the hover and clickable areas seem to be a bit strange in IE8. Rather than the whole button being clickable, the top and bottom is and the text is, but the rest is not??

See attached image, I have highlighted the areas in yellow that act as a link or initiate teh hover effect - I want to avoid those dead areas either side of the text.

My CSS is below.

Any ideas?

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx TOP MENU xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
#header-buttons{
	margin-right:46px;
	float:right;
	height:33px;
	/*border:solid 1px #000000;*/
}

#header-buttons ul {
	list-style:none;
	padding:0px;
	margin:0px;
	float:left;
	}

#header-buttons li {
	float:left;
}

#header-buttons a {
	/*border:solid 1px #000000;*/
	display: block;
	margin-left:4px;
	width:109px;
	height:25px;
	text-align:center;
	color:#FFFFFF;
	text-decoration:none;
	font-size:16px;
	background-image:url(../images/double-buttons.gif);
	background-repeat:no-repeat;
	background-position:0px -33px;
	padding-top:8px;
	border:0px;
}

#header-buttons a:hover {

	background-position:0px 0px;
	/*text-decoration:underline;*/

}
2

Hi, you have given us the CSS, although not the HTML to go along with that code. If IE8 is displaying that way, is Opera/FF also dispalying it like this? Or just IE8. If just IE8 make sure your HTML/CSS is valid.

Post a link to yoru site so we can fully debug this :). Or if you don’t have a site, post your HTML to go along wit that (try and minimalize the test case so it’s easier for us and quicker)

3

Hi sorry for the delay in responding - timezones to blame.

The site’s not live but here is the appropriate bit of html:

<body> 
<div id="wrapper"> 
	<div id="topbar"> 
		<div id="topbar-buttons">		<div class="moduletable"> 
					<p>xxx</p>		</div> 
	</div> 
		<div id="search">		<div class="moduletable"> 
					<form action="index.php" method="post"> 
	<div class="search"> 
		<input name="searchword" id="mod_search_searchword" maxlength="20" alt="Search" class="inputbox" type="text" size="20" value="search..."  onblur="if(this.value=='') this.value='search...';" onfocus="if(this.value=='search...') this.value='';" /><input type="submit" value="Search" class="button" onclick="this.form.searchword.focus();"/>	</div> 
	<input type="hidden" name="task"   value="search" /> 
	<input type="hidden" name="option" value="com_search" /> 
</form>		</div> 
	</div> 
		
	</div> 
	
	<div id="header"> 
		<div id="header-buttons">		<div class="moduletable"> 
					<ul id="mainlevel-nav"><li><a href="/holyhead%20tc/index.php?option=com_content&amp;view=article&amp;id=25&amp;Itemid=28" class="mainlevel-nav" >Home</a></li><li><a href="/holyhead%20tc/index.php?option=com_content&amp;view=article&amp;id=22&amp;Itemid=29" class="mainlevel-nav" >About us</a></li><li><a href="/holyhead%20tc/index.php?option=com_newsfeeds&amp;view=newsfeed&amp;id=1&amp;feedid=1&amp;Itemid=18" class="mainlevel-nav" >News</a></li><li><a href="/holyhead%20tc/index.php?option=com_content&amp;view=article&amp;id=27&amp;Itemid=30" class="mainlevel-nav" >Fundraising</a></li><li><a href="/holyhead%20tc/index.php?option=com_content&amp;view=article&amp;id=21&amp;Itemid=54" class="mainlevel-nav" >Contact Us</a></li></ul>		</div> 
	</div> 
		<div id="language">		<div class="moduletable"> 
					<a href="/holyhead%20tc/index.php?option=com_content&amp;view=article&amp;id=5&amp;setLang=cy-GB&amp;Itemid=2"><img src="/holyhead tc/modules/mod_M17n/icons/cy.gif" alt="Cymraeg (Welsh)" title="Cymraeg (Welsh)" border="0" /></a>&nbsp;<img src="/holyhead tc/modules/mod_M17n/icons/en.gif" alt="English (United Kingdom)" title="English (United Kingdom)" border="0" />		</div> 
	</div> 
		<div id="graphic"></div> 
	</div>
4

Opera, Chrome, Safari and Firefox work just fine.

5

Hi,

Give the parent float position:relative to bring it on top.


#header-buttons ul {
    list-style:none;
    padding:0px;
    margin:0px;
    float:left;
 [B]   position:relative;
    z-index:9;[/B]/* at least higher than what comes next*/
    }
6

Worked a treat Paul O’B

Briefly, what was the issue?

7

Seemed to be a bit of a bug in IE8 and the following content that wrapped the float seem to lay on top of everything except the foreground anchor text.

I just forced the issue and made the floated buttons be higher in the stacking context and the wrapping content went underneath as it should.:slight_smile:

IE8 has always had link bugs right from the start and in the beta version you had to add position:relative to make links active. This is probably a similar bug.

Reduced text case:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul {
    list-style:none;
    margin:0;
    padding:0;
}
li, li a {
    float:right;
    width:100px;
    text-align:center;
    color:#000;
    background:red;
    height:25px;
    line-height:25px;
    display:inline;
    text-decoration:none
}
li {
    margin:0 10px;
}
li a:hover {
    background:blue;
    color:yellow
}
div {
}
</style>
</head>
<body>
<ul>
    <li><a href="#">test link</a></li>
    <li><a href="#">test link</a></li>
    <li><a href="#">test link</a></li>
    <li><a href="#">test link</a></li>
</ul>
<div><a href="#">b</a></div>
</div>
<p>An empty div containing an anchor results that in the floated menu the space to the side of the text is not clickable or active and the top and bottom are a bit hit and miss also. The text is ok. Giving a width or height to the div solves the problem as does setting position:relative on the floated menu.</p>
</body>
</html>
8

Much appreciated