16 replies [Last post]
HardAtWork
HardAtWork's picture
Offline
Regular
Last seen: 8 years 27 weeks ago
Timezone: GMT-5
Joined: 2008-08-14
Posts: 19
Points: 0

Please help as I'm on the verge...the verge of what I don't know.... :shrug:

MY TEST HORIZONTAL MENU

I actually centered my horizontal menu today :thumbsup: after about 500 hours of searching...not sure what i did but it is beautiful!

Except.....

Can not align the child to the parent or rather the submenu to the main tab. :curse: this after only about 30 hours and reading everything I can find on the web. Hope there is some magic fix or stupid thing I've overlooked. I'm using menuh.css as presented by sterling.com with an ie hover fix in the head:

(The main tabs center in the html page but the submenu drops down just fine but is over the the right by 50% of the parent tab.)

<!--[if lt IE 7]>
<style type="text/css" media="screen">
#menuh{float:none;}
body{behavior:url(csshover.htc); }
#menuh ul li{float:left; width: 100%;}
#menuh a{height:1%;font:bold 10px/12px verdana, arial, sans-serif;}
</style>
<![endif]-->

The above works with csshover.htc available here: Peter's Site

And the coup de grace: css

/* Begin CSS Drop Down Menu */
 
#menuh-container
	{
	display:block;
	margin:0 0 0 0;
	text-align:center;
	position: relative;	
	top: 0em;
	background-color: #cc9999;
	/* commented out as does not seem to be needed */
	/*left: 1em; */
	}
 
#menuh
	{
	font-size: 10px;
	font-weight: bold;
	font-family: verdana, arial, helvetica, sans-serif;
	width:75em;
	margin:0 0 0 0;
	}
 
#menuh a
	{
	text-align: center;
	display:block;
	border: 1px solid #0099CC;
	white-space:nowrap;
	margin:0 0 0 0;
	padding: 0.3em;
	}
 
#menuh a:link, #menuh a:visited, #menuh a:active	/* menu at rest */
	{
	color: #ffffff;
	background-color: #996666;
	text-decoration:none;
	}
 
#menuh a:hover	/* menu at mouse-over  */
	{
	color: #ffffff;
	background-color: #cc9999;
	text-decoration:none;
	}	
 
#menuh a.top_parent, #menuh a.top_parent:hover  /* attaches down-arrow to all top-parents */
	{
	font-size:12px;
	background-position: right center;
	background-repeat: no-repeat;
	}
 
#menuh a.parent, #menuh a.parent:hover 	/* attaches side-arrow to all parents */
	{
	background-position: right center;
	background-repeat: no-repeat;
	}
 
#menuh ul
	{
	list-style:none;
	margin:0 0 0 0;
	padding:0;
	float:left; 	/* this keeps the cells horizontal as apposed to a vertical list */
	width:12.5em;	/* width of all menu boxes */
	}
 
#menuh li
	{
	position:relative;
    min-height: 1px; 			/* Sophie Dennis contribution for IE7 */
    vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
	}
 
#menuh ul ul
	{
	position:absolute;
	z-index:500;
	top:auto;
	display:none;
	padding: 1em;
	margin:-1em auto 0 -1em;
	}
 
#menuh ul ul ul
	{
	top:0;
	left:100%;
	}
 
div#menuh li:hover
	{
	cursor:pointer;
	z-index:100;
	}
.clearBoth {
 clear:both;
 height:0;
 font-size:0;
 line-height:0;
 margin:0;
 padding:0;
 }
 
div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}
 
div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}
 
/* End CSS Drop Down Menu */

Really appreciate any insights and I will post my results for others.

Designing a kayak site is not an outdoor sport? Now they tell me!

David Laakso
David Laakso's picture
Offline
Enthusiast
US
Last seen: 10 years 52 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

You might get an answer a

You might get an answer a lot faster by simply providing a clickable link to the page. Some of us would like to spend time problem solving, rather than wasting time re-building your page from snippets of what you think may be important.

HardAtWork
HardAtWork's picture
Offline
Regular
Last seen: 8 years 27 weeks ago
Timezone: GMT-5
Joined: 2008-08-14
Posts: 19
Points: 0

test page

SORRY...IT IS UP NOW:

See link to test site above or here MY TEST MENU

Designing a kayak site is not an outdoor sport? Now they tell me!

HardAtWork
HardAtWork's picture
Offline
Regular
Last seen: 8 years 27 weeks ago
Timezone: GMT-5
Joined: 2008-08-14
Posts: 19
Points: 0

50%

the child drop down tabs appear to be exactly 50% over from where they should be???? Is that a clue? I've tried setting everything once twice and three times and most often get not change when i do.

Designing a kayak site is not an outdoor sport? Now they tell me!

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 4 years 31 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

Are you aware that the menu

Are you aware that the menu is flush left in Firefox 3? I'll take a more in depth look at the code, but you really should build it to work perfectly in FF, and then fix it for IE. Don't start with trying to make it work in IE with a bunch of weird code, you'll give yourself headaches.

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 4 years 31 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

Ok, remove the absolute

Ok, remove the absolute positioning from your #menuh ul ul property or replace it with relative positioning and that should fix the problem.

Looking at your code, that could create problems in other areas, but those can be worked through as well.

HardAtWork
HardAtWork's picture
Offline
Regular
Last seen: 8 years 27 weeks ago
Timezone: GMT-5
Joined: 2008-08-14
Posts: 19
Points: 0

working in ff

It's been working in FireFox all along...that is why I've been trying to get it to work in ie6 and 7 with some good results but now I see you are right...something I did shifted it left...but I have to say, our stats almost never show anyone using firefox browser.

Designing a kayak site is not an outdoor sport? Now they tell me!

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 4 years 31 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

What I meant was that it is

What I meant was that it is not being centered properly in FF. To center it properly you need to add the following to #menuh:

margin-left:auto;
margin-right:auto;

and remove
margin:0 0 0 0;

HardAtWork
HardAtWork's picture
Offline
Regular
Last seen: 8 years 27 weeks ago
Timezone: GMT-5
Joined: 2008-08-14
Posts: 19
Points: 0

BACKGROUND

OK..thanks...I upgraded my Fire Fox copy and yes, checked my stats and it being used to view our site.

So that worked for Fire Fox but it does not see my background. IE sees the background but does not center the child tabs.

Designing a kayak site is not an outdoor sport? Now they tell me!

HardAtWork
HardAtWork's picture
Offline
Regular
Last seen: 8 years 27 weeks ago
Timezone: GMT-5
Joined: 2008-08-14
Posts: 19
Points: 0

absolute

You know i just don't know what to trust. It is working now after this:

(had overlooked your absolute comment before...)
Changed absolute to relative and uploaded css
Resulted in home div being pushed down and missing tabs.
Changed it back to absolute
Everything is centered and works!

You think? Please take a look at the live page TEST PAGE

Style sheet now looks like this:

/* Begin CSS Drop Down Menu */
 
#menuh-container
	{
	display:block;
	margin:0 0 0 0;
	text-align:center;
	position: relative;	
	top: 0em;
	background-color: #cc9999;
	/* commented out as does not seem to be needed */
	/*left: 1em; */
	}
 
#menuh
	{
	font-size: 10px;
	font-weight: bold;
	font-family: verdana, arial, helvetica, sans-serif;
	width:75em;
	margin-left:auto; /*centers in Fire Fox */
	margin-right:auto; /*centers in Fire Fox */
	}
 
#menuh a
	{
	text-align: center;
	display:block;
	border: 1px solid #0099CC;
	white-space:nowrap;
	margin:0 0 0 0;
	padding: 0.3em;
	}
 
#menuh a:link, #menuh a:visited, #menuh a:active	/* menu at rest */
	{
	color: #ffffff;
	background-color: #996666;
	text-decoration:none;
	}
 
#menuh a:hover	/* menu at mouse-over  */
	{
	color: #ffffff;
	background-color: #cc9999;
	text-decoration:none;
	}	
 
#menuh a.top_parent, #menuh a.top_parent:hover  /* attaches down-arrow to all top-parents */
	{
	font-size:12px;
	background-position: right center;
	background-repeat: no-repeat;
	}
 
#menuh a.parent, #menuh a.parent:hover 	/* attaches side-arrow to all parents */
	{
	background-position: right center;
	background-repeat: no-repeat;
	}
 
#menuh ul
	{
	list-style:none;
	margin: 0 0 0 0;
	padding:0;
	float:left; 	/* this keeps the cells horizontal as apposed to a vertical list */
	width:12.5em;	/* width of all menu boxes */
	}
 
#menuh li
	{
	position:relative;
    min-height: 1px; 			/* Sophie Dennis contribution for IE7 */
    vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
	}
 
#menuh ul ul
	{
	position:absolute;
	z-index:500;
	top:auto;
	display:none;
	padding: 1em;
	margin:-1em 0 0 -1em;
	}
 
#menuh ul ul ul
	{
	top:0;
	left:100%;
	}
 
div#menuh li:hover
	{
	cursor:pointer;
	z-index:100;
	}
 
.clearBoth { /* from centering in zencart */
 clear:both;
 height:0;
 font-size:0;
 line-height:0;
 margin:0;
 padding:0;
 }
 
div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}
 
div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}
 
/* End CSS Drop Down Menu */

Designing a kayak site is not an outdoor sport? Now they tell me!

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 4 years 31 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

Did you try removing the

Did you try removing the absolute positioning as described in my other post? On the test page it is still set as absolute which I believe is causing the issue. The menu is centered properly in FF now btw.

edit- Sorry, you replied while I was replying, let me take a look at your previous post now. Smile

HardAtWork
HardAtWork's picture
Offline
Regular
Last seen: 8 years 27 weeks ago
Timezone: GMT-5
Joined: 2008-08-14
Posts: 19
Points: 0

time

Maybe it took the server a little time to refresh. I kept refreshing. I don't think it likes that relative link. It worked but it made all the tabs crazy...blank or out of order.

WEIRD THING IS it did work momentarily beautifully as in fire fox except without my 100% background on the tabs

Designing a kayak site is not an outdoor sport? Now they tell me!

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 4 years 31 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

Crap, should've looked

Crap, should've looked closer the first time.
I believe this should work.

From #menuh ul ul, remove
top:auto;
and add:

top:0;
left:0;

Keep the absolute positioning. My mistake on bad advice there.

HardAtWork
HardAtWork's picture
Offline
Regular
Last seen: 8 years 27 weeks ago
Timezone: GMT-5
Joined: 2008-08-14
Posts: 19
Points: 0

works

Hey..IT WORKS!

Can't thank you enough for hanging in there with me on this today. I know how valuable the time is. Maybe someone looking for a centered drop down horizontal menu will find this valuable.

Designing a kayak site is not an outdoor sport? Now they tell me!

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 4 years 31 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

Cool, glad I could help.

Cool, glad I could help. Should've seen that fix from the beginning, but o well. Smile

HardAtWork
HardAtWork's picture
Offline
Regular
Last seen: 8 years 27 weeks ago
Timezone: GMT-5
Joined: 2008-08-14
Posts: 19
Points: 0

oh no

Well...boooo

I just noticed that the child tabs, although aligned, jump up to cover the parent. Have not dealt with this before but will try and solve. If you see it right away what is wrong, please let me know. Getting closer all the time....

Designing a kayak site is not an outdoor sport? Now they tell me!

HardAtWork
HardAtWork's picture
Offline
Regular
Last seen: 8 years 27 weeks ago
Timezone: GMT-5
Joined: 2008-08-14
Posts: 19
Points: 0

top:auto;

top:auto;

:thumbsup:

Designing a kayak site is not an outdoor sport? Now they tell me!