Hi,
I am quite new to css and can basically work with it but this time I came up with a customer whose clients mostly still use IE6… and I had to do some image navigation which is not working with IE 6…. please can someone help me to get this workin??
font {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.ala {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
li {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
.uutuus {
color: #CC3300;
}
/*<![CDATA[*/
* { margin: 0; padding: 0; }
body {
margin: 1em;
font: 83%/140% Verdana,Arial,Helvetica,sans-serif; ;
}
h2 {
font: normal 150% "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
}
h3 {
margin-bottom: 1em;
font: normal 130% "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
}
p { margin: 0.5em 0; }
a { text-decoration: none; font-weight: bold; }
a:hover { text-decoration: underline; }
.nav a:hover { text-decoration: none; }
small { line-height: 120%; }
.clear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clear { display: inline-block; }
/* Hides from IE-mac \*/
* html .clear { height: 1%; }
.clear { display: block; }
/* End hide from IE-mac */
/* image replacement general properties */
ul.IR li {
position: relative;
/* The original method recommends setting this so that the text doesn't peak out if you resize the text.
But overflow also includes our dropdown list, so we need the overflow to be visible. */
/*overflow: hidden; */
font-size: 0.9em;
}
.IR em {
display: block;
position: absolute;
top: 0; left: 0;
z-index: 1;
}
/* For IE5.x mac only */
* html>body .IR {
position: static;
overflow: visible;
font-size: 10px;
}
* html>body .IR em { position: static; }
/* image replacement specific properties */
.nav { list-style: none; }
.nav li { float: left; padding-bottom: 10px; } /* add a little bottom padding to make sure the
sub menus don't disappear before selecting them */
.nav li, .nav li em { width: 141px; height: 43px; }
* html>body ul.nav li em { margin-bottom: -43px; } /* for ie5.x/mac only */
.link1 em, .link2 em, .link3 em, .link4 em, .link5 em, .link6 em{
background: url(images/nav_Home.jpg) no-repeat;
cursor: pointer;
/* IE5 requires cursor: hand; however this is not valid CSS2 */
}
.link1 { left: 0; }
.link1 em { background-position: 0 0; }
.link1:hover em { background-position: 0 0; }
.link2 { left: 0px; }
.link2 em { background-position: -141px 0; }
.link2:hover em { background-position: -141px 0px; }
.link3 { left: 0px; }
.link3 em { background-position: -282px 0; }
.link3:hover em { background-position: -282px 0px; }
.link4 { left: 0px; }
.link4 em { background-position: -423px 0; }
.link4:hover em { background-position: -423px 0px; }
.link5 { left: 0px; }
.link5 em { background-position: -564px 0; }
.link5:hover em { background-position: -564px 0px; }
.link6 { left: 0px; }
.link6 em { background-position: -705px 0; }
.link6:hover em { background-position: -705px 0px; }
.nav a { font-weight: normal; }
* html .nav a { height: 1%; }
.nav li ul {
position: absolute;
top: 43px; /* position the dropdowns a set distance from the top of the image */
left: -999em;
width: 15em;
list-style:none;
background: #032f85
}
.nav li:hover ul { left: auto; }
.nav li li {
height: auto; /* reset the height and padding set on the IR list items */
padding-bottom: 0;
font-size: 110%;
/*border-bottom: 1px solid #FFCC00;*/
}
.nav li ul a {
padding: 0.15em;
color: #FFFF00;
background: #032f85;
}
.nav li ul a:hover {
color: #FFFFFF;
background: #032f85;
}
/*]]>*/
