Height of list block element?

[Katydid]

Let me start by saying I don't really get CSS...I just keep poking at it until I annoy it into doing what I want. The code below is courtesy of someone who knew what they were doing, but it has been poked at enough by me to not quite display right.

I have a CSS list-style navigation (two sections, main and tech) with the following code:

#ul-tablemain, #ul-tabletech {
width: 100%;
text-align: center;
margin: 0px;
padding: 0;
list-style-type: none;
clear:both;
}

#ul-tablemain li, #ul-tabletech li {
width: 100%;
border: 2px solid white;
border-left: none;
border-bottom: none;
text-align: center;
float: left;
}

#ul-tablemain li a {
background-color: #00688b;
font-size: 12px;
font-family: arial, sans-serif;
font-weight: bold;
color: white;
display: block;
line-height: 20px;
height: 25px;
}

#ul-tablemain a:link, #ul-tablemain a:visited, {
background-color: #00688b;
color: white;
font-weight: bold;
text-decoration: none;
}

#ul-tablemain a:hover, #ul-tabletech a:hover {
background-color: #003366;
color: white;
font-weight: bold;
text-decoration: underline;
}

#ul-tablemain li.bottom, #ul-tabletech li.bottom {
border-bottom: 2px solid white;
}


#ul-tabletech li a {
background-color: #666666;
font-size: 12px;
font-family: arial, sans-serif;
font-weight: bold;
color: white;
display: block;
line-height: 20px;
height: 25px;
}

#ul-tabletech a:link, #ul-table a:visited, {
background-color: #666666;
color: white;
font-weight: bold;
text-decoration: none;
}

#ul-tabletech li.header {
background-color: #999999;
}

In IE (which most of our customers use), the <li> blocks increase in height to accomodate two-line items. In Firefox, they don't; the block remains 25px high, and the second line of text just disappears "behind" whatever list item appears below it.

Any idea how to fix this? I tried making it say "min-height" instead of just "height" but that didn't help.

[g1smd]

That code looks way overcomplicated, and makes no use of the cascade - stuff that appears in every definition doesn't need to do so; it can be defined for the parent element.

I can't see any obvious answer without also seeing a shell of the HTML code that the CSS goes with.

[qwerty]

Posting a link to a page using this code would be helpful, but I can tell you that setting height won't do you any good. In CSS, elements are as tall as their contents (plus padding), and you can't force it to take a specific height without using some javascript that's way over my head.

[Katydid]

You can see it in use at www.specialtyguitars.com

I think I simplified it a little (I removed the duplicate color and font-weight items), but I'd be happy to make other changes to simplify it even more if it will still keep the same "rollover effect" functionality.

[Connie]

In IE (which most of our customers use), the <li> blocks increase in height to accomodate two-line items. In Firefox, they don't;
Katy I don't see any difference in the way IE and FireFox display the left navagation. Did you get the problem resolved, or do I not understand the problem?

[Katydid]

Connie, the problem is in menu items that take up more than one line. The second item down has the word "Effects" on a second line in smaller moniter widths. In FF, that word is hidden behind the menu item below it. Or maybe it's just me?

[qwerty]

I'm not seeing the problem you describe in FF, even when I increase the font size.

[Connie]

I'm not either. I compared them side by side in FireFox and IE.

I wonder if it has something to do with your screen resolution. Do you remember how my let menu is distorted with your screen resolution. Just a thought.

[srikanthsh]

I checked by switching to 800x600 resolution. but, I see no prob.

[Connie]

I believe she use a 1280 x 1024. She put up a page with screen shots to show how my left menu was distorted and it was. However it displays fine with 1024 x 1280 and an 800 x 600.

Since non of the rest of us are seeing the same problem she does itswhy I thought it might have something to do with her screen resolution.

[Katydid]

Good memory, Connie! I have a 1280x1024 monitor at work, but I was actually viewing it last night on a 1024x768 monitor.

However, you are all right, and it seems to be working fine again. I uploaded a modified version of it this morning (moved some of the code into the parent elements as suggested), so maybe something in the old one was screwed up.

I'm still interested in any suggestions for simplifying it, though. I'm working on trying to do a "pop out to the side with sub pages" menu with it, and I'm having a little trouble getting it to display where I want it to in IE because I can't seem to apply the classes I need properly. I think if I could simplify the CSS for the current menu I could figure out how and where to do that.

[qwerty]

If that's what you're looking for have a peek at this vertical css menu with popout and dropdown menus (http://www.seoconsultants.com/css/menus/vertical/). I use a modified version of it on the site in my profile.

[Connie]

Good memory, Connie!
Just lucky. By pop out do you mean a slide out menu, so when you do a mouse over the main menu link a sub-menu slides out?

If so I think you will need some javascript for that to work with IE. I have one that works fine with IE and FireFox but breaks down with Netscape and Opera so I have never used it.

[qwerty]

See my post above -- no javascript, although there is an .htc file, whatever that is.

[Connie]

Bob you got your post in while I was typing.

From the head section on the one page I use this on.

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

Yours is different. From the head section on your site.

<!--[if IE]>
<style TYPE="text/css" MEDIA="screen">
body {behavior:url(/script/csshover.htc);}
#menu a, #menu h2{
font: bold 0.9em/1.4em arial,helvetica,sans-serif;
}
#menu ul li{float:left;height:1%;}
#menu ul li a{height:1%;}
</style>
<![endif]-->

Regardless of what the scrip textension is named it takes a script for a slide out menu to work with IE.

Your"if" script is probably better becaue it seems to me it would take care of that percentage of people who have javascript turned off.

My PC is in the shop so I can only look at your site with IE and FireFox. Have you tested with Opera or Netscape?

[qwerty]

Mine works in Opera and NS 7. If you mean NS4, I don't bother testing in that browser anymore. My site is all CSS2, so there's no way it would work in NS4.

[Connie]

Opera and NS7 are what I'm referring to. Thanks for the info. :cheers:

[Katydid]

The one I'm using has a javascript component. You can see the problem I'm having with the positioning on this page (I've only done the second menu item down so far):

www.specialtyguitars.com/test/test.html

In IE, the popout menu doesn't line up with the top of the main item.

Thanks for the link, qwerty, I'll definitely take a look at that one and see if I can get it to work better.

[Katydid]

I changed over to using a menu like the one in the link that qwerty posted, and it's working nicely except that in IE my regular "part of the content" lists don't appear bulleted any more. I even tried making them their own class, and specifying list-style: disc; but that didn't help. Any suggestions? You can see the page at the test link I posted above.

[qwerty]

Can you give us a link to a page that uses a normal bulleted list?

[Katydid]

This is a regular page: www.specialtyguitars.com/kits/wiringkits.html

This page also uses the "original" css as opposed to the one on the test page. I hope that was what you meant.

[qwerty]

No, I need to see a page where the CSS that controls the look of the menu causes a normal bulleted list to get messed up. That's the problem you described, isn't it?

[Katydid]

Oh, duh. There is a two item list on the test link I posted:

www.specialtyguitars.com/test/test.html

It's the text at the bottom that says something like "This is a list. This is the second item on the list." The bullets display properly in FF, but not in IE.

Edit: I added the list style right to the HTML and it works. Is that because it's getting that style instruction after all of the navigation bar stuff is already processed? Is there a neater way to do this?

[qwerty]

What version of IE are you running, on what platform? I have IE6 on Win XP pro, and it looks fine to me, as it does on FF.

[Katydid]

See my post edit above. You're too fast for me, and I thought I could sneak that in there ;)

[qwerty]

I think part of the problem is that you're not placing the menu links in a div with the id of "menu". That's what the CSS says.

Another part of the problem is that because you're not doing that, you're not using the CSS to specifically state that it's only lists in that div that are to have that particular list style, and I think that's why you need to define the style within the HTML for the "normal" list.

[qwerty]

Another problem: the page is laid out in a table, and I don't know of a way to use the <div id="menu"> when it's in a table, unless you create a nested table within the div that will contain the entire menu.

And I hate nested tables.

[Katydid]

The menu is in a <div id="menu">. For some reason the code isn't lined up with the rest of the menu when you do a view source, but it's there.

However, you're saying a div doesn't work in a table? I've been working really hard at getting rid of as many of our nested tables as possible (the site was originally built with a sitebuilder program and it had nested tables in its nested tables) but I'm not knowledgeable enough about CSS to completely get rid of my tables, and I've seen enough CSS-designed sites display poorly on various sized monitors to be a little leary of going that way completely.

[qwerty]

Oops. You're right. Ignore that :)

But now I'm seeing some errors in your style sheet:
Lose the comma in
#menu, {
width: 100%;
}
Remove every instance of "div" in
div#menu ul ul,
div#menu ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul
{display: block;}
And you have
ul.reg {
margin: 3px;
list-style: disc;
}
You could either make that the formatting for just ul, or you could change
<ul style="list-style-type: disc; list-style-image: none; list-style-position: outside;">
<li>This is a list.</li>
<li>This is the second item on the list.</li>
</ul> to <ul class="reg">
<li>This is a list.</li>
<li>This is the second item on the list.</li>
</ul>

[Katydid]

Corrections made, thank you.

The ul.reg was created in an attempt to apply a class to my "regular" lists, but it doesn't work. The only thing that has worked so far is to apply the list-style right to the HTML in the page.

I really appreciate your taking the time to help me with this, by the way.

[srikanthsh]

If you guys are discussing about bullets which are not appearing, in IE, in the following screen - http://www.specialtyguitars.com/test/test.html, It is due to margin property on UL. Try by increasing the margin-left property value.



you could use something like - margin: 0 0 0 15px;

[Katydid]

How right you are! Thanks to everyone who helped me with this. :D

[Katydid]

FYI, it doesn't work in IE 5.5.

[Connie]

Originally posted by Katydid
FYI, it doesn't work in IE 5.5.
Check you logs. What percentage of users are using IE5.5?

That should tell you whether you want to find an additional workaround. I think for every CSS problem there is a workaround. You have to decide whether it is worth it or not.

[Katydid]

It's only about 3% of our traffic, so not a huge deal. We currently are using a category page with links to each item on the popout, so my "workaround" will simply be to keep that page active for IE 5.5 users.