I swear I haven’t changed anything and my css has died. Would anyone be able to try this out to see if it works on their machine? It was working fine yesterday, maybe I’ve changed something and haven’t realised?
In particular only the last couple of links are working on the #backnav, and the img:hover effects aren’t working in the #catnav. I can’t spot any errors whatsoever, but maybe I’ve been looking at it for too long.
/*----------------------------CRAZYPANTS LAYOUT WRAPPERS---------------------------*/
body {
text-align:center;/* for inline-block centerimg*/
white-space:nowrap;/*stop IE8/9 from dropping column*/
}
#wrapper, #sidebar, #footer {
white-space:normal;
text-align:left;
}/* reset whitespace and text */
html, body {
margin: 0;
padding: 0;
font-family: "Georgia", Serif;
height: 100%;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
#wrapper:after {
clear:both;
display:block;
height:1%;
content:" ";
}
#contents {
width: 960px;
margin: -60px auto 0px auto;
padding: 10px;
min-height: 100%;
position: relative;
padding:10px 10px 35px;/* protect footer */
zoom:1.0;/* ie haslayout*/
}
* html #contents {/* ie6 and under only*/
height:100%;
}
#wrapper {
zoom:1.0;/* ie haslayout*/
overflow:hidden;/* make an auto width rectangular block next to a float */
min-width:980px;/* same total width as wrapper*/
margin:0 auto;
position:relative;
z-index:1;
min-height:100%;
border-top:none;
border-bottom:none;
display:inline-block;
vertical-align:top;
}
* html #wrapper {
height:100%;
display:inline
}/* ie6 inline-block hack*/
*+html #wrapper {
display:inline
}/* ie7 inline-block hack */
/*----------------------------TOP NAVIGATION BAR---------------------------*/
#backnav ul {
position:absolute;
top: 0;
right: 50px;
margin: 0;
padding: 0;
color: #ddd;
background: #333;
height: 24px;
-webkit-border-bottom-right-radius: 12px;
-webkit-border-bottom-left-radius: 12px;
-moz-border-radius-bottomright: 12px;
-moz-border-radius-bottomleft: 12px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;
padding: 0 8px;
}
#backnav li {
display: inline-block;
float: left;
list-style: none;
padding: 4px 5px 2px;
font: 12px "Georgia", Serif;
}
#backnav li a {
display: inline-block;
color: #dddddd;
text-decoration: none;
}
#backnav li a:link {
color:#dddddd
}
#backnav li a:visited {
color:#dddddd
}
#backnav li a:hover {
color:#ffffff
}
#backnav li a:active {
color:#ffffff
}
/*----------------------------SEARCHFEILD + TITLE---------------------------*/
#searchwrapper {
min-height: 76px;
white-space: nowrap;
text-align: center;
border-bottom: 1px solid #aaaaaa;
padding-top: 84px;
}
#searchwrapper h1 {
font-style: italic;
font-size: 48px;
line-height: 76px;
margin: -6px 0 0 -150px;
}
#searchfield {
width: 360px;
height: 24px;
margin: 1px 0 0 10px;
border: none;
background:none;
}
#searchbutton {
height: 20px;
width: 20px;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
margin: 0 3px 1px 0;
}
#searchbutton:hover {
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
}
#searchbar {
margin-left: 20px;
border-radius: 13px;
border: 1px solid #cccccc;
border-top: 1px solid #999999;
height: 25px;
display: inline-block;/* -moz-box-shadow: inset 0 5px 5px -5px #aaa;
-webkit-box-shadow: inset 0 5px 5px -5px #aaa;
box-shadow: inset 0 5px 7px -5px #aaa;*/
}
#searchbar:hover {
-moz-box-shadow: inset 0 5px 5px -5px #aaa;
-webkit-box-shadow: inset 0 5px 5px -5px #aaa;
box-shadow: inset 0 5px 7px -5px #aaa;
}
/*<-------Use Javascript or Paul O'B's CSS Madness------->*/
/*#searchbar > #searchfield:focus {
-moz-box-shadow: inset 0 5px 5px -5px #aaa;
-webkit-box-shadow: inset 0 5px 5px -5px #aaa;
box-shadow: inset 0 5px 7px -5px #aaa;
}*/
#searchwrapper h1, #searchwrapper div, #searchwrapper input {
display: inline-block;
vertical-align: middle;
}
* html #searchwrapper h1, * html #searchwrapper div {
display: inline
}/* ie6 tripswitch */
*+html #searchwrapper h1, *+ html #searchwrapper div {
display: inline
}/* ie7 tripswitch */
/*----------------------------MARQUEE---------------------------*/
#marquee {
text-align: center;
width: 960px;
padding: 26px 0;
border-bottom: 1px solid #aaaaaa;
}
/*----------------------------CATEGORY NAVIGATION---------------------------*/
#catnav {
clear: both;
white-space: nowrap;
text-align: center;
padding: 26px 0;
border-bottom: 1px solid #aaaaaa;
}
#catnav ul {
position:relative;/*IE6/7 needs this*/
padding: 0;
margin: 0;
display: inline-block;
vertical-align: middle;
}
#catnav li {
display: inline-block;
float: left;
height: 77px;
width: 238px;
margin: 0 40px 0 40px;
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
}
#catnav img:hover {
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
/*----------------------------FOOTER---------------------------*/
#footer {
min-height: 30px;
width: 100%;
border-top: 1px solid #aaaaaa;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
clear: both;
margin: auto;
}
#footer ul {
position:relative;/*IE6/7 needs this*/
padding: 0;
margin: 5px 0 0 0;
display: inline-block;
vertical-align: middle;
color: #444444;
}
#footer li {
float: left;
list-style: none;
padding: 0px 8px 0px;
font: 12px "Georgia", Serif;
}
#footer li a {
display: inline-block;
color: #444444;
text-decoration: none;
}
#footer li a:link {
color:#444444
}
#footer li a:visited {
color:#444444
}
#footer li a:hover {
color:#000000
}
#footer li a:active {
color:#000000
}
/*----------------------------SIDEBAR---------------------------*/
#sidebar {
background-color: #333333;
width: 220px;
padding: 10px;
margin-left:-240px;
color:#fff;
position:fixed;
top: 0;
bottom: 0;
left: 0;
border-right:10px solid gold;
padding:20px 20px 5px;
height: 100%;
overflow:auto;
z-index:2;
-webkit-transition:margin 1s ease-in;
-moz-transition:margin 1s ease-in;
-ms-transition:margin 1s ease-in;
transition:margin 1s ease-in;
}
#sidebar:hover {
margin:0
}
#dummy-column {
width: 220px;
float:left;
margin-left:-240px;
padding:0 30px 0 20px;
height:100px;
position:relative;
-webkit-transition:margin 1s ease-in;
-moz-transition:margin 1s ease-in;
-ms-transition:margin 1s ease-in;
transition:margin 1s ease-in;
}
#sidebar:hover + #dummy-column {
margin:0
}
/*---------------------EXTRAS--------------------*/
input {
font-family: "Georgia", Serif;
font-size: 14px;
}
input:focus {
outline:none;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="_stylesheets/styles.css" />
<title>Test</title>
</head>
<body>
<div id="sidebar"></div>
<div id="dummy-column"></div>
<div id="backnav">
<ul>
<li><a href="test1/">test1</a></li>
<li><a href="test2/">test2</a></li>
<li><a href="test3/">test3</a></li>
<li><a href="test4/">test4</a></li>
<li><a href="test5/">test5</a></li>
<li><a href="test6/">test6</a></li>
<li><a href="test7/">test7</a></li>
</ul>
</div>
<div id="wrapper">
<div id="contents">
<div id="searchwrapper">
<h1>Heading</h1>
<div id="searchbar">
<input type="text" id="searchfield"/>
<input type="image" src="_images/searchbutton.png" id="searchbutton" alt="Search"/>
</div>
</div>
<div id="marquee"><img src="_images/home.png" /><!-- Image 800x320 --></div>
<div id="catnav">
<ul>
<li><a href="cat1/"><img src="_images/cat1.png"/></a></li>
<li><a href="cat2/"><img src="_images/cat2.png"/></a></li>
<li><a href="cat3/"><img src="_images/cat3.png"/></a></li>
</ul>
</div>
</div>
<div id="footer">
<ul>
<li><a href="test1/">test1</a></li>
<li><a href="test2/">test2</a></li>
<li><a href="test3/">test3</a></li>
<li><a href="test4/">test4</a></li>
<li><a href="test5/">test5</a></li>
<li><a href="test6/">test6</a></li>
<li><a href="test7/">test7</a></li>
</ul>
</div>
</div>
</body>
</html>
- still not sure why it has been working up until today…