Problem with HTML/CSS vertical navigation popout bar in FIREFOX...

[jerry101]

Hi, I've got the usual problem that people seem to have with HTML/CSS nav bar's where it's displaying and working fine in IE but not in Firefox.

The website address is

https://www.trisynergypreview.co.uk

The nav bar on the left just doesn't display properly in Firefox.

The CSS code is

@charset "utf-8";
/* CSS Document */

/* CSS Popout menuv */

/* Fix IE. Hide from IE Mac \*/
* html #menuv ul li{float:left;height:1%;}
* html #menuv ul li a{height:1%;}
/* End */

#menuv		                                 /* position, size, and font of  menu */
	{		
	top:19em;
	left:6em;
	z-index: 10;
	width: 8em;						          /* [1] width of menu item (i.e., box) */
	text-align: right;
	height : 1.6em;
	font:Arial;
	font-size:1em;
	font-weight:normal;
	font-style:normal;
	}

#menuv a
	{
	width: 100%;
	display:block;						
	padding-top: 0.2em;						/* expands menu box vertically*/
	padding-bottom: 0.2em;
	border-bottom:2px solid #999;		/* adds bottom border */
	white-space:nowrap;
	height : 1.6em;
	padding-right:9px;
	font-size:1em;
	}

#menuv a, #menuv a:visited				/* all menus at rest */
	{
	color: #000;
	background-color: #ffd558;
	text-decoration:none;	
	height : 1.6em;
	font-size:1em;			       /* removes underlines from links */
	}

#menuv a.parent, #menuv a.parent:hover 	/* attaches parent-arrow on all parents */
	{
	background-color: #ffd558;
	background-position: right center;
	background-repeat: no-repeat;
	height : 1.6em;
	font-size:1em;
	}

#menuv a:hover				             /* all menus on mouse-over */
	{
	color: #000;
	background-color: #ffd558;
	height : 1.6em;
	text-decoration:underline;
	font-size:1em;
	}
	
#menuv li
	{
	list-style-type:none;	
	height : 1.6em;	
	font-size:1em;           /* removes bullets */
	}

#menuv ul li
	{
	position:relative;
	height : 1.6em;
	font-size:1em;
	}

#menuv li ul
	{
	position: absolute;
	top: 0;
	left: 160px;				                 /* distance from  left menu (this should be the same as width value in #menuv [1]) above */
	display: none;
	height : 1.6em;
	font-size:1em;
	}

div#menuv ul, #menuv ul ul, div#menuv ul ul ul
	{
	margin:0;				               /* keeps the menu parts together */
	padding:0;
	width: 150px;	
	height : 1.6em;
	font-size:1em;		              /* width of sub menus  (this should be the same as width value in #menuv [1]) above */
	}

div#menuv ul ul, div#menuv ul ul ul, div#menuv ul li:hover ul ul, div#menuv ul li:hover ul ul ul
	{
	display: none;
	height : 1.6em;
	font-size:1em;
	}

div#menuv ul li:hover ul, div#menuv ul ul li:hover ul, div#menuv ul ul ul li:hover ul
	{
	display: block;
	height : 1.6em;
	font-size:1em;
	}

Does anyone have any ideas where I'm going wrong in that?!

[jerry101]

Oh and if some images / flash videos aren't displaying it's because I haven't uploaded the whole website to this test server as I only put it on there to ask this question and didn't think I'd need the complete site up.

[David Laakso]

Whenever something is not going right, rule of thumb is to validate the markup (your CSS is valid). FWIW, when you provide the page uri, as you have, anyone can open the CSS file-- no need to provide it to the forum.

[jerry101]

Thanks.

The HTML and CSS for that page is now valid, but the error is still there.

The pop out part is now working on the firefox version which is good, it's just some of the display is not correct, i.e. the border under each worded link isn't displaying?

Thanks

[David Laakso]

Hmm. Either you are very fast at correcting 32 markup validation errors, or I made a grave error and validated the wrong site. Either way, the page is valid as of this writing.

[jerry101]

Most of it was OMITTAGS etc. Easy stuff to correct.

But do you have any idea where it's going wrong.

I just cant seem to get that line to display for some reason...

[David Laakso]

Most of it was OMITTAGS etc. Easy stuff to correct.

But do you have any idea where it's going wrong.

I just cant seem to get that line to display for some reason...

Dunno. Hard to hit a moving target. Try deleting this:

#menuv a
	{
	white-space:nowrap;<--------- :: delete
	}

This will help a little (and somewhat as far as font-scaling is concerned). You'll need to check the bottom of the nav block as the last link may drop out of the bottom of it.

Additionally, you're triggering a major bug in all the IEs. When fonts are declared in em's, you need to declare percent on the body or html or the fonts will go totally goofy at any of the 5 text-size settings. Add this to your style sheet:

html {font-size: 100%;}

[jerry101]

What do you mean by it being a moving target...

I've been googling it everywhere as well as can't really seem to find any ideas, some people have had similar problems but never much help back.

It seems likes it one of those old classic brain killers...

[David Laakso]

What do you mean by it being a moving target...
A page that has been posted for de-bugging that looks different in the same browser every time the person attempting the de-bugging looks at it.

What do you mean by "that line?" On this end the page is relatively close right now in Mac FF and XP IE/7. Both, with a little font-scaling will drop the last line out the bottom of the nav block, as noted earlier. The difference seems to be with IE/6. IE/6 draws a rule/border/line (whatever you want to call it under each list item). Is this the rule/border/line you are talking about? If so, more likely than not, it is because IE/6 gets it wrong-- and may need correction. However, I did not look at the code to confirm this.

[jerry101]

There's a Grey border line which seperates each link making it into a rectangle box sort of thing.

the code i used for it is

border-bottom:1px solid #999999;

But it's not displaying on Firefox apart from the very last one so at the bottom of the whole HTML list really.

[David Laakso]

There's a Grey border line which seperates each link making it into a rectangle box sort of thin box.

Add a border-top to the selector, upload it to the server, and try it in IE/6, IE/7, FF, and Opera.

#menuv a
	{ 
	width: 100%;
	display:block;						
	padding-top: 0.2em;	
        border-top: 1px solid #999999; <----------- :: add					
	border-bottom:1px solid #999999;	<----------- :: leave
	height : 2em;
	padding-right:9px;
	font-size:1em;
	}

[jerry101]

Ha, never thought about that.

That works, but the line thins out towards the right which I assume means something is interfeering with it somewhere, so I'll take a look.

Thanks so much man!

[jerry101]

Actually, the border thins because of the padding I've used on the right.

[jerry101]

Everything seems to work with the menu now, but the form below on the left hand side doesn't show up in Firefox now...

Not sure what's going on there, I'm trying some z-index stuff to get it to appear but nothing happening!

[jerry101]

one of the most frustrating days ever.....

any one have any idea why that won't come up?

Thanks