CSS - Css State Change

I'm trying to use Eric Meyer's css tabbed navbar to navigate a form. It works, except that I can't seem to get the navbar to indicate the current tab by changing the tab background and bottom border to white. I've been reading and trying different css commands, but haven't been successful.

I'm including my html and css below and would appreciate any help.

Thanks, Keith Silva

CSS:

textarea{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1.0em;
}
button{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1.0em;
}
/*table{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}*/
caption{
font-size: 1.5em;
}
.add{
font-size: 0.6em;
text-align: right;
}
.frm_tbl{
border-spacing: 5px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: Navy;
}
#navlist {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
#navlist li {
list-style: none;
margin: 0;
display: inline;
}
#navlist li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover {
color: #000;
background: #AAE;
border-color: #227;
}

/*#navlist li:target*/

#mail_frm #mail_nav a,
#loc_frm #loc_nav a,
#other_frm #other_nav a{
background: white;
border-bottom: 1px solid white;
}
#mail_frm{display: none}
#mail_frm:target{display: block}

#loc_frm{display: none}
#loc_frm:target{display: block}

#other_frm{display: none}
#other_frm:target{display: block}

HTML:

//
#include settings
#cgivar id
#cgitextvar notes
#cgitextvar directions
#if @id != ""
//edit existing record
#sql load select * from tbl_org where org_id = @id
#else
//new record
#sqlblankrow tbl_org
#endif
<form method="POST" target="_self" name="org_form">
#formtarget org_save
<div id="navcontainer">
<ul id="navlist">
<li id="mail_nav"><a href="#mail_frm">Mail</a></li>
<li id="loc_nav"><a href="#loc_frm">Location</a></li>
<li id="other_nav"><a href="#other_frm">Other</a></li>
</ul>
</div>
<table id="mail_frm" class="frm_tbl" border="0">
<tr>
<td colspan="2">Office<br><input name="office" type="text" size="45" maxlength="45" value="@office" title=""></td>
<td>Type<br><select name="type" size="1" class="">
#optionlist selected=@type
#options
muni Municipality
state State
discharger Discharger
consultant Consultant
law_firm Law Firm
dischgr_assoc Discharger Assoc
elected Elected Official
lab Laboratory
public Public
academia Academia
tribe Tribe
other Other
</select></td>
</tr>
<tr>
<td colspan="2">Division<br><input name="division" type="text" size="45" maxlength="45" value="@division" title=""></td>
<td>Region<br><select name="region" size="1" class="">
#optionlist selected=@region
#options
none None
north AZ-North
central AZ-Central
south AZ-South
rb1 CA-North Coast(1)
rb2 CA-San Francisco Bay(2)
rb3 CA-Central Coast(3)
rb4 CA-Los Angeles(4)
rb5r CA-Central Valley North(5r)
rb5s CA-Central Valley(5s)
rb5f CA-Central Valley South(5f)
rb6 CA-Lahontan(6)
rb7 CA-Palm Desert(7)
rb8 CA-Santa Ana(8)
rb9 CA-San Diego(9)
</select></td>
</tr>
<tr>
<td colspan="2">Department<br><input name="dept" type="text" size="45" maxlength="45" value="@dept" title=""></td>
<td>Mail Code<br><input name="mail_code" type="text" size="15" maxlength="15" value="@mail_code" title=""></td>
</tr>
<tr><td colspan="2">Organization<br><input name="org" type="text" size="45" maxlength="45" value="@org" title=""></td></tr>
<tr><td colspan="2">Mailing Address<br><input name="mail_addr" type="text" size="45" maxlength="45" value="@mail_addr" title=""></td></tr>
<tr>
<td>Mailing City<br><input name="mail_city" type="text" size="20" maxlength="20" value="@mail_city" title=""></td>
<td>State<br><input name="state" type="text" size="20" maxlength="20" value="@state" title=""></td>
<td>Mailing Zip Code<br><input name="mail_zip" type="text" size="10" maxlength="10" value="@mail_zip" title=""></td>
</tr>
</table>
<table id="loc_frm" class="frm_tbl" border="0">
<tr><td colspan="2">Location<br><input name="location" type="text" size="45" maxlength="45" value="@location" title=""></td></tr>
<tr><td colspan="2">Location Address<br><input name="loc_addr" type="text" size="45" maxlength="45" value="@loc_addr" title=""></td></tr>
<tr>
<td>Location City<br><input name="loc_city" type="text" size="20" maxlength="20" value="@loc_city" title=""></td>
<td>Location Zip<br><input name="loc_zip" type="text" size="10" maxlength="10" value="@loc_zip" title=""></td>
</tr>
<tr><td colspan="2">Directions<br><textarea name="directions" rows="7" cols="60">
#showtext ./directions/org_@org_id
#+ </textarea></td>
</tr>
</table>
<table id="other_frm" class="frm_tbl" border="0">
<tr><td colspan="2">Main Office<br><input name="main" type="text" size="45" maxlength="45" value="@main" title=""></td></tr>
<tr><td colspan="2">Main Address<br><input name="main_addr" type="text" size="45" maxlength="45" value="@main_addr" title=""></td></tr>
<tr>
<td>Main City<br><input name="main_city" type="text" size="20" maxlength="20" value="@main_city" title=""></td>
<td>Main Zip<br><input name="main_zip" type="text" size="10" maxlength="10" value="@main_zip" title=""></td>
</tr>
<tr><td colspan="2">Web Site<br><input name="web_site" type="text" size="45" maxlength="45" value="@web_site" title=""></td></tr>
<tr><td colspan="2">Notes<br><textarea name="notes" rows="7" cols="50">
#showtext ./notes/org_@org_id
#+ </textarea></td>
<td><input name="selected" type="checkbox" value="y" title="">Select<br><br>
<input name="archive" type="checkbox" value="y" title="">Archive</td>
</tr>
</table><br>
org_id&nbsp;<input name="org_id" type="text" size="8" value="@org_id" title="">
<button name="save" class="save_org" onclick="save_form(this.form);return false;">Save</button>
<button name="cancel" class="cancel_org" onclick="cancel_form(this.form);return false;">Cancel</button>
</form>

Hi all,

I've had this issue for a while now and can't for the life of me get a clean fix/understanding of whats wrong. I've had a few other Designers/Developers look at it with no look either!

http://www.hoctordesign.com/csstest/test.html has the code and details. I'm mainly concerned with issue 1.

This is that i can't get control of the hover state text color. It currently inherits a color which is need in other areas of the site. I need to over ride this but can't!

The second issue is that I can't control the space between the tabs.

Can anyone help?

Thanks!
Denis

I've having an issue with Firefox and my navbar. It's image based I can't find a way to exclude it from the hover state of a:hover { border-bottom:1px dashed #666;}

When you hover over the links on the navbar, it shifts the page a bit and then back to normal when you leave the hover state.

http://www.graphics-tech.com/concept

There is the link for example.

Thanks

Hi there, im trying to make a website for a friend and im having a little diffuculty with my drop down menu

the site is here
bbk.ac.uk/~fsando01/watma/index.html

when you hover over the link entitled services in the global nav bar and proceed to hover down to the first submenu link which is abs repair, youll notice the background image i set as hover state for the services link disapears, i want it to stay there like they have got on marks and spencers website...

Please if anyone could help id be very grateful...

ive tried everthing i can think of

I have a button which is drawn using css background-image and it has a hover effect using css a:hover. I also need to have a click state for this button, so that each time the button is clicked it switches between two different states (4 states total). Is this possible? I'm assuming this will probably require JavaScript which I have little experience. Thanks in advance for any help!

I am working on a website for a client and I am having trouble following A List Apart's tutorial (I can't link yet).

I have a working css dropdown menu using a css sprite. But what I am trying to do, is when you mouse over a dropdown and go down the dropdown, that the parent menu remains at it's hover state. Currently what is happening is as soon as I mouseout of the parent level it goes back to the normal state.

I don't really want to post the link to the test site itself if I don't have to for client privacy.

Please help! I'm getting way too frustrated now, I've look at so many examples and nothing seems to work.

I don't even need the javascript, I just need it to work. I've experimented with javascript and without.

This is the code I am using:

javascript:
Code:

<script type="text/javascript">
<!--
startList = function() {
if (document.all&&document.getElementById) {
menuRoot = document.getElementById("menu");
for (i=0; i<menuRoot.childNodes.length; i++) {
node = menuRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//->
</script>

HTML Markup:

Code:

<div id="nav">
	<ul id="menu">		
		<li><a href="index.php" class="home"></a></li>
		<li><a href="link" class="tour"></a></li>
		<li><a href="link" class="events"></a>
			<ul class="drop">
				<li><a href="/events/calendar">Calendar</a></li>
				<li><a href="/events">Ag Science Hall of Fame</a></li>
				<li><a href="/events/tastes">TASTES</a></li>
			</ul>
		</li>
		<li><a href="news" class="news">News</a>
			<ul class="drop">
				<li><a href="link">Legislation</a></li>
				<li><a href="news/latest-news">Latest News</a></li>
				<li><a href="/news/newsletter">Newsletter</a></li>
				<li><a href="news/in-the-media">In the Media</a></li>
			</ul>
		</li>
		<li><a href="link"></a></li>
		<li><a href="link"></a></li>
	</ul>
</div>

Menu CSS:

Code:

#nav {
position: relative;
	float:left;
	width:940px;
	height:35px;
	z-index: 9;
	background: #fff;
		}	
		
#menu, #menu ul {
position: relative;
	padding:0;
	margin:0;
	clear:both;
	float:left;
	width:455px;
	z-index: 9;
	}
	
#menu ul.drop {
	background:#520006;
/*	padding:10px;*/
	width:inherit;
	clear:both;
	float:left;
	margin-top:35px;
	z-index: 9;
	}

#menu ul.drop li {
    width: 130px;
	clear:both;
	padding: 5px;
	z-index: 9;
	}
	
#menu ul.drop li:hover {
    background: #c10101;
	z-index: 9;
	}
	
#menu ul.drop a {
	
	color:#fff;
	font-size:11px;
	text-decoration:none;
	font-weight:normal;
	clear:both;
	float:left;
	z-index: 9;
	}

	
#menu a {
	display: block;
	/*width: 10em;*/
	float:left;
	clear:both;
	width:130px;
}

#menu li {
	float: left;
	/*width: 10em;*/
}

#menu li ul {
	position: absolute;
	width: 10em;
	left: -999em;
	z-index: 9;
}

#menu li:hover ul {
	left: auto;
}

#menu li:hover ul, #menu li.sfhover ul {
	left: auto;}


/*SPRITE BACKGROUP POSITIONING*/	
#menu li a.home, #menu li a.tour, #menu li a.events, #menu li a.news, #menu li a.donate, #menu li a.involved, #menu li a.resources, #menu li a.about, #menu li a.contact {
	float:left;
	background:url('images/menu.jpg') no-repeat;
	height:35px;
	text-indent:-999999px;
	}
	
#menu li a.home:hover, #menu li a.home.over {background-position: 0px -35px;}
#menu li a.home {width: 62px;}

#menu li a.tour:hover {background-position: -62px -35px;}
#menu li a.tour {width: 63px; background-position: -62px 0px;}

#menu li a.events:hover, #menu li a.events.hover {background-position: -125px -35px;}
#menu li a.events {width: 101px; background-position: -125px 0px;}

#menu li a.news:hover {background-position: -226px -35px;}
#menu li a.news {width: 80px; background-position: -226px 0px;}

#menu li a.donate:hover {background-position: -306px -35px;}
#menu li a.donate {width: 75px; background-position: -306px 0px;}

#menu li a.involved:hover {background-position: -381px -35px;}
#menu li a.involved {width: 74px; background-position: -381px 0px;}

ul {list-style: none;}

Hi all,

I'm having some trouble with my code for a CSS nav bar. I'm all new to this so am not sure where to start.

At present my nav bar is working fine. The only problem I am having is when one hovers over a new drop down item the parent doesn't change back to the non hovered state, it remains showing background image for the hover.

Here is my test page...

http://www.seattleunderground.co.uk/testmenu.html

and here is the CSS code...

Code:

.menu{
	border:none;
	border:0px;
	margin:0px;
	padding:0px;
	font: 100% "Marker Felt", "Comic Sans", sans-serif;
	font-size:15px;
	font-weight:bold;
	}
.menu ul{
	background:#000000;
	height:150px;
	list-style:none;
	margin:0;
	padding:0;
	}
	.menu li{
		float:left;
        width:150px;
		padding:0px;
		}
	.menu li a{
		background:url("images/BkgButtonUp.png");
		color:#ffffff;
		display:block;
		font-weight:normal;
		line-height:48px;
		margin:0px;
		padding:0px 25px;
		text-align:center;
		text-decoration:none;
		}
		.menu li a:hover, .menu ul li:hover a{
			background:url("images/BkgButtonHov.png");
			color:#000000;
			text-decoration:none;
			}
	.menu li ul{
		background:url("images/BkgButtonUp.png");
		display:none;
		height:auto;
		padding:0px;
		margin:0px;
		border:0px;
		position:absolute;
		width:150;
		z-index:200;
		/*top:1em;
		/*left:0;*/
		}
	.menu li:hover ul{
		display:block;
		
		}
	.menu li li {
		background:url("images/BkgButtonUp.png");
		display:block;
		float:none;
		margin:0px;
		padding:0px;
		width:150px;
		}
	.menu li:hover li a{
		background:url("images/BkgButtonUp.png");
        color:#ffffff;
		
		}
	.menu li ul a{
		display:block;
		height:48px;
		font-size:15px;
		font-style:"Marker Felt", "Comic Sans", sans-serif;
		margin:0px;
		padding:0px 10px 0px 15px;
		text-align:center;
		}
		.menu li ul a:hover, .menu li ul li:hover a{
			background:url("images/BkgButtonHov.png");
			border:0px;
			color:#000000;
			text-decoration:none;
			}
	.menu p{
		clear:left;
		}	

		

Please can some kind soul check this out and tell me where I need to add what lines to have the parents change back to BKGButtonUp.png. I want each item to turn white as I go through them.

Thanks v.much.

P.s. Is it possible to use Marker Felt Wide as the font? At the mo the writing is quite small, and changing font size shifts everything.

I used Marker Felt Wide on the main site, but created my nav menu using Flash at first. Flash is causing some issues however so I must change to CSS to fix things.

www.seattleunderground.co.uk

Best regards,

Ash

to dynamically have a menu to change whats css sheet is loaded on page view

I have to do a re-design project to convert a Flash website into xhtml and css only.

The reason for this is that some corporate companies have been unable to see the site at all because thier firewalls ban all Flash content.

My problem is this; the site is very contempory in design and the previous designer used Flash to create his own custom scroll bars that fit nicely with the contempory theme, but doing the same thing using CSS is impossible. I know you can kind of customise scroll bars in IE and I also know that you shouldn't.

The client wants the site re-design to resemble the Flash version as much as possible, and I don't want to faithfully re-create the site and then have these chunky out of place scroll bars in the middle of it.

Should I just propose that the layout be changed to avoid the need for scroll bars?

Hi all,

I'm trying to change my cursor when I hover over a image on a onclick event as the example below but I can't get this to work.

<a onmouseover="this.style.cursor='hand'">

Regards

Stephen

Hi Guys,

I have a question about me not understanding how margins work...

I am quite perplexed...I am trying to remove the white space between borders of table cells.

I am using:
Code:

td { margin: 0; }

But there is still white space between the cells...how do I make no space between the cells?



Code is located he
http://www.taipeitripper.com/senshin_center/training_schedule.html

Thank you,
Evan Jerkunica

On the title of my gallery one of the words has moved to the second row. There is obvious room before the text hits the search box so I'm hoping to have all the text on the same row. This is what I've found for the gallery title CSS:

#gallerytitle {
padding: 10px 10px 10px 20px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
background: #F8F8F8;
height:30px;
border-bottom: 1px solid #CCC;

What would I change there (if that is indeed the part that needs to be changed) to get the desired effect?

Here is the site where you can see the gallery title issue. EDIT: I guess I can't link to my site. Hmm. It's kind of hard to describe what my problem is.

I appreciate any help

Hello! I hope someone can help me!

Im trying to adapt a bigcartel css style sheet to make it a 4 row product column rather than 3. I just cant seem to get it correct when playing with the wrap, content and main content. The width seems to jump only from 3 to about 8!

Im not actually hosting the theme myself to edit but just simply copied and pasted the css from a link provided straight into the basic design section in big cartel. It seems to be doing the trick but i cant get the spacing perfect to make it 4 columns wide!?

Does anyone know if its because i need to actually host the template and images on my own server to be able to get it perfect?

Any help to perfect this would be very much appreciated!

Thanks so much in advance,
Weesy

I have been searching for days in the css files to find where to change the height of the div container for the breadcrumbs. I have changed everything I could find that I thought may be related to this issue. Some of the very bottom of letters like g get cut off in Chrome and IE7. I have been using firebug to help me with this issue but this one has me stumped. Any help finding the correct placer to increase the space at the bottom of the breadcrumbs would be greatly appreciated.

If someone could contact me for the url it would be appreciated as the forum rules state new users can't post urls

Thank you
DeZiner