CSS Dropdown menu for the header- With Categories!

[oceanturqiri]

I installed the dropdown menu on my site. In firefox, it created a white space between the top and bottom of my image and in IE, the white space just shows up at the bottom of the image. How do I push the menu up against the picture. My site is located here: http://thejubileemarket.infostampede.com/catalog if you want to have a look. Thanks.

[0be1]

I installed the dropdown menu on my site. In firefox, it created a white space between the top and bottom of my image and in IE, the white space just shows up at the bottom of the image. How do I push the menu up against the picture. My site is located here: http://thejubileemarket.infostampede.com/catalog if you want to have a look. Thanks.

Oceanturqiri;

You will see throughout this thread that many people had the same problem maybe just worded differently. By looking at your site I see your header image is at 251px. If you look for the section below in your stylesheet you will notice the height of the logo wrapper is the same px setting as your image. Try backing the height down a bit in the #logoWraper section, say to 200, save the changes and reupload your stylesheet.css file.


#logoWrapper{
background-image: url(../images/painting-banner-jm.jpg);
background-repeat: repeat-x;
background-color: #ffffff;
height:251px;
}

Be sure to do a backup of that file first of course. If that does not work, please post back here and we'll try something else.

Good luck

0be1

[oceanturqiri]

Hello,

Thank you for your help. I am still having problems, though. In firefox, it fixed the bottom part, however, the white strip above the image remains. It seems as though it is pushing up the purple strip. IE behaves differently: When I change the size of the logo wrapper, it pushes the menu, a small white strip, and the image up and under the purple strip on the top of the page.

Thanks,

Ocean

[0be1]

I cannot make changes to the stylesheet.css file and save it and then view it in IE. I can only make changes (and not save it) in firefox using the webdeveloper tools. It is definitely a night a day difference between the two browsers (I hate IE and Microsoft (sorry for the rant )

Is it the border 1px in the main wrapper section causing your problem? You can try that and see what you get. If you are not using firefox and the webdeveloper and firebug plugins I suggest you give it a try. With the webdeveloper plugins you can see the div layout (which helps alot!!!) edit your css files in real time and so much more.

Try changing the 1px under #mainWrapper and post back if you are still having problems.

thanks...

0be1

[oceanturqiri]

Hello Obe1

When I change the 1px in the main wrapper, it just changes the border around the entire page. I don't know anything about web developer plugins or div layouts - but I guess I'll be learning. I am going to go crazy and throw the computer out the window. Just kidding, sort of.

It actually looks better in IE except for the little white line. I firefox, there is a huge white at the top between the purple bit and the picture.

Any other suggestions?

Thanks,

Ocean

[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?