|
CSS - Horizontal Css Menu Woes, In Ie
I really hate having to hack IE because microsoft wont use w3c compliance, but nevermind that heres my problem. Its a basic problem with horizontal css menus on http://www.fasttracksites.com/tmp/test.htm
In FF it displays perfect, no problems, however in IE it wraps like a normal ul does, can someone please help me? Similar TutorialsHi, I have a site with a horizontal menu bar that has a submenu that pops up with the top menu is hovered over. I've got everything working fine, except for one little thing; in Firefox the submenu is vertically aligned instead of horizontally. For once IE has gotten it right (or at least the way I want it) by positioning the sub menu horizontally. I can't for the life of me figure out how to get the sub menu to flow horizontally in FF. I've tried display: inline and float: left and all kinds of things but nothing seems to affect it. My site is here http://www.soton.ac.uk/~rollhock/new/index3.php And the css file http://www.soton.ac.uk/~rollhock/new/includes/style.css If anyone is able to help I will be eternally grateful! Thanks I can't get a drop down menu to display and don't know what I'm doing wrong. My guess is that other styles for this menu are interfering, but I've tried experimenting and it never works. Can anyone kindly assist? Here's the CSS for the part of my navigation menu I'm working on (I know this is not the most streamlined): Code: #nav2 {
float: right;
background-image: url(../2010site/graphics/nav2back.jpg);
background-repeat: no-repeat;
height: 32px;
font-size: 14px;
color: #ffffff;
text-decoration: none;
text-align: center;
margin: auto;
padding: 0px 30px 0px 0px;
}
#nav2 ul li {
display: inline;
list-style: none;
background-image:url(../2010site/graphics/rednavdetail.jpg);
background-repeat: no-repeat;
margin: auto;
padding: 0px 20px 0px 20px;
}
#nav2 a {
color: #ffffff;
margin: auto;
padding: 0px 0px 0px 0px;
}
#nav2 a:hover {
text-decoration: underline;
margin: auto;
padding: 0px 0px 0px 0px;
}
Then I'm trying to add a drop down to a nested list item within that navigation using Code: li ul {display: none;}
li:hover > ul {display: block;}
But whenever I add that at the end of the nav2 styles, I can only see my nested menu that is supposed to appear during the hover. The other menu items beyond the nested UL don't appear at all. Here's the html: Code: <ul>
<li><a href="http://">Schedule</a>
<ul>
<li><a href="http://">item one</a></li>
<li><a href="http://">item two</a></li>
<li><a href="http://">item three</a></li>
</ul>
</li>
<li><a href="http://">Programs</a></li>
<li><a href="http://">Events</a></li>
<li><a href="http://">Donate</a></li>
</ul>
Hi all, I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear. You can find the page he http://www.perceptes.com/topdog/ The CSS and JS (uses jQuery) can be found he http://www.perceptes.com/topdog/css/screen.css http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment) http://www.perceptes.com/topdog/js/tdps.js http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment) For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look. Thanks very much in advance! Ok, I know virtually nothing about css, but realized that that a css menu is better for SEO. Anyway I found this vertical menu that works the way I want it. But I also need a horizontal version of it with dropdown submenus. Can someone help with this? I have been trying a bunch of things but it just looks awful and doesn't work right. It has 3 basic componets; Html, Javascript, and css. Here they are below. drop_down.js: Code: // JavaScript Document
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "style2.css";
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
</body>
</html>
Style2.CSS: Code: body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
Hi, I have the following menu that is currently laid out with a table: http://www.ianarmstrong.com/menutest/ I want to switch this to be styled in CSS somehow. I've looked at using a styled unordered list to do this, but that doesn't seem like the best idea as each image in my menu is different. Thus I can't have 5 different <li> elements, each with a different bg image. I need a way to handle the 5 different images, and have a mouseover effect as well. Could someone offer some direction on this problem? I've tried the tutorials on CSS menus but can't seem to get it to work right for my project. I want a spacer to seperate the buttons at 1 pixels wide but currently it's about 10 pixels wide. I've adjusted until i'm blue in the face can somebody help? The code is below: Code:
<tr>
<td width="766">
<div id="navcontainer">
<ul>
<li><a href="">Home</a></li>
<li><a href=""> Project Status</a></li>
<li><a href=""> Tasks</a></li>
<li><a href="">General Information</a></li>
<li><a href="">Completed Tasks</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
CSS Code:
body,html {
margin: 0;
}
#navcontainer ul {
list-style-type: none;
text-align: center;
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
margin: 0px;
padding: 0px;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: 0.2em 1em;
color: #fff;
background-image: url(images/back.gif);
height: 24px;
line-height: 23px;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #960033;
background-attachment: fixed;
background-repeat: repeat;
background-position: center;
background-image: url(images/backover.gif);
}
--- I have a horizonatal menu on my webise and the list items that drop down, are all jumbled into a single block of text. How do I create a new line fore each list item? I am trying to create a navigation menu for a page using images i have sliced in photoshop and I now need to put the images all on a 900px wide line and link them to the appropiate pages. When i put the images next to each other i end up with a gap. The only way I have found to solve the problem is to leave the img src all on the same line. I'm sure this isn't the best way to do it and it is throwing out the div below. Ideas anyone? Code: Code: Original - Code <div id="nav"> <img id="home" src="images/menu/home.gif" alt="" /><img id="about" src="images/menu/about.gif" alt="" /><img id="wedding" src="images/menu/wedding.gif" alt="" /><img id="corporate" src="images/menu/corporate.gif" alt="" /><img id="occasions" src="images/menu/occasions.gif" alt="" /><img id="contact" src="images/menu/contact.gif" alt="" /> </div> <div id="nav"> <img id="home" src="images/menu/home.gif" alt="" /><img id="about" src="images/menu/about.gif" alt="" /><img id="wedding" src="images/menu/wedding.gif" alt="" /><img id="corporate" src="images/menu/corporate.gif" alt="" /><img id="occasions" src="images/menu/occasions.gif" alt="" /><img id="contact" src="images/menu/contact.gif" alt="" /> </div> Jake Has anyone created a CSS horizontal fly-out menu list? I have a 3 level navigation list. The level 1 has 5 items, the first item of which has no sub-list. How can I get the level 2 and 3 lists to fly-out at the same level as its parent item? what i want as horizontal fly out menu BUT I want the list of items to appear horizontally in a line below. These menus have the items appear vertically from a horizontal menu i looked at these and could find one http://www.cssdrive.com/index.php/menudesigns/category/C20/ I want to center a horizontal menu (not the words - the entire menu). Everything I read says I need to insert align-text: center into the #menu ul portion of my CSS. However, I've tried that and it doesn't work for me. I'm using Dreamweaver for my editing and I'm rather new to CSS. The CSS code I have for the menu is: Code: #menuwrapper {width: 1280px;
height: 25px;
background: #FFC557 url(images/menu_background.jpg) repeat-x;
color: #000;}
#menu, #menu ul {display: inline;
margin: 0;
padding: 0;
list-style: none;}
#menu li {display: block;
float: left !important;
padding: 0;
margin: 0;
line-height: 25px;
position: relative;
left: 19px;}
#menu a {height: 25px;
width: 85px;
background: #FFC557 url(images/button.jpg) no-repeat;
color: #000;
display: block;
font-size: 105%;
font-weight: bold;
text-align: center;
text-decoration: none;
border-left: 1px solid #000;}
#lastbutton {border-right: 1px solid #000;}
#menu a:hover {background-position: 0 -25px;}
Now how the heck do I center the menu as opposed to having it aligned to the left??? Hi I am trying to create a horizontal menu for my interface and am running into a problem. I created the menu and it seems to work fine, but after I try to move it to where I want it, it leaves a blank spot in my content area that I cant get ridd of. Here is the link www.isostudios.com Im a little new to css so dont be to hard on me It's been a long while since I did anything using HTML or CSS so I might be prone to silly mistakes. A site I'm working on is giving me unusual results. The second HR is being forced to the right of the horizontal menu. No other element in it's place does the same thing. Placing another element before it makes the HR positions correctly. index.html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Faithful 32x32</title> <meta http-equiv="Content-Type" content="text/html;charset=uft-8" /> <link rel="stylesheet" type="text/css" href="css/reset.css" media="all" /> <link rel="stylesheet" type="text/css" href="css/main.css" media="all" /> <link rel="shortcut icon" href="images/favicon.png" /> </head> <body> <div id="container"> <img src="images/logo.png" class="centered" alt="Faithful 32x32 logo"/> <h2>A double resolution texture pack that stays faithful to the original <a href="http://www.minecraft.net">Minecraft</a> textures.</h2> <hr /> <div id="centeredmenu"> <ul> <li><a href="#">Main</a></li> <li><a href="#">Download</a></li> <li><a href="#">Mod Packs</a></li> <li><a href="#">Support Us</a></li> <li><a href="#">Credits</a></li> </ul> </div> <hr /> </div> </body> </html> main.css Code:
/* basic elements *********************************************************************************************/
html {
height: 100%;
}
body {
height: 100%;
background-color:#8ca5ff;
background-image:url('/images/darkstone.png');
font: 0.85em Cambria, Georgia, sans-serif;
color:#333;
}
img.centered {
display:block;
margin:0 auto;
padding-top:30px;
}
h2 {
text-align:center;
margin-top: -20px;
font-size: 1.2em;
}
hr {
height:1px;
border-width:0;
color:#175287;
background-color:#175287;
width:638px;
margin:10px auto;
}
a {
color:#3072b3;
text-decoration:underline;
}
a:active,
a:focus {
outline:dotted;
outline-width:1px;
}
/* specific divs *********************************************************************************************/
#container {
background: url('/images/bg.png');
margin:0 auto;
width:800px;
min-height:100%;
}
/* top menu *********************************************************************************************/
#centeredmenu {
clear:both;
float:left;
width:100%;
position:relative;
}
#centeredmenu ul {
list-style:none;
float:right;
position:relative;
right:50%;
}
#centeredmenu ul li {
float:left;
position:relative;
left:50%;
}
#centeredmenu ul li a {
display:block;
padding:0 .4em;
font-size:1.5em;
}
reset.css Code:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
Both the HTML and CSS validates. I'd post a link to the site but it's against the rules. Hopefully we can figure this out. Cheers. Hi, I have a horizontal menu, now what I would like to know how to do, is that once one of the element has focus, I would have another row underneath it that would have my links link1 | link2 | link3, etc... here is my menu bar, any info, or ideas would be great <html> <head> <style type="text/css"> .navh LI { DISPLAY: inline; LIST-STYLE-TYPE: none } .navh UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; WHITE-SPACE: nowrap } .navh A { border:1px solid #333333; PADDING-RIGHT: 8px; PADDING-LEFT: 24px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px; BACKGROUND-COLOR: #999999 } .navh A:link { COLOR: #eeeeee; TEXT-DECORATION: none } .navh A:visited { COLOR: #eeeeee; TEXT-DECORATION: none } .navh A:hover { border:1px solid #333333; COLOR: #333333; BACKGROUND-COLOR: #ff6600 } </style> </head> <body> <div class="navh"> <ul> <li><a href="#" >Item 1</a></li> <li><a href="#" >Item 2</a></li> <li><a href="#" >Item 3</a></li> </ul> </div> </body> </html> I am making a horizontal menu with dropdown submenus. It is partly coded using Dreamweaver and partly by hand. The menu works fine under IE but in Firefox it is off by a few pixels. I searched the forums and found that the problem was with the way IE rendered <div> versus the way Firefox does, but I wasn't able to solve the problem. Could somebody also tell me how to switch from Quirk mode to standard? for complete code visit http://www.ithaca.edu/students/sgarg1/website Any help is appreciated **************************************** index.html Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Sustainable Tompkins</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function start()
{
document.getElementById('layer1').style.visibility="hidden";
document.getElementById('layer2').style.visibility="hidden";
document.getElementById('layer3').style.visibility="hidden";
document.getElementById('layer4').style.visibility="hidden";
document.getElementById('layer5').style.visibility="hidden";
}
function changeOver(theNode)
{
theNode.style.background="#ffffff";
theNode.style.color="#666666";
}
function changeOut(theNode)
{
theNode.style.background="#666666";
theNode.style.color="#ffffff";
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v;}
}
//-->
</script>
<style type="text/css">
<!--
.style11 {font-family: "Times New Roman", Times, serif}
.bullet {list-style-type: disc;}
-->
</style>
<!-- InstanceEndEditable -->
<link rel="stylesheet" href="css/mainStyles.css" type="text/css">
</head>
<body onLoad="start();">
<center>
<table width="801" border="1" cellpadding="0" cellspacing="0" onMouseOut="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer 5','','hide')">
<!--DWLayoutTable-->
<tr>
<td height="132" colspan="3" valign="middle"><div align="center"><span class="style3">SUSTAINABLE TOMPKINS</span>
</div>
<div align="center"></div></td>
</tr>
<tr>
<td height="29" colspan="3" valign="top" class="above_menu"><!--DWLayoutEmptyCell--> </td>
</tr>
<tr>
<td height="48" colspan="3" valign="top"><!-- InstanceBeginEditable name="Menu" -->
<table width="800" border="1">
<tr bgcolor="#FFFFFF">
<td width="70" id="mi0" class="menu" onMouseOver="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer5','','hide','Layer3','','hide');chang eOut(document.getElementById('mi0'));" onMouseOut="changeOver(document.getElementById('mi0'));">
Home
</td>
<td id="mi1" class="menu" width="89" onMouseOver="MM_showHideLayers('Layer1','','show','Layer2','','hide','Layer5','','hide','Layer3','','hide');chang eOut(document.getElementById('mi1'));" onMouseOut="changeOver(document.getElementById('mi1'));">About St
<div id="Layer1" onMouseOut="MM_showHideLayers('Layer1','','hide')">
<table width="200" border="1" cellpadding="0" cellspacing="0" >
<tr>
<td id="mi1_1" onMouseOver="changeOver(document.getElementById('mi1_1'));" onMouseOut="changeOut(document.getElementById('mi1_1'));">* Mission</td>
</tr>
<tr>
<td id="mi1_2" onMouseOver="changeOver(document.getElementById('mi1_2'));" onMouseOut="changeOut(document.getElementById('mi1_2'));">* Coordinators</td>
</tr>
<tr>
<td id="mi1_3" onMouseOver="changeOver(document.getElementById('mi1_3'));" onMouseOut="changeOut(document.getElementById('mi1_3'));">* Sponsors/Partners</td>
</tr>
<tr>
<td id="mi1_4" onMouseOver="changeOver(document.getElementById('mi1_4'));" onMouseOut="changeOut(document.getElementById('mi1_4'));">* History</td>
</tr>
</table>
</div>
</td>
<td id="mi2" class="menu" width="141" onMouseOver="MM_showHideLayers('Layer1','','hide','Layer2','','show','Layer5','','hide','Layer3','','hide','Layer 4','','hide');changeOut(document.getElementById('mi2'));" onMouseOut="changeOver(document.getElementById('mi2'));">
ST Initiatives
<div id="Layer2" onMouseOut="MM_showHideLayers('Layer2','','hide')">
<table width="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td id="mi2_1" onMouseOver="changeOver(document.getElementById('mi2_1'));" onMouseOut="changeOut(document.getElementById('mi2_1'));">Salons</td>
</tr>
<tr>
<td id="mi2_2" onMouseOver="changeOver(document.getElementById('mi2_2'));" onMouseOut="changeOut(document.getElementById('mi2_2'));">Surveys</td>
</tr>
</table>
</div>
</td>
<td id="mi3" class="menu" width="143" onMouseOver="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer5','','hide','Layer3','','show','Layer 4','','hide');changeOut(document.getElementById('mi3'));" onMouseOut="changeOver(document.getElementById('mi3'));">
Helpful Links
<div id="Layer3" onMouseOut="MM_showHideLayers('Layer3','','hide')">
<table width="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td id="mi3_1" onMouseOver="changeOver(document.getElementById('mi3_1'));" onMouseOut="changeOut(document.getElementById('mi3_1'));">Grouped</td>
</tr>
<tr>
<td id="mi3_2" onMouseOver="changeOver(document.getElementById('mi3_2'));" onMouseOut="changeOut(document.getElementById('mi3_2'));">Annotated</td>
</tr>
</table>
</div>
</td>
// Two More instances of the sub menus.
</tr>
</table>
</tr>
</table>
</center>
</body>
</html>
css file Code:
<!--
.style2 {font-size: x-small; color:#666666}
.above_menu{background-color:#0066CC}
.Common{background-color:#0099FF}
.Variable{background-color:#0099ff}
.background {background-color: #93AA39}
.footer {border-bottom-color:#000000}
.content {background-color:#E6FF80}
.style3 {font-size: 36px}
.style5 {color: #666666}
.style6 {color: #FFFFFF}
.style7 {font-size: 9px}
.style8 {font-size: 14px;color: #FFFFFF;}
.style9 {font-size: 14px}
#Layer1 {position:absolute; width:143px; height:74px; z-index:1; left: 180px; top: 207px;}
#Layer2 {position:absolute; width:143px; height:24px; z-index:2; left: 276px; top: 207px;}
#Layer3 {position:absolute; width:143px; height:36px; z-index:3; left: 423px; top: 207px;}
#Layer4 {position:absolute; width:200px; height:145px; z-index:4; left: 572px; top: 207px;}
#Layer5 {position:absolute; width:143px; height:36px; z-index:3; left:736px; top: 207px;}
#mi1_1 {background-color:#666666; text-align:left; color:#ffffff;margin:0}
#mi1_2 {background-color:#666666; text-align:left;color:#ffffff;margin:0}
#mi1_3 {background-color:#666666; text-align:left; color:#ffffff;margin:0}
#mi1_4 {background-color:#666666; text-align:left; color:#ffffff;margin:0}
#mi2_1 {background-color:#666666; text-align:left; color:#ffffff;margin:0}
#mi2_2 {background-color:#666666; text-align:left; color:#ffffff;margin:0}
#mi3_1 {background-color:#666666; text-align:left; color:#ffffff}
#mi3_2 {background-color:#666666; text-align:left; color:#ffffff}
#mi4_1 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_2 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_3 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_4 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_5 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_6 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_7 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_8 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi5_1 {background-color:#666666; text-align:left; color:#ffffff}
#mi5_2 {background-color:#666666; text-align:left; color:#ffffff}
a:hover {color: #666666;text-decoration:none;}
a{text-decoration:none; color:#FFFFFF}
td:hover{color: #666666}
.menu{text-align:center; color: #666666}
websitewebsite Can somebody tell me if this is possible? I have a horizontal menu and I'm using images. I'm using javascript for the drop down menu etc. The menu is an include so it looks the same on all the pages. What I want to do is when I'm on say "Contact" the rollover color (this is an image) displays the "Contact" hover image, and the same with the other pages. So what needs to happen is CSS needs to override the button with the hover image. Is it possible to put css in every page that tells it to display the needed hover image when on that page? |
|||||||