navigation bar bottom color on DIV not showing

[catorarn]

I am a consultant in a content management team working for a global financial player. We face a serious CSS issue with the main horizontal navigation bar.The site is developed in DIV layout, styles all maintained in one CSS file. The issue can be described as the following:The navigation elements are produced by Interwoven TeamSite content management system. This means that there is an n amount of navigation items in the horizontal navigation bar with a maximum of 7 items (in below code there are 4 items). Because of the dynamic nature of the content, all positions must be relative. We preferred to use just floating divs without explicit positioning in CSS (position:relative). The navigation bar should have a page-wide green bottom line of 100% with 6px margin on the left and right. A selected navigation item should have a transparant or white bottom color. We choose to not have a bottom line when the navigation item is selected.We use a div called ebb_navigationSpacer which should complement the space between all navigation items and the rest of the screen. That navigationSpacer div should have a bottom green color so that the navigation bar remains solid across the page. We get the ebb_navigationSpacer extended 100% when we set div.ebb_navigation div.ebb_navigationSpacer {float:left;width: 100%;height: 1px;border-bottom-color: #009286;border-bottom-width: 1px;border-bottom-style: solid }However, what happens then is that the navigation will loose its behaviour of no bottom-color when an item gets selected. This because the horizontal line stretches 100% on top or behind this blank space.I hope to refer to CSS expertise through this forum.Cross browser compatibility in IE6/IE7, FF is required (Opera not required)Here is the code:The horizontal navigation bar html<div class="ebb_navigation"> <div class="ebb_navigationElementFirst"> <div class="ebb_navigationElementFirstInner"> <a href="/wps/openworld/ebb/germany/html/de/you_want_to.html" class="ebb_navigationElement_link_self" onclick="ebb_selectNavigation(this, false)">Sie möchten</a> </div> </div> <div class="ebb_navigationElement"> <div class="ebb_navigationElementInner"> <a href="/wps/openworld/ebb/germany/html/de/our_products.html" class="ebb_navigationElement_link_self" onclick="ebb_selectNavigation(this, false)">Unsere Produkte</a> </div> </div> <div class="ebb_navigationElement"> <div class="ebb_navigationElementInner"> <a href="/wps/openworld/ebb/germany/html/de/our_approach.html" class="ebb_navigationElement_link_self" onclick="ebb_selectNavigation(this, false)">Unser Ansatz</a> </div> </div> <div class="ebb_navigationElement"> <div class="ebb_navigationElementInner"> <a href="/wps/openworld/ebb/germany/html/de/email_your_question.html" class="ebb_navigationElement_link_self" onclick="ebb_selectNavigation(this, false)">Kontaktieren Sie uns</a> </div> </div> <div class="ebb_navigationSpacer"> <div> </div> </div></div>CSS stylesDIV.ebb_navigation DIV { BORDER-TOP: #000000; MARGIN-RIGHT: 0px}DIV.ebb_navigation DIV.ebb_navigationElement { DISPLAY: inline; MARGIN-LEFT: -2px}DIV.ebb_navigation DIV.ebb_navigationElement_selected { DISPLAY: inline; MARGIN-LEFT: -2px}DIV.ebb_navigationElement { BORDER-RIGHT: #000000 0px; Z-INDEX: 1; FLOAT: left; BORDER-LEFT: #000000 0px; POSITION: relative; BORDER-BOTTOM: #009286 1px solid }DIV.ebb_navigationElementFirst { BORDER-RIGHT: #000000 0px; Z-INDEX: 1; FLOAT: left; BORDER-LEFT: #000000 0px; POSITION: relative; BORDER-BOTTOM: #009286 1px solid }DIV.ebb_navigationElement_selected { BORDER-RIGHT: #009286 2px solid; FLOAT: left; BORDER-BOTTOM: #000000}DIV.ebb_navigationElementFirst_selected { BORDER-RIGHT: #009286 2px solid; FLOAT: left; BORDER-BOTTOM: #000000}DIV.ebb_navigationElement_selected { BORDER-LEFT: #009286 2px solid}DIV.ebb_navigationSpacer { DISPLAY: block}.ebb_navigation#div DIV.ebb_navigationSpacer { DISPLAY: block}DIV.ebb_navigation DIV.ebb_navigationSpacer { FLOAT: left; WIDTH: 100%; HEIGHT: 1px}DIV.ebb_navigation DIV.ebb_navigationElementInner { BORDER-RIGHT: #009286 2px solid}DIV.ebb_navigation DIV.ebb_navigationElementFirstInner { BORDER-RIGHT: #009286 2px solid}DIV.ebb_navigation DIV.ebb_navigationElementInner_selected { BORDER-RIGHT: #000000}DIV.ebb_navigation DIV.ebb_navigationElementFirstInner_selected { BORDER-RIGHT: #000000}DIV.ebb_navigation DIV.ebb_navigationElementInner_selected A { COLOR: #000000}DIV.ebb_navigation DIV.ebb_navigationElementFirstInner_selected A { COLOR: #000000}

[Coolguy]

The code that I post will appear drastically different from what you have posted. The reason for that is because I have gone through and cleaned out all the redundant (not necessary) pieces. Part of the reason there were so many extra CSS classes was because whoever originally wrote this didn't understand a few important fundamentals of CSS, namely inheritance and usage of multiple-classes.Ex. If you haveebb_navigationElement {position: relative;display: inline;float: left;z-index: 1;margin-left:-2px;border-right: #009286 2px solid;border-bottom: #009286 1px solid;}and...div.ebb_navigationElement {float: left;z-index: 1;margin-left:-2px;}div.ebb_navigationElement is interpreted the same as ebb_navigationElement because of these attributes (float z-index margin-left) are already set in ebb_navigationElement. Basically, this whole class is redundant, useless, and therefore... unnecessary.Another error I saw repeated many times isborder: #000000;The "border" attribute is a shorthand tag therefore it always requires:border: [width] [type] ;If you wanted to set the border color you need to use:border-color:#000000; This is the original code (99 lines)

<html><head><style type="text/css">div.ebb_navigation div.ebb_navigationSpacer {float:left;width: 100%;height: 1px;border-bottom-color: #009286;border-bottom-width: 1px;border-bottom-style: solid}DIV.ebb_navigation DIV {BORDER-TOP: #000000; MARGIN-RIGHT: 0px}DIV.ebb_navigation DIV.ebb_navigationElement {DISPLAY: inline; MARGIN-LEFT: -2px}DIV.ebb_navigation DIV.ebb_navigationElement_selected {DISPLAY: inline; MARGIN-LEFT: -2px}DIV.ebb_navigationElement {BORDER-RIGHT: #000000 0px; Z-INDEX: 1; FLOAT: left; BORDER-LEFT: #000000 0px; POSITION: relative; BORDER-BOTTOM: #009286 1px solid}DIV.ebb_navigationElementFirst {BORDER-RIGHT: #000000 0px; Z-INDEX: 1; FLOAT: left; BORDER-LEFT: #000000 0px; POSITION: relative; BORDER-BOTTOM: #009286 1px solid}DIV.ebb_navigationElement_selected {BORDER-RIGHT: #009286 2px solid; FLOAT: left; BORDER-BOTTOM: #000000}DIV.ebb_navigationElementFirst_selected {BORDER-RIGHT: #009286 2px solid; FLOAT: left; BORDER-BOTTOM: #000000}DIV.ebb_navigationElement_selected {BORDER-LEFT: #009286 2px solid}DIV.ebb_navigationSpacer {DISPLAY: block}.ebb_navigation#div DIV.ebb_navigationSpacer {DISPLAY: block}DIV.ebb_navigation DIV.ebb_navigationSpacer {FLOAT: left; WIDTH: 100%; HEIGHT: 1px}DIV.ebb_navigation DIV.ebb_navigationElementInner {BORDER-RIGHT: #009286 2px solid}DIV.ebb_navigation DIV.ebb_navigationElementFirstInner {BORDER-RIGHT: #009286 2px solid}DIV.ebb_navigation DIV.ebb_navigationElementInner_selected {BORDER-RIGHT: #000000}DIV.ebb_navigation DIV.ebb_navigationElementFirstInner_selected {BORDER-RIGHT: #000000}DIV.ebb_navigation DIV.ebb_navigationElementInner_selected A {COLOR: #000000}DIV.ebb_navigation DIV.ebb_navigationElementFirstInner_selected A {COLOR: #000000}</style></head><body><div class="ebb_navigation"><div class="ebb_navigationElementFirst"><div class="ebb_navigationElementFirstInner"><a href="/wps/openworld/ebb/germany/html/de/you_want_to.html" class="ebb_navigationElement_link_self" onclick="ebb_selectNavigation(this, false)">Sie möchten</a></div></div><div class="ebb_navigationElement"><div class="ebb_navigationElementInner"><a href="/wps/openworld/ebb/germany/html/de/our_products.html" class="ebb_navigationElement_link_self" onclick="ebb_selectNavigation(this, false)">Unsere Produkte</a></div></div><div class="ebb_navigationElement"><div class="ebb_navigationElementInner"><a href="/wps/openworld/ebb/germany/html/de/our_approach.html" class="ebb_navigationElement_link_self" onclick="ebb_selectNavigation(this, false)">Unser Ansatz</a></div></div><div class="ebb_navigationElement"><div class="ebb_navigationElementInner"><a href="/wps/openworld/ebb/germany/html/de/email_your_question.html" class="ebb_navigationElement_link_self" onclick="ebb_selectNavigation(this, false)">Kontaktieren Sie uns</a></div></div><div class="ebb_navigationSpacer"><div></div></div></div></body></html>

and here is the cleaned version (55 lines)

<html><head><style type="text/css">.ebb_navigationElement {position: relative;display: inline;float: left;z-index: 1;margin-left:-2px;border-right: #009286 2px solid;border-bottom: #009286 1px solid;}.left_offset {margin-left:0px;}.ebb_navigationElement_selected {color: #000000;float: left;border-bottom: #000000;border-left: #009286 2px solid;}.ebb_navigationSpacer {float:left;width: 100%;height: 1px;display: block;border-bottom: 1px solid #009286; }</style></head><body>	<div class="ebb_navigation">		<div class="ebb_navigationElement left_offset">				<a href="/wps/openworld/ebb/germany/html/de/you_want_to.html" class="ebb_navigationElement_link_self" onclick="ebb_selectNavigation(this, false)">Sie möchten</a>		</div>		<div class="ebb_navigationElement">				<a href="/wps/openworld/ebb/germany/html/de/our_products.html" class="ebb_navigationElement_link_self" onclick="ebb_selectNavigation(this, false)">Unsere Produkte</a>		</div>		<div class="ebb_navigationElement">				<a href="/wps/openworld/ebb/germany/html/de/our_approach.html" class="ebb_navigationElement_link_self" onclick="ebb_selectNavigation(this, false)">Unser Ansatz</a>		</div>		<div class="ebb_navigationElement">				<a href="/wps/openworld/ebb/germany/html/de/email_your_question.html" class="ebb_navigationElement_link_self" onclick="ebb_selectNavigation(this, false)">Kontaktieren Sie uns</a>		</div>		<div class="ebb_navigationSpacer">		</div>	</div></body></html>

Now... pertaining specifically to the issue you brought up. The reason the code you're trying to implement isn't working is because you're trying to mix fixed-widths with percentage widths. A browser isn't capable of anticipating that the width after the dynamically generated links, this is why when you set the spacer to width:100% the browser interpreted the width as 100% of the page.A solution to this would be to calculate and output the width based on the number of links that are being inserted. There are two ways you could do this. Ex1. (make the link widths a static percentage)You could do this by putting a static percentage value in the class and calculating the leftover portion with a script.Here is an example in java script:

function leftover (num_of_links) {	var used = num_of_links * 14;	var width = (100 - used);	document.getElementById('spacer').style.width = width+"%";}

Here is the css

ebb_navigation {position:relative;width:100%;}.ebb_navigationElement {position: relative;width: 14%;display: inline;float: left;z-index: 1;margin-left:-2px;border-right: #009286 2px solid;border-bottom: #009286 1px solid;}.ebb_navigationSpacer {height:auto;display:inline;float:left;z-index:1;border-bottom: 1px solid #009286; }

You wouldn't specify the width of the spacer because it is calculated and inserted using javascript.Ex1. (make all of the links relative)I would choose to write a php function in this example because setting the attributes of a class is difficult in javascript and it would be easier to echo the value in the css code before the page loads.Creating and adding layouts dynamically is complicated and the layout is usually easier to generate with a few lines added to the loop that generates the html. I could probably work around a solution if I was working through the code that generates the html for the links. As far as I know CSS isn't capable of mixing fixed measurements (px) with relative (%) measurements. As powerful and useful as css is, it isn't magic. There are a few logical limitations to its uses.

[catorarn]

First of all, thanks so much for your feedback! I understand much better what is going on now. I have applied the javascript/css/html code on a test page and I got the javascript solution working but I abandoned this strategy after discussing with the team. The reason for that is that we are not using body onload in any of the customer pages. We do use javascript, but it is included in js files and not loaded through the body, but actioned in forms only. Also, there are a couple of things I ran into with this solution:a. how do I calculate and process the amount of divs into a javascript function (num_of_links)? I just got so far as to put hardcoded 4 links in body onload:leftover(4). I reckon I will have to create another function to calculate the amount of ebb_navigationElements in the code. It is not very hard to do I guess.b. much more important is that I also need to get a javascript function to calculate the amount of characters in the divs called ebb_navigationElement and then reduce the size of the spacer to fit into the screen as wellc. we need to implement a min-width as well as reducing the size of the browser will morph the navigation bar. The customer agreed to a min-width so that is allright to implement. I did not try it out yet, so I am not sure if that will work.All and all, I think it is better to look at alternatives for this javascript solution.The Ex1. point looks more like the way to go. If we continue with the nested div navigation system, we must create a system that has just uses % generated widths then. I think we are hitting a quite interesting web development challenge here. Have you seen other sites with nested div horizontal navigation bars with relative widths in percentages? I have done some hours of googling and scanning web development sites, but I have not found any sites that implemented such a system. I am very interested in comparing our nested div layout with some other existing navigation to see how others developed this leftover using your Ex1. suggestion. Can you provide some benchmark sites or material for us to look at? Or can you forward me to a good resource about nested layer navigation bars? That would be fantastic!If you are interested in more details about the way we produce this navigation layer, here is a description of the way we dynamically produce the horizontal navigation follows for you:TeamSite uses a content entry form in the basis of an xml file, combined with a perl template. This will generate the html for the navigation which gets included in every page when a user deploys the page to the front end server.In TeamSite CMS we use perl to generate this navigation bar. The perl will scan the xml file for item names like for instance iwpt_dcr_value('iterx.link.browse');iwpt stands for interwoven presentation template, dcr for data content record. The code iterates through the xml to grab all the links, the titles and navigation levels (there are 3 levels down, the second and third being only processed in the left navigation bar). The logic looks like this:

xml<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE record SYSTEM "dcr4.5.dtd"><record name="navi" type="content"><item name="language"><value>en</value></item><item name="regeneration_path"><value>/html/en/</value></item><item name="home"><value><item name="name"><value>sa_testing_navigation</value></item></value></item><item name="first_level"><value><item name="name"><value>About Us has more than 32 characters and and wraps?</value></item><item name="link"><value><item name="browse"><value>/templatedata/EBB/Generic/data/en/Events</value></item></value></item><item name="window"><value>_self</value></item><item name="second_level"><value><item name="name"><value>Goals of this navigation link is that is has more than 32 characters and wraps?</value></item><item name="link"><value><item name="browse"><value>/templatedata/EBB/Generic/data/en/Goals</value></item></value></item><item name="window"><value>_self</value></item><item name="third_level"><value><item name="name"><value>Objectives</value></item><item name="link"><value><item name="browse"><value>/templatedata/EBB/Generic/data/en/Objectives</value></item></value></item><item name="window"><value>_self</value></item></value></item></value><value><item name="name"><value>Call us</value></item><item name="link"><value><item name="browse"><value>/templatedata/EBB/Generic/data/en/Contact</value></item></value></item><item name="window"><value>_self</value></item><item name="third_level"><value><item name="name"><value>Branch networking whatever whate</value></item><item name="link"><value><item name="browse"><value>/templatedata/EBB/Generic/data/en/Branches</value></item></value></item><item name="window"><value>_self</value></item></value><value><item name="name"><value>Additional third level navigatio</value></item><item name="link"><value><item name="browse"><value>/templatedata/EBB/Generic/data/en/Blah</value></item></value></item><item name="window"><value>_self</value></item></value></item></value><value><item name="name"><value>New Products</value></item><item name="link"><value><item name="browse"><value>/templatedata/EBB/Generic/data/en/Intranet</value></item></value></item><item name="window"><value>_self</value></item><item name="third_level"/></value></item></value><value><item name="name"><value>You want to...</value></item><item name="link"><value><item name="browse"><value>/templatedata/EBB/Generic/data/en/you_want_to</value></item></value></item><item name="window"><value>_self</value></item><item name="second_level"><value><item name="name"><value>Import\Export</value></item><item name="link"><value><item name="browse"><value>/templatedata/EBB/Generic/data/en/you_want_to_export_import</value></item></value></item><item name="window"><value>_self</value></item><item name="third_level"/></value></item></value></item></record>

presentation template in perl:<?xml version="1.0" standalone="no"?><iw_pt>	<iw_load_dcr 	var="x"	mode="docroot"	file='templatedata/EBB/Navigation/data/{iw_value name="$iw_arg{language}"/}/navi'	global="f"	/>	<iw_perl><![CDATA[		use Access_Online::Common;		#deterimine if its a preview or generation call 		my $preview = iwpt_get_flag_param('-oprefix');		my $branch = iwpt_get_flag_param('-iw_include-location');		$branch =~ s!\\!/!g;		$branch =~ s!.*/Access_Online/(.*)/WORKAREA/.*!$1!;		my $pt_name = iwpt_get_pt_name('basename');		# Access_Online::Common::logDebug("$pt_name branch: $branch", $branch);				my $encodeURLopen = "";		my $encodeURLclose = "";		my $webRootPath	= "";				if(!$preview){			$webRootPath = Access_Online::Common::getConfig("Presentation.webRootPath" , $branch);			$encodeURLopen = "java script:ebb_htmlpath(\'".$webRootPath;			$encodeURLclose = "\')";		};		my $ofile = $iw_arg{ofile};		my $found = 0;		my @node_path;		my @x_nodes = iwpt_dcr_list('x.first_level');		foreach my $iterx (@x_nodes) {				if ( iwpt_dcr_value('iterx.link.browse') eq $ofile ) {				$node_path[++$#node_path] = iwpt_dcr_value('iterx.link.browse');				last;			};			my @y_nodes = iwpt_dcr_list('iterx.second_level');			foreach my $itery (@y_nodes) {				if ( iwpt_dcr_value('itery.link.browse') eq $ofile ) {					$node_path[++$#node_path] = iwpt_dcr_value('iterx.link.browse');					$node_path[++$#node_path] = iwpt_dcr_value('itery.link.browse');					last;				};				my @z_nodes = iwpt_dcr_list('itery.third_level');				foreach my $iterz (@z_nodes) {					if ( iwpt_dcr_value('iterz.link.browse') eq $ofile ) {									$node_path[++$#node_path] = iwpt_dcr_value('iterx.link.browse'); 						$node_path[++$#node_path] = iwpt_dcr_value('itery.link.browse'); 						$node_path[++$#node_path] = iwpt_dcr_value('iterz.link.browse'); 						last;					};							};				last if ($#node_path > 0);			};			last if ($#node_path > 0);		};		my $selected = "";		my $first = 0;		my $style_prefix;		iwpt_output('<div class="ebb_navigation">');		@x_nodes = iwpt_dcr_list('x.first_level');		foreach my $iter (@x_nodes) {			$style_prefix = "ebb_navigationElement";			if ($first == 0) {				$first = 1;				$style_prefix = "ebb_navigationElementFirst";			};			if ( iwpt_dcr_value('iter.link.url') eq '' ) {				my $url_name = iwpt_dcr_value('iter.link.browse');				$url_name =~ s|\\|/|g;				$url_name =~ s|^.*/(\w+/\w+)$|/html/$1.html|g;				if ($#node_path > -1) {					if (iwpt_dcr_value('iter.link.browse') eq $node_path[0]) {						$selected = "_selected";					}					else {						$selected = "";					}				}				else {					$selected = "";				}				my $name = iwpt_dcr_value('iter.name');				my $window = iwpt_dcr_value('iter.window');				iwpt_output('<div class="' . $style_prefix . $selected . '">');				iwpt_output('<div class="' . $style_prefix . 'Inner' . $selected . '">');				iwpt_output('<a href="' . $webRootPath . $url_name . '" class="ebb_navigationElement_link' . $window . '" onclick="ebb_selectNavigation(this, false)">');				iwpt_output($name);				iwpt_output('</a></div></div>');			}			else {				my $href = iwpt_dcr_value('iter.link.url');				my $name = iwpt_dcr_value('iter.name');				my $window = iwpt_dcr_value('iter.window');				iwpt_output('<div class="' . $style_prefix . '">');				iwpt_output('<div class="' . $style_prefix . 'Inner">');				iwpt_output('<a href="' . $href . '" class="ebb_navigationElement_link' . $window . '" onclick="ebb_selectNavigation(this, true)">');				iwpt_output($name);				iwpt_output('</a></div></div>');			};		};		iwpt_output('<div class="ebb_navigationSpacer"><div> </div></div>');		iwpt_output('</div>');		]]>	</iw_perl></iw_pt>

[Coolguy]

a. For this problem you would set a variable (ex num_of_links) to increment in the loop that generates the html code for each link. Ie. add a counter into the "foreach my $iter (@x_nodes)" this loop and return it after the loop endsb. My preference would be to set the width to be the same for all ebb_navigationElement then just calculate the rest of the width using the formula above. If you decide against the easy solution here is the code to loop through the link text lengthsJust copy and paste this whole section to a new doc to see the demonstration

<html><head><title>JavaScript Function Test</title><script type="text/javascript">function count_links(){	var count = 1;	var total = 0;		do {		var chars = document.getElementById("nav"+count).innerHTML.length;		alert("Nav"+count+"= "+chars+"chars");		count++;		total += chars;		document.getElementById("test").innerHTML = total;	}	while (chars!="");}</script></head><body onload="count_links()"><a id="nav1">link 1</a><br /><a id="nav2">link has lots of chars 2</a><br /><a id="nav3">ln 3</a><br /><a id="nav4">link anchor 4</a><br /><a id="nav5">link 5</a><br /><a id="nav6">link 6</a><br /><a id="nav7">link 7</a><br /><br />Total Chars: <span id="test"></span></body></html>

I have to admit... I scratched my head for a minute trying to figure this one out.One obvious limitation to this method I see is that fonts appear different widths in different browsers. This may still be do-able with a little research.c. It's worth a try. To keep links from stacking if the browser width changes I usually contain the links within a container div with a static height that is the same as the height of the links.<quote>I think we are hitting a quite interesting web development challenge here. Have you seen other sites with nested div horizontal navigation bars with relative widths in percentages? I have done some hours of googling and scanning web development sites, but I have not found any sites that implemented such a system.</quote>I haven't seen this used in navbars. Of course, I don't usually pay much attention to navigation on web sites. I also haven't ever used a CMS to create a site (aside from mwiki) so I'm not very familiar with how they collect info to generate pages. If you want to see a site that uses percentages to adjust to the browsers window size check out this page.http://www.newegg.com/Store/Category.aspx?...ame=Hard-DrivesDrag the window size to increase/decrease width and notice how the sale items adjust to compensate.But, also notice how there are only 3 items no matter the size. This is done by using 33% in the same way I suggested using Ex1 in my last reply.As far as the multi-level nested-div-navigation, I'm not clear what you're talking about. Do you mean generated three-tier hierarchical drop-down menus? I think I have seen this before but I don't have any specific examples and I've never seen anything like it in a CMS generated site.I'm not familiar with perl so reading the template code is like reading Chinese to me but I'll digest it a little to see what it does.As far as using JavaScript. I would encourage you to use it as little as possible. Always remember that JavaScript is client-side meaning that users could always turn it off. I suggest using server-side (PHP ASP). Most of these features can be duplicated or compensated for in another language.