[Marc985]

Hello I'm pretty new to web design...I've created this website for the company I work for...It's a small company so I've taken on many roles beside my primary responsibilities. This is the first site I've built and I would really like help with the drop down menu.

The issue I have is in firefox the menu looks the way it should..however in IE6 the drop downs are double spaced. I can't seem to solve this...if someone could show me what to do in the code to fix this issue it'd be very helpful!

The website is esailingyachts


Thanks,
Marc

[jaydi]

Hi Marc

There is a tutorial that might help you but the system won't let me post the URL.

If you type tanfa dropdown menu into google you should get it at No. 1

Hope that helps

Best wishes
Jennie

[Marc985]

Jennie this is one of the tutorials I used...It doesn't work in IE6 though...at least not on my computer...thanks for trying

i noticed some of the sites in your portfolio page on your website have horizontal drop down menus...I copied that code...I noticed it doesn't work locally but work on your site...am I forgetting something that needs to be added to the remote site?

[jaydi]

Hi Marc

Have you got the csshover.htc file?

Regards, Jennie

[Marc985]

nope...suppose that could be the issue...

after looking at it I'm a bit unclear as to how to use it.do you just upload it to the server and in the If IE section just link to it?

also I noticed they have the packed and source downloads on the site which do I want?

[jaydi]

IE6 needs it to work. In fact just noticed one of mine wasn't working in IE6 as I forgot to upload it, so you did me a favour!

The csshover.htc file just sits on the server and you reference it in the html head thus

<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 80%;
</style>
<![endif]-->

I can't remember how I downloaded the file as it was a while ago and I also remember having trouble finding it! In fact I think for the horizontal menus I've done I used another set of css code that I found to build the drop downs, but I still needed that csshover.htc to get it to work in IE6.

I would imagine either download would do.

[jaydi]

And make sure you put in the final curly bracket of course which I accidentally deleted when removing extraneous code.

[Marc985]

Hey so I put the latest csshover.htc on the server added the IF ie and I'm still getting double spacing in internet explorer...this is driving me nuts!!!

if you go to esailingyachts dot com and look at /test.html you'll see exact what I mean and you can see the code maybe you can pick up something I'm doing wrong.

[jaydi]

I never got that problem for some reason, though in the tanfa tutorial he talks about resolving white space issue in IE between the list items. This is his code for the conditional css:

<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->

I think that height 1% could be what is needed.

[Marc985]

Didn't Solve it

[jaydi]

Try setting defaults on all margins and padding to zero in your style sheet, like so:

* {
margin: 0;
padding: 0;
}

and see if that has any effect. I always put this at the top of all my stylesheets to get rid of the various default settings browsers impose, that way I'm working in a level playing field and can then add any padding I need to the relevant styles.

Could be why I didn't get a problem when I did it.

[Marc985]

I putt hat at the top and it did nothing...tired putting it into every navigation style as well still double spaces in ie...

oh well...

[jaydi]

I downloaded your code and got it working by adding some of the original code back in, only done it roughly.

Have it on lakeland-webdesign as test_e.html

Can you pick up the changes?

#navbar li ul and down

[Marc985]

I got it working Now I have one last question...The font in the pull down portion is a tad bit larger than in the main menu...which section exactly controls the font size in the pull down under the models section?

#navbar {
margin: 0;
padding: 0;
height: 1em; }

#navbar li {
list-style: none;
float: right;
margin: 0;
padding: 0; }

#navbar li a {
display: block;
padding: 3px 8px;
background-color: #0C1F35;
color: #FFF;
text-decoration: none;
font-weight: bold; }

#navbar li ul {
position: absolute;
left: -999em;
height: auto;
margin: 0;
width: 10em; /* Width to help Opera out */}

#navbar li li a {
padding: 2px 8px;}

#navbar li li {
padding-right: 1em;
width: 90%; }

#navbar li ul a {
width: 17em;
width: 11em;
text-align:left;
border-right:none;
font-size:90%;}
#navbar li:hover ul ul, #navbar li:hover ul ul ul {
left: -999em;}

#navbar li:hover ul, #navbar li li:hover ul, #navbar li li li:hover ul {
left: auto;}

#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }

#navbar li:hover li, #navbar li.hover li {
float: none; }

#navbar li:hover li a, #navbar li.hover li a {
background-color: #0C1F35;
color: #FFFFFF; }

#navbar li li a:hover {
background-color: #0C1F35;
color: #335B86;}

#navbar li a:hover {
background-color: #0C1F35;
color: #335B86;}

Thanks so much!

[jaydi]

Sorry was off the computer for a few days.

#navbar li ul {
position: absolute;
left: -999em;
height: auto;
font-size: 80%;
margin: 0;
width: 10em; /* Width to help Opera out */
}

works for me though you never can tell. Try it and if it doesn't work you can always trying adding !important to it.

Have fun!