CSS - Style Drop Box

I have a menu bar made up of <a href> elements that have a hover style of: PHP Code:
#mainMenu a:hover {
    color:#000000;
    background-color: #66c74c;
    padding: 1px 4px 1px 4px;
    margin: 1px 1px 1px 1px;
} 



This will provide a green colored rollover visual as the user moves their mouse over the menu bar.

I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code:
//--- Simplify setup by creating an array of the menus and hilight ID's ---
    var menus = ["menu1","menu2","menu3","menu4","menu5",
                "menu6","menu7","menu8","menu9","menu10"];
    
    function J_hiliteMenu(menu) {
        //--- first make sure all the menu are hidden and unhilited ---
        for(i=0; i < menus.length; i++) {
            if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position
            var obj = document.getElementById(menus[i]);
            if (obj == null) continue;             // if menu is not available skip it
            obj.style.color = "#ffffff";
            obj.style.backgroundColor = "#234fd7";
        }
        //--- hilite the menu we're interested in ---
        var obj = document.getElementById(menu);
        obj.style.color = "#000000";
        obj.style.backgroundColor = "#f8f400";
    } 



Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript?

Thanks!

Hey guys ,
I am looking to convert my css3 vertical nav bar , from the order of "DROP DOWN" to "DROP UP" .
The code i am using below is from a css3 gen. If anybody could show me what values to change it would be greatly appreciated ,

Code:

ul#css3menu,ul#css3menu ul{
	margin:0;list-style:none;background-color:#000000; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(255,255,255,0.16));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(255,255,255,0.16)));background-repeat:repeat;border-width:1px;border-style:solid;border-color:#343434;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;-moz-box-shadow:1.4px 1px 2px #B1B1B1;-webkit-box-shadow:1.4px 1px 2px #B1B1B1;box-shadow:1.4px 1px 2px #B1B1B1;}
ul#css3menu ul{
	display:none;position:absolute;left:-1px;top:98%;padding:0;background-color:#202020; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.16),rgba(255,255,255,0));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.16)),to(rgba(255,255,255,0)));border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-color:#000000;}
ul#css3menu li:hover>*{
	display:block;}
ul#css3menu li:hover{
	position:relative;}
ul#css3menu ul ul{
	position:absolute;left:98%;top:-2px;}
ul#css3menu{
	padding:6px 6px 6px 0;display:block;font-size:0;position:absolute;z-index:1000;left:10px;top:10px;}
ul#css3menu li{
	display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
	margin:0 0 0 6px;}
ul#css3menu ul>li{
	margin:6px 0 0;}
ul#css3menu a:active, ul#css3menu a:focus{
	outline-style:none;}
ul#css3menu a{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Arial,sans-serif;color:#E7E5E5;cursor:pointer;padding:8px 20px;background-color:;border-width:0;border-style:solid;border-color:transparent;}
ul#css3menu ul li{
	float:none;margin:0;}
ul#css3menu ul a{
	text-align:left;}
ul#css3menu li:hover>a{
	background-color:#7ACF27;border-color:#F8F8F8;border-style:solid;font:12px Arial,sans-serif;color:#333;text-decoration:none; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(85,170,0,0.7)));filter:progid:DXImageTransform.Microsoft.g  radient(gradientType=0,startColorstr=#60FFFFFF,endColorstr=#B355AA00)}
ul#css3menu img{
	border:none;vertical-align:middle;margin-right:16px;width:16px;height:16px;}
ul#css3menu ul img{
	width:16px;height:16px;}
ul#css3menu img.over{
	display:none;}
ul#css3menu li:hover > a img.def{
	display:none;}
ul#css3menu li:hover > a img.over{
	display:inline;}
ul#css3menu ul span{
	background-image:none;padding-right:16px;}
ul#css3menu li.topitem>a{
	background-color:traspar;border-width:1px 0 0 0;border-style:solid;border-color:;border-radius:50px;-moz-border-radius:50px;-webkit-border-radius:50px;font:bold 13px Arial,sans-serif;color:#E7E5E5;text-decoration:none;text-shadow:0 1px 1px #000000;}
ul#css3menu li.topitem:hover>a{
	background-color:#00ff00; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.77),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.77)),to(rgba(85,170,0,0.7)));border-style:solid;border-color:#F8F8F8;font:bold 13px Arial,sans-serif;color:#444444;text-decoration:none;text-shadow:0 1px 0 #C5EAA1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#C6FFFFFF,end  Colorstr=#B355AA00)}
ul#css3menu li.subfirst>a{
	border-radius:9px 9px 0 0;-moz-border-radius:9px 9px 0 0;-webkit-border-radius:9px 9px 0 0;} 
ul#css3menu li.sublast>a{
	border-radius:0 0 9px 9px;-moz-border-radius:0 0 9px 9px;-webkit-border-radius:0 0 9px 9px;}

And here is the html
Code:

<ul id="css3menu">
	<li class="topitem"><a href="#" title="Item 0"><span>Item 0</span></a>
	<ul>
		<li class="subfirst"><a href="#" title="Item 0 0"><span>Item 0 0</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 0 0">Item 0 0 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 1"><span>Item 0 1</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 1 0">Item 0 1 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 2"><span>Item 0 2</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 2 0">Item 0 2 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 3"><span>Item 0 3</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 3 0">Item 0 3 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 4"><span>Item 0 4</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 4 0">Item 0 4 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 5"><span>Item 0 5</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 5 0">Item 0 5 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 6"><span>Item 0 6</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 6 0">Item 0 6 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 7"><span>Item 0 7</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 7 0">Item 0 7 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 8"><span>Item 0 8</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 8 0">Item 0 8 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 9"><span>Item 0 9</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 9 0">Item 0 9 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 10"><span>Item 0 10</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 10 0">Item 0 10 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 11"><span>Item 0 11</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 11 0">Item 0 11 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 12"><span>Item 0 12</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 12 0">Item 0 12 0</a></li>
		</ul>

		</li>
		<li class="sublast"><a href="#" title="Item 0 13"><span>Item 0 13</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 13 0">Item 0 13 0</a></li>
		</ul>

		</li>
	</ul>

	</li>
</ul>

This is probably a tall order any advice is appreciated , TYVM

Hello all,

I'm trying to fix my drop down so it goes straight down. I originally had it so it was reading the javascript but after adjusting it quite a bit, it spans the whole parent nav bar and is completely in css. I don't mind that it's in css but I want visitors to be able to see it in ie because ie own's a good 75% of the browser population. Here is my site, i still have the javascript file in there but it doesn't do anything anymore. Any clues on how to get it so it goes straight down and is viewable in ie? Site

Hello everyone,

I have a drop-down menu that is currently working well.

The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned.

I want the menu to "drop" down and to the left, so the right edges are aligned.

I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed.

Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use.

Thank you!

Here is the page: http://www.littlebuddymedia.com/site05/012.html



The menu currently drops like this (aligned along the left edge): http://www.justskins.com/wp-content/uploads/2008/12/drop-down-menu.gif



I want the menu to do this (align along the right edge; see how "Artists" is aligned under "Music" along the right edge): http://artatm.com/wp-content/uploads/2009/11/mtvmenu.JPG

Here is my code:

Code:

.chromestyle{
     width: 100%;
     font-weight: bold;
     float: left;
     height: 29px;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}


.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 5px;
text-decoration: none;
font-weight: bold;
color: black;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #0000ff;
color: #fff200;
}

I was reading a tutorial were they always style both <tr> & <td> with the same thing... Is this needed? Or do you just need to style <tr>?

Code:

table.navigation tbody tr.odd {
	background: #252525;
	color: #fff;
	}
table.navigation tbody tr.odd td {
	background: #252525;
	color: #fff;
	}

on my site I have a list with the UL Class of threads.

I am not good with CSS at all I have this

Code:

#threads {
  padding:0;
  margin:0;
  } 
#threads li {
	list-style:none;
	border-bottom:1px dotted #ccc;
	display:block;
	padding:2px 0px 2px 13px;
	background:url(images/sub.png) no-repeat 0 0px;
	}

not doing what I want, my site is mypricesavings(dot)com you can see the list on the homepage under Recent Activity, I'd like to make it so that the avatars line up on top of each other and a line between each one like the featured section located on this site, however, without the scrolling.

http://demo.colorlabsproject.com/?theme=arthemia-premium

thank you for attempting

Hello,

In the css below, why I can't set it on the same time?
Code:

    background: #FFF url(../images/main_bottom.gif) no-repeat  bottom ;
    background: #FFF url(../images/main_top.gif) no-repeat  top ;

How would you go about creating a navbar like the one Red cross uses on the left side for generic website mapping? Red Cross Example

Is this pure css with dual images? Or is this done with some effect with other forms of CSS (or even DHTML?)

I did a web page for a company and it looks fine in ie7 where I tested it.

The problem is when viewed in IE6 its like it ignores the sizes I put in.

The box appears too big in IE6 and is the propr size in IE7.
Is there any way to fix it so it would look the same in IE6 as IE7?

Hi,

I have a style sheet which works fine on my mac, but not on my PC in IE7. I know how to substitute stle sheets based on browsers, but here's the issue at hand. I have 2 styles for the <ul> which follow:
ul.nav{
clear:both;
width:192px;
padding: 0px;
display: block;
background-color:#000000;
margin-top:-11px;
margin-left:0px;
float:left;

}

and

ul.bodyText{
font-color:#000000
font-size:12px;
font-family:helvetica, arial, sans-serif;
}


it appears that "ul.bodyText is taking on the characteristics of "ul.nav" Or, for some reason, the <ul><li>'s in my Mac look fine, but on my PC, they do not have the indent preceeded by the dot.

Here's the site
http://www.caillouette.com/NewestSelvan/English/aboutUs.php

can anyone tell me why?

thanks
-Sean

Again I have arrived with yet another inquiry regarding tableless layouts.

I have been tasked with the creation of a fairly complex calendar application. Creating this using tables would be no problem for me, but I am wondering if this is what I should be doing.

I remember hearing that you should only display "tabular data" using tables, which would imply that I should be using divs and the like to create this app, not tables.

Does anyone have any resources that specifically tackle the task of creating a calendar using CSS techniques? I feel that I could do it, but I just need a basic approach to get me started. The biggest issue I am having is regarding the days dropping down to a new "row" after seven boxes have been displayed.

I can provide no code, obviously, since I haven't started yet. I'm just merely looking for some insight.

Thanks in advance!

I might have asked this before, but I can't remember.

I have my base class

.baseClass {
width: 100%
}

how can I inherit that into other classes? Like maybe:

.childClass#baseClass {
height: 200px;
}

.biggerChild#baseClass {
height: 400px;
}

now all three classes would have a width of 100%

If I google this all I get are pages telling me <p> will inherit from <html>

Also, I know I could do like this:

.childClass, .biggerChild {
width: 100%;
}

but I have a pretty big .css file, and it really bugs me to find the base class and add the derived class to it. Also, my base class can have a short name, and my derived class can have a long name, so this saves me some typing. ^^.

Thanks for your time,

CJB

notice difference between first two txt fields and the third one. first two have only background color changed, but in IE they have become bigger, in Moziila/Netscape their border is chaged.. I would like to have background color changed, but size, color and border width stay same, like in third textfield.. please use following code for refference:

Code:

<html>
<head>
<style>
.boxA { background-color:#CCCCCC; }
.boxB { background-color:#999999; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
<input type="text" id="text1" class="boxB" onFocus="makeLight(this)" onBlur="makeDark(this)"><br><br>
<input type="text" id="text2" class="boxB" onFocus="makeLight(this)" onBlur="makeDark(this)"><br><br>
<input type="text" id="text3">
<br><br>


<script>
function makeLight(obj){
 obj.className="boxA";
}

function makeDark(obj){
 obj.className="boxB";
}
</script>
</body>
</html>

So for an example: if I have this in the html:

Code:

<div id="box" style="width:100px;">123</div>

and this is the CSS

Code:

#box{width: 200px;}

What is the outcome? Will it always use the css or always use the style element? Or does it depend?