Hey,
I have been modifying a website, on which the navigation bar was working fine. Now the same navigation bar refuses to display properly, whatever browser I use: Firfox, Safari, Opera.
The background image appears only when the mouse hovers, and the dark line that signals which page is active, appears on top of the page instead of on the button itself.
I use 3 different CSS for one website, 5 main pages, and this problem appears on every page.
The site is crossroadinnovation .com It seems I can't post the HTML here, but here is the CSS code for the navigation bar, as well as for the "darkline":
/* navigation menu */
#navmenu{
position: absolute;
margin-top: -21px;
text-align: center;
width: 1006px;
height: 15px;
}
#navmenu ul {
list-style-type: none;
margin-top: 0px;
padding: 12px;
list-style-image: none;
}
#navmenu li {
list-style:none;
float: left;
width: 100px;
margin: 0px auto;
padding: 0;
display: inline;
width: 186px;
height: 1%;
}
#navmenu li a {
font-family: Times New Roman, Times, serif;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
color: #ffffff;
text-decoration: none;
}
/* links mouseover effect*/
#dialogue{
position: absolute;
width: 185px;
height: 15px;
background-image: url(...);
cursor: pointer;
outline: hidden;
padding: 5px;
top: 11px;
}
#dialogue:hover{
background: url(...);
outline: none;
}
#cocreation{
position: absolute;
margin-left: 196px;
width: 185px;
height: 15px;
background-image: url(...);
cursor: pointer;
outline: hidden;
padding: 5px;
top: 11px;
}
#cocreation:hover{
background: url(...);
outline: none;
}
#aboutus{
position: absolute;
margin-left: 392px;
width: 186px;
height: 15px;
background-image: url(...);
cursor: pointer;
outline: hidden;
padding: 5px;
top: 11px;
}
#aboutus:hover{
background: url(...);
outline: none;
}
#services{
position: absolute;
margin-left: 589px;
width: 186px;
height: 15px;
background-image: url(...);
cursor: pointer;
outline: hidden;
padding: 5px;
top: 11px;
}
#services:hover{
background: url(...);
outline: none;
}
#contact{
position: absolute;
margin-left: 786px;
width: 186px;
height: 15px;
background-image: url(...);
cursor: pointer;
outline: hidden;
padding: 5px;
top: 11px;
}
#contact:hover{
background: url(...);
outline: none;
}
/*Darkline on link -active page */
#darkline {
z-index: 10;
position: absolute;
top: 10px;
}
#darkline_dialogue{
position: absolute;
margin-left: 12px;
margin-top: 11px;
width: 195px;
height: 2px;
background-image: url(...);
}
#darkline_cocreation{
position: absolute;
margin-left: 208px;
margin-top: 11px;
width: 195px;
height: 2px;
background-image: url(...);
}
#darkline_aboutus{
position: absolute;
margin-left: 404px;
margin-top: 11px;
width: 196px;
height: 2px;
background-image: url(...);
}
#darkline_services{
position: absolute;
margin-left: 601px;
margin-top: 11px;
width: 196px;
height: 2px;
background-image: url(...);
}
#darkline_contact{
position: fixed;
margin-left: 798px;
margin-top: 11px;
width: 196px;
height: 2px;
background-image: url(...);
}