CSS Dropdown menu for the header- With Categories!

[0be1]

Learning is a good thing :o)

The only other thing I can (take a stab at) is in your header_menu.css look for:

div#dropMenu li a {
display: block;
/* Hides from IE5-mac \*/
height: 1%;
/* End hide from IE5-mac */
padding: .6em 0;
text-decoration: none;
text-transform:uppercase;
color:#ffffff;
text-align:center;
border-right:1px solid #ffffff;
}

Not sure what that height: 1%; controls. Other than that you may have to either do the things I suggest with Firefox in my previous post or maybe jettrue will check in in a couple of days.

Sincerely,

0be1

[oceanturqiri]

Maybe the problem is that the image is set as a background and not just an image. I don't know enough about CSS to fix the problem.

Ocean

[inthecomputer]

oceanturqiri:

I would take a look at what that pesky '.back' style element is doing to your header but take note that if you change it, it will change other nav elements in in the footer and possibly other areas so keep an organized backup of your style sheet.

try searching for "ie whitespace bug" in google if you have gaps and spaces above or below the menu in ie but not in firefox. usually the fix involves a negative margin or padding value to be added somewhere like {padding-top: -3px} . try not to get used to that hack in regular style sheet building, there's usually a proper solution although this menu does cause ie to have this this issue often enough.

I have a question for the forum.

Has anyone added a timeout on this menu so your mouse doesn't miss the sub-categories? When the drop-down rows are skinny, you have to be nimble and quick with the pointer. I've seen some javascript stuff out there but maybe someone has already done the edits already?

[oceanturqiri]

Thank you for all of the responses. I hate to be a pain, but the problem isn't with IE, it is with firefox. There is an annoying white space that shows up in firefox, but not in IE, above the image and I don't know how to get rid of it.

http://thejubileemarket.infostampede.com/catalog

Thanks,

Ocean

[inthecomputer]

yup, try temporarily disabling that 'back' element for the firefox issue and see where you go from there.

[0be1]

Ocean;

Go down to the #headerWrapper, #contentMainWrapper, #logoWrapper,etc. section and breakout the #headerWrapper section like so. Change the color to anything you like other than #ffffff (as that is white) save, and reupload your css file.

#headerWrapper {

background-color: #000000;

}

Again, be sure to make a back up first. Again I hope this helps.

Sincerely,

0be1

[oceanturqiri]

Hello Obe1,

I am sorry, but that did not help.

I changed the mainWrapper background-color to #FFECB3 so that you can see what is happening.

I also changed the #navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
color to #000000; (it used to be white).

I greatly appreciate your time and your help.

Ocean

http://thejubileemarket.infostampede.com/catalog

[0be1]

Ocean;

That actually looks pretty good, I like it!!! (but hey, it's not my site ;o)

If you actually noticed my last post though it said to modify the #headerWrapper only which controlled the white part at the top.

Either way and whatever works for you :o)

Sincerely,

Shawn

[oceanturqiri]

Hello Shawn,

I should have mentioned that I did change the #headerWrapper... to 990099 to match the nav buttons. So it did work to eliminate the white space at the bottom of the buttons. I am so focused on that blasted space at the top of the image that I didn't give you credit for fixing the bottom bit. Anyway, I changed it to 000000, so that you can see the effect.

I also wanted to mention that I wasn't having this problem until I installed the dropdown menu, so it changed something.

Thank you for liking the new color scheme: ) I am putting this site together for a friend who is starting this ministry. She likes white, but I'll mention it to her.

Thanks again.

Ocean

[0be1]

Ocean;

What about this to stay consistent with the rest of the color scheme:

Search for h2.centerBox in your stylesheet.css

h2.centerBoxHeading {
font-size: 1.3em;
color: #000000;
background-color: #990099; // I added this line and matches your other color purple.
}


Just a thought ;o)

Keep up the good work!!!!

Sincerely,

0be1