I'm trying to adapt a css file to suit my site. At the moment the bits i've changed work ok, but i've a problem with hover when viewing in IE. It works in FF and changes the background image of the item, but it doesn't do anything in IE. So any ideas basically as its more or less the first time working with CSS.
The bit to concern is newsitem:hover
The bit to concern is newsitem:hover
Code:
/* CSS Document */
body {
background-color:#003366;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:0.74em;
color:#333333;
line-height:20px;
cursor:default;
margin:0;
background-position:center;
background-repeat:repeat-y;
}
#container {
width:90%;
padding:10px;
background-color:#FFFFFF;
margin:0 auto 0 auto;
margin-top: 10px;
}
#header {
width:100%;
background-color:#003366;
height:100px;
color:#FFFFFF;
font-family:"Trebuchet MS", Arial, Verdana;
font-size:150%;
font-weight:bold;
line-height:20px;
}
#header p {
padding:5px;
margin:0;
margin-left:340px;
margin-right:10px;
text-indent:5px;
}
#header h1 {
color:#FFFFFF;
font-family:"Trebuchet MS", Arial, Verdana;
font-size:150%;
font-weight:bold;
padding:0;
padding-top:20px;
padding-left:20px;
padding-bottom:20px;
margin:0;
background-image:none;
}
#main_menu {
width:700px;
padding-top:5px;
padding-bottom:5px;
background-color:#CCCCCC;
text-align:right;
color:#FFFFFF;
margin-bottom:10px;
}
#main_menu a {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:60%;
font-weight:bold;
text-transform:uppercase;
color:#FFFFFF;
text-decoration:none;
padding-left:5px;
padding-right:5px;
padding-top:12px !important;
padding-top:13px;
padding-bottom:11px;
margin-left:1px !important;
margin-left:1px;
}
#sidebar {
width:150px;
border:1px solid #cccccc;
padding:5px;
float:left;
clear:left;
background-image: url("images/backgrounds/article.jpg");
background-position:bottom right;
background-repeat:repeat-x;
}
#sidebar h1,h2,h3 {
font-family:Arial Narrow, Arial, Helvetica, sans-serif;
letter-spacing:-1px;
color:#000000;
border:none;
background-image:none;
}
.newsitem {
margin-left:170px;
padding:10px;
border: 1px solid #cccccc;
background-image: url("images/backgrounds/newsnormal.jpg");
background-position:top left;
background-repeat:no-repeat;
margin-bottom:10px;
}
.newsitem:hover {
background-image: url("images/backgrounds/newshover.jpg");
background-position:top left;
background-repeat:no-repeat;
margin-bottom:10px;
}
.newsitem p {
margin:10px;
}
.news_info {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#666666;
letter-spacing:2px;
font-variant:small-caps;
text-transform:lowercase;
}
.news_info a {
font-weight:bold;
text-decoration:none;
color:#000000;
}
h1,h2,h3 {
font-family:Arial Narrow, Arial, Helvetica, sans-serif;
letter-spacing:-1px;
color:#000000;
border-bottom:2px solid #cccccc;
background-image: url("images/emblem2.gif");
background-position:top right;
background-repeat:no-repeat;
padding-bottom:5px;
padding-top:5px;
}
.comment {
margin-left:0px;
padding:10px;
border: 1px solid #cccccc;
background-color:#003366;
margin-bottom:10px;
}
a {
color:#9ACC53;
text-decoration:none;
}
a:hover {
border-bottom:1px dotted #000000;
}