Submenu and vertical spacing Options

[angiec22]

Hello,
I've got two wacky things going on that would love some assistance. Would anyone be willing to peak at my page http://www.naturalbeautysoaps.net/testfile...te3NAVtest.html and let me know why the spacing in my navigation bar looks as it should in Firefox and Netscape, yet is all spaced out in IE? Additionally in the browsers where the navagation displays properly, my graphics are overlapping my h2 title's in the product grid. Originally I had too much space there and wanted to tighten it up and I did that by using the margin tag - worked perfectly in IE, but not in the other two. The coding for my navigation is

#navigation ul {
margin: 0px;
list-style-type: none;
padding:0px;
}

#navigation li a:link, #navigation li a:visited {
display: block;
padding: 2px 2px 2px 6px;
color: white;
border: double 2pt #0c9;
background-color: #660099;
font-style: normal;
font-weight: bold;
font-size: 11pt;
line-height: 14px;
font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
}

#navigation li a:hover {
background-color: #aa97c8;
color: #660099}

#navigation ul ul {
margin-left: 4px;
list-style-type: none;
font-style: normal;
font-weight: bold;
font-size: 9pt;
line-height: 14pt;
font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
text-decoration: none;
letter-spacing: 0pt;
}

#navigation ul ul a:link, #navigation ul ul a:visited {
color: #660099
background: none;
}

#navigation li li a:link {
margin-left: 6px;
margin-bottom: 2px;
list-style-type: none;
font-style: normal;
font-weight: bold;
font-size: 9pt;
line-height: 12pt;
font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
text-decoration: none;
letter-spacing: 0pt;
border: none;
background: none;
color: #660099;
}

#navigation li li a:hover {
background-color: #aa97c8;
border-left: 7px solid #00cc99;
}

(I probably have some redundant unneccesary stuff in the ul ul and li li because I got confused which was which. I tried monkeying with the bottom margin in both, but neither seem to make a difference).

The titles...
h2 {font-size:13px; height:14px; color: #660099; align:center; margin: 2px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;}

Any assistance you can offer would be greatly appreciated!! Thanks, Angie

[Christian J]

Hello,
I've got two wacky things going on that would love some assistance. Would anyone be willing to peak at my page http://www.naturalbeautysoaps.net/testfile...te3NAVtest.html and let me know why the spacing in my navigation bar looks as it should in Firefox and Netscape, yet is all spaced out in IE?

That sounds like this IE bug: http://hem.fyristorg.com/g-force/test/IE6_...spacing_bug.htm

Additionally in the browsers where the navagation displays properly, my graphics are overlapping my h2 title's in the product grid.

CODE

    h2 {font-size:13px;    height:14px; color: #660099; align:center; margin: 2px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;}

The fixed height makes the H2 text spill out of the H2 in modern browsers, while IE6 incorrectly makes the H2 expand vertically. Also there's no "center" property, you probably want "text-align: center".

BTW here a semi-colon is missing:

CODE

    #navigation ul ul a:link, #navigation ul ul a:visited {
    color: #660099
    background: none;
    }

Also you shouldn't use the pt unit for screen media font sizes, it's meant for print media style sheets. Px is not a good choice either, percentages or nothing at all is the best. It's good practice to specify both color and background together, and end a list of fonts with a generic font like (in this case) "sans-serif". Finally there are some HTML errors: http://www.htmlhelp.com/cgi-bin/validate.c...te3NAVtest.html

[angiec22]

Thank you very much for your help - I'm making some progress in IE. I removed the line height and that solved my h2 issue and I changed some of the other things you've suggested. I'm going to wait to tackle the px and pt thing but thank you for letting me know what is preferred. I followed that link for the spacing bug and got it to look pretty good in IE. The purple boxes don't go to the edge like I wanted them to, but I can live with that if need be. However, the major problem is the nav. bar virtually vanished in Firefox and Netscape?? Do you know what I did wrong? Thank you! :-), angie
http://www.naturalbeautysoaps.net/testfile...te3NAVtest.html

[Christian J]

The purple boxes don't go to the edge like I wanted them to, but I can live with that if need be.

You could try making the links 1px wider. But you should avoid the px unit for a narrow column width like this, since longer link texts may easily spill out (in Firefox, not IE6). Use the em unit instead, then the column width will expand if the user increases font size.

However, the major problem is the nav. bar virtually vanished in Firefox and Netscape?? Do you know what I did wrong? Thank you! :-), angie
http://www.naturalbeautysoaps.net/testfile...te3NAVtest.html

It's probably the "display: inline-block", which Firefox doesn't support. Also you don't need to use all of the bugfixes listed on http://hem.fyristorg.com/g-force/test/IE6_...spacing_bug.htm probably "zoom: 100%" alone will do.

You may also want apply the zoom to the LI elements. When I experimented with this I got some kind of hover bug in IE6, causing varying spaces between links when you hover them. This seems to be fixed by LI zoom.