SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Clickable link area in Horiz Menu - IE problem

    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?

    Code:
    /* 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;*/
    
    }
    Attached Images Attached Images

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,760
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    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)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi sorry for the delay in responding - timezones to blame.

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

    Code:
    <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. #4
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Opera, Chrome, Safari and Firefox work just fine.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

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

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Worked a treat Paul O'B

    Briefly, what was the issue?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.

    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:

    Code:
    <!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. #8
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Much appreciated


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •