I have some trouble working out a css issue.
I have to pages working fine indivually.
But when i bring them together the site seems to blow out.
All I can narrow it down to is that there are the similarly named style on both pages which is causing the issue.
1. Is this correct?
2. Can I rename these style classes to work correctly. (ul and il seem to be the common amongst both pages.
code of new file.
<style type="text/css">
body {
behavior:url("../htc/cssho
ver.htc");
}
* {
font-family:arial,tahoma,v
erdana,hel
vetica;
font-size:12px;
}
.home{
width: 139px;
height: 21px;
background-image: url(img/button_header_grey
.gif);
background-repeat: no-repeat;
background-position: left top;
padding: 9px 0px 0px 9px;
}
/* the menu */
ul,li,a {
display:block;
margin:0;
padding:0;
border:0;
}
ul {
width:139px;
list-style:none;
}
li {
position:relative;
padding:4px 0px 0px 8px;
z-index:9;
background-image: url(img/button_sub_grey.gi
f);
background-repeat: no-repeat;
background-position: left top;
height: 22px;
width: 139px;
}
li.folder ul {
position:absolute;
left:120px; /* IE */
top:0px;
}
li.folder>ul { left:137px; } /* others */
a {
padding:2px;
text-decoration:none;
color:gray;
font-weight:bold;
width:100%; /* IE */
}
li>a { width:auto; } /* others */
li a.submenu {
background:right;
}
/* regular hovers */
a:hover {
border-color:gray;
color:#FF6600;
}
li.folder a:hover {
color: #FF6600;
}
/* hovers with specificity */
li.folder:hover { z-index:10; }
ul ul, li:hover ul ul {
display:none;
}
li:hover ul, li:hover li:hover ul {
display:block;
}
.sub {
position:relative;
padding:3px 0px 0px 5px;
z-index:9;
height: 22px;
width: 139px;
background-color: #E8EFF3;
border: 1px solid #CCCCCC;
margin: -1px -1px -1px -2px;
}
</style>
</head>
<body>
<ul id="menu">
<div class="home"><a href="#"> One </a></div>
<li class="folder">
<a href="#" class="submenu"> Two </a>
<ul>
<div class="sub"><a href="#"> Sub One </a></div>
<div class="sub"><a href="#"> Sub Two</a></div>
<div class="sub"><a href="#"> Sub Three</a></div>
</ul>
</li>
<li class="folder">
<a href="#" class="submenu"> Three</a>
<ul>
<div class="sub"><a href="#"> Sub One </a></div>
<div class="sub"><a href="#"> Sub Two </a></div>
<div class="sub"><a href="#"> Sub Three </a></div>
</ul>
</li>
<li><a href="#"> Four </a></li>
</ul>
