image sprite menu problems - no links, display wrong

Discussion in 'CSS' started by briligg, May 14, 2010.

0
  1. #1
    The links don't work on this menu. The code validates. it's at www.briligg.com/regulate-drugs.html

    External style sheet:

    
.menu {
	position: relative;
    float: left;
	margin: 10px;
	padding: 0;
    width: 150px;
	}
.menu li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	left: 0;
	top: 260px;
	}
.menu li, .menu a {
	width: 150px;
	height: 150px;
	}
    Code (markup):
    internal style sheet

    <style type="text/css">
#frailty {
	left: 0;
	width: 150px;
	}
#frailty {
	background: url('http://www.briligg.com/images/regdrugnav.png') 0 0;
	}
#toll {
	left: 151px;
	width: 150px;
	}
#toll {
	background: url('http://www.briligg.com/images/regdrugnav.png') 0 151px;
	}
#option {
	left: 301px;
	width: 150px;
	}
#option {
	background: url('http://www.briligg.com/images/regdrugnav.png') 0 301px;
	}
#weighing {
	left: 451px;
	width: 150px;
	}
#weighing {
	background: url('http://www.briligg.com/images/regdrugnav.png') 0 451px;
	}
</style>
    Code (markup):
    html
    
<ul class="menu">
<li id="frailty" title="frailty">
<a href="frailty.html"></a>
</li>
</ul>
<ul class="menu">
<li id="toll" title="the toll">
<a href="toll.html"></a>
</li>
</ul>
<ul class="menu">
<li id="option" title="the option">
<a href="option.html"></a>
</li>
</ul>
<ul class="menu">
li id="weighing" title="the pros and cons">
<a href="weighing.html"></a>
</li>
</ul>
    HTML:
     
    Last edited: May 14, 2010
    briligg, May 14, 2010 IP
  2. MervinJ

    MervinJ Peon

    Messages:
    60
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    works in FF an IE for me...
     
    MervinJ, May 14, 2010 IP
  3. extremephp

    extremephp Peon

    Messages:
    1,290
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    0
    #3
    It is working fine for me in FF..!

    Do let me know incase you have some troubles to your HTML or CSS...!

    Thanks.
     
    extremephp, May 14, 2010 IP
  4. briligg

    briligg Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    the problem was fixed by the time you guys went there. The were two issues - i needed to add
    .menu li, menu a {display: block;}
    Code (markup):
    and i switched the class selectors in the internal style sheet to id selectors, so they would have more specificity and trump .menu li in the external style sheet.

    gotta say though - i got my help in stackoverflow, in 6 min. turnaround time here - several hours. things are really moving towards stackoverflow.

    thanks for taking a look at it.
     
    briligg, May 15, 2010 IP