Overruling CSS

At work they finally listened and put skip links. They took my code and dismantled it. They are in the mindset of only screen readers use it, so we don’t need to show it. I am in the camp that we need to for keyboard navigation.

here is the code I gave them with random crap added.


html #skiplinks ul a
{
        /*display: none;
        margin: 0 0 0 0;
        padding: 0 0 0 0;*/
        margin:0;
        left:0;
        height:1%;
}

ul.skippy {
	position: absolute;
	top:-1000px;
	left: -2000em;
	height:1px;
	width:1px;
	text-align:left;
	overflow:hidden;
	/*z-index: 9999;
	padding: 0;
	margin: 0;*/
	}

/*Added new styles for skip nav {DK 10 2010}*/

a.skippy {
	position:absolute;
	top:-1000px;
	left:-1000px;
	height:1px;
	width:1px;
	text-align:left;
	overflow:hidden;
}

a.skippy:active, a.skippy:focus, a.skippy:hover {
	top:0;
	left:0;
	font-size:1em;
}

I am trying to impose my rules to over run that garbage, but not sure what I am missing:


#skiplinks ul.skippy {
	position: absolute;
	left: -2000em;
	z-index: 9999;
	padding: 0;
	margin: 0;
	height: auto;
}
#skiplinks ul.skippy a.skippy:active, #skiplinks ul.skippy a.skippy:focus {
	position:absolute;
	width: 150px;
	height: 1em;
	padding: 3px;
	margin: 0;
	background-color: #01007f;
	color: #FFFFFF;
	font-weight: bold;
	left: 2000em;
	top: 0; 
}

I think it is the two element negative that is messing up.

html #skiplinks ul a {…} has the extra HTML tag in front of it which could be adding wight to their original rules.

Try: html #skiplinks ul.skippy a.skippy:active, html #skiplinks ul.skippy a.skippy:focus {…} hopefully that helps

Hi,

Not sure if this is what you meant:


<!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>
html #skiplinks ul a {
    /*display: none;
        margin: 0 0 0 0;
        padding: 0 0 0 0;*/
        margin:0;
    left:0;
    height:1%;
}
ul.skippy {
    position: absolute;
    top:-1000px;
    left: -2000em;
    height:1px;
    width:1px;
    text-align:left;
    overflow:hidden;/*z-index: 9999;
    padding: 0;
    margin: 0;*/
}
/*Added new styles for skip nav {DK 10 2010}*/
 
a.skippy {
    position:absolute;
    top:-1000px;
    left:-1000px;
    height:1px;
    width:1px;
    text-align:left;
    overflow:hidden;
}
a.skippy:active, a.skippy:focus, a.skippy:hover {
    top:0;
    left:0;
    font-size:1em;
}
#skiplinks ul.skippy {
    position: absolute;
    left: -2000em;
    z-index: 9999;
    padding: 0;
    margin: 0;
    height: auto;
    width:auto;
    overflow:visible;
}
#skiplinks ul.skippy a.skippy:active, #skiplinks ul.skippy a.skippy:focus {
    position:absolute;
    width: 150px;
    height: 1em;
    padding: 3px;
    margin: 0;
    background-color: #01007f;
    color: #FFFFFF;
    font-weight: bold;
    left: 2000em;
    top: 1000px;
    overflow:visible;
}
</style>
</head>
<body>
<div id="skiplinks">
    <ul class="skippy">
        <li><a class="skippy" href="#">testing</a></li>
    </ul>
</div>
</body>
</html>


sorry for the delay, do I need to add the last set of rules to my css or all?

Hi,

IIRC I made the last 2 rule blocks over-ride the existing rules as you mentioned were trying to do. So the first rules should be the same as you had them before and the only changes should be these rules:


#skiplinks ul.skippy {
    position: absolute;
    left: -2000em;
    z-index: 9999;
    padding: 0;
    margin: 0;
    height: auto;
    width:auto;
    overflow:visible;
}
#skiplinks ul.skippy a.skippy:active, #skiplinks ul.skippy a.skippy:focus {
    position:absolute;
    width: 150px;
    height: 1em;
    padding: 3px;
    margin: 0;
    background-color: #01007f;
    color: #FFFFFF;
    font-weight: bold;
    left: 2000em;
    top: 1000px;
    overflow:visible;


Unless I changed something else :slight_smile:

ok thanks - will try in a bit