CSS Dropdown menu for the header- With Categories!

[kburner]

I have been stuggling for several days and have looked thru forum. My issues seem to be css related. Need any help I can get with...

*categories are going vertical instead of horizonal across dropMenu bar
Here is css.

div#dropMenu {
position:relative;
width: 100%;
height:25px;
margin: 0em;
margin-top: 1px;
padding: 0em;
text-align:center;
z-index: 1000;
border-bottom: 2px solid #083562;
font-family: Lucida Sans;
float: center;
}

*space between dropmenu and logo/wrapper
Not sure where to change this. I have modified logo, wrapper and MenuWrapper with no luck.

Thanks, Kim

*categories are going vertical instead of horizonal across dropMenu bar
Got this figured out...not sure what I did.
But I have 13 categories and can not get them to all fit. Caps are small - so they should fit....Any one know how to get them all across??

*space between dropmenu and logo/wrapper
Still have space in FF, but gone from IE...

Added to stylesheet:

.clearBoth {
clear:both;
height: 2.5px;
font-size:0;
line-height: 0;
}

Kim

[kburner]

*categories are going vertical instead of horizonal across dropMenu bar
Got this figured out...not sure what I did.
But I have 13 categories and can not get them to all fit. Caps are small - so they should fit....Any one know how to get them all across??

*space between dropmenu and logo/wrapper
Still have space in FF, but gone from IE...

Added to stylesheet:

.clearBoth {
clear:both;
height: 2.5px;
font-size:0;
line-height: 0;
}

Kim

I am still struggling with css with this mod. I love it - but can not get it to work. I have been going thru large forum looking for answers.

***I have 13 categories - how do I get them to fit?? I have hidden at this time because it causes them to go to next line.

***Extra space above categories in FF but not IE.


Please help!

Thanks, Kim

[kburner]

I am still struggling with css with this mod. I love it - but can not get it to work. I have been going thru large forum looking for answers.

***I have 13 categories - how do I get them to fit?? I have hidden at this time because it causes them to go to next line.

***Extra space above categories in FF but not IE.


Please help!

Thanks, Kim

Any one??

[kburner]

Been working very hard to get this to work! Almost there...

***I have 13 categories - how do I get them to fit?? I have hidden at this time because it causes them to go to next line.
Finally got all 13 to fit---used
#divdropMenu li

div#dropMenu li {
position:relative;
list-style:none;
margin:0;
margin-left: .5px;
float: left;
line-height:1em;
width: 7.6%;
text-align:center;
}

***Extra space above categories in FF but not IE.
Now works in FF but not IE... This is what code looks like.

div#dropMenu {
position:relative;
width: 100%;
height: 25px;
margin-top: -10.99px;
margin-bottom: .19px;
text-align:center;
z-index: 1000;
font-family: Lucida Sans;
}


Any suggestions on how to get IE to work?

Thanks, Kim

[jettrue]

Been working very hard to get this to work! Almost there...

***I have 13 categories - how do I get them to fit?? I have hidden at this time because it causes them to go to next line.
Finally got all 13 to fit---used
#divdropMenu li

div#dropMenu li {
position:relative;
list-style:none;
margin:0;
margin-left: .5px;
float: left;
line-height:1em;
width: 7.6%;
text-align:center;
}

***Extra space above categories in FF but not IE.
Now works in FF but not IE... This is what code looks like.

div#dropMenu {
position:relative;
width: 100%;
height: 25px;
margin-top: -10.99px;
margin-bottom: .19px;
text-align:center;
z-index: 1000;
font-family: Lucida Sans;
}


Any suggestions on how to get IE to work?

Thanks, Kim

See how in my original file, I have two width's for div#dropMenu li, and the second one starts with a *? That asterisk one is for IE only:

div#dropMenu li {
	position:relative;
	list-style:none; 
	margin:0; 
	float:left; 
	line-height:1em;
	width:16.667%;
	*width:16.649%;
	}

So you need to add *width:7.5;

to your div #dropMenu li. Or something like that, basically IE needs a slightly smaller percentage.

[kburner]

See how in my original file, I have two width's for div#dropMenu li, and the second one starts with a *? That asterisk one is for IE only:

div#dropMenu li {
	position:relative;
	list-style:none; 
	margin:0; 
	float:left; 
	line-height:1em;
	width:16.667%;
	*width:16.649%;
	}

So you need to add *width:7.5;

to your div #dropMenu li. Or something like that, basically IE needs a slightly smaller percentage.

I tried and it did not work. I need it to work on top/bottom margins.

I even tried it with *margin-top: ...in #divdropMenu.
Kim

[sikocan]

Hi there,

How can I get the submenu to align with the main button?

If you look at the website:
http://www.1800computers.com.au/shop/

You can see the horizontal blue bar which looks good, stretching all the way, but when you hower over a link, the submenu doesn't align with the main button.

How can I fix this? I tried editing few options in stylesheet_header_menu.css file but no luck.

By the way, thanks for the great addon, awesome stuff.

[kburner]

I tried and it did not work. I need it to work on top/bottom margins.

I even tried it with *margin-top: ...in #divdropMenu.
Kim

Managed to get spacing working when NOT logged-in. But messes up again in both IE and FF - when I log-in.

I really like this mod. The rest of header looks pretty good.

Any ideas on how to fix.

Thanks,Kim

[kburner]

I am still working on categories in my header. I dropped one trying to get all to fit.

Still does not look very good and categories are running together like Homeschool and kids.

Still Need:
1. Categories to line up across -spacing
2. When hover over Christian Living - covers words up

Any suggestions? Kim

www.burnerbooks.com

[Newbie76]

Installed on my 1.3.8a and working like a charm, just got to edit the stylesheet tomorrow to change the colours!


Thankyou for such a great add-on!