Multiple Horizontal Lists - IE help

[jeff6605]

I am having trouble making this look right in IE. There must be a better way to set it up or use a better CSS rule or something. Can someone help me.

If you view it in Firefox, that is what it is supposed to look like. Then in IE, it shifts the lists over to the right side if the div. Can find the page here (http://www.landisdesign.com/testindex.html).

I am using this html for the lists and want to line them up horizontally:

<ul id="leftmenu">
<strong>Print Design </strong>
<li>Logos</li>
<li>Advertising</li>
<li>Layout</li>
<li>Newsletters</li>
<li>Mailpieces</li>
</ul>

<ul id="leftmenu">
<strong>Web Design </strong>
<li>Development</li>
<li>Consulting</li>
<li>Content Edit</li>
<li>Re-design</li>
<li>SEO</li>
</ul>

<ul id="leftmenu">
<strong>Tech Solutions </strong>
<li>Network Administration</li>
<li>Hardware Support</li>
<li>Software Support</li>
<li>Security Evaluation</li>
</ul>

This is the two CSS tags associated with it.

#leftmenu {
font-family: Arial, Helvetica, sans-serif;
color: #C9C2B9;
display: block;
float: left;
clear: inherit;
}
#leftmenu li {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #C9C2B9;
display: list-item;
clear: inherit;
list-style-type: inherit;
list-style-position: inside;
}

[WebJoel]

These are multiple vertical lists, aligned horizontally. :)

A few things:
ul id="leftmenu">
<strong>Print Design </strong>

<li>Logos</li>
<li>Advertising</li>
<li>Layout</li>
<li>Newsletters</li>
<li>Mailpieces</li>
</ul>

<ul id="leftmenu">

<strong>Web Design </strong>
<li>Development</li>
<li>Consulting</li>
<li>Content Edit</li>
<li>Re-design</li>
<li>SEO</li>

</ul>

<ul id="leftmenu">
<strong>Tech Solutions </strong>
<li>Network Administration</li>
<li>Hardware Support</li>
<li>Software Support</li>
<li>Security Evaluation</li>

</ul>

<!--Third section on left side--> An "id" can only be used once on any single page. Make this a "class" if you intend to re-use it for multiple lists.

Nothing except an "<li></li>" can reside inside a "<ul></ul>". The "<strong></strong>" will not validate.
You could however, do this:<li><strong>your text</strong></li>
And a html comment should have a white-space after the "<!-- " and before the " -->"
"<!-- comment -->", not
"<!--comment-->"

I worked on a page that Firefox had some weird issues with this, regarding non white-spaced !comment tags. (Text of the latter was invisible unless you did mouse-down-and-drag to highlight... the <!--comment--> text could be seen...)

What I would do here for the <ul>s, is give each of them a width:33% or a bit less (assuming that the parent container has a width, this should work).
These three should then bump around and fill-up the available space.

The alternative would be another non-semantic container for the 3 <ul>s, and give it margin:foo auto; (centering it within the parent element, assuming that parent has width and document has valid !doctype).

There are several ways to acheive this. :)

[jeff6605]

Ok, I have revised the HTML and CSS, and re-upped the files. I am still having a problem with IE pushing it to the right. Thank you for the help so far, any other ideas. I also changed the comment strings as well.

Jeff

HTML:

<ul class="leftmenu">
<li>Logos</li>
<li>Advertising</li>
<li>Layout</li>
<li>Newsletters</li>
<li>Mailpieces</li>
</ul>

<ul class="leftmenu">
<li>Development</li>
<li>Consulting</li>
<li>Content Edit</li>
<li>Re-design</li>
<li>SEO</li>
</ul>

<ul class="leftmenu">
<li>Network Administration</li>
<li>Hardware Support</li>
<li>Software Support</li>
<li>Security Evaluation</li>
</ul>

CSS:

.leftmenu {
font-family: Arial, Helvetica, sans-serif;
color: #C9C2B9;
display: block;
float: left;
clear: inherit;
width: inherit;
}
.leftmenu li {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #C9C2B9;
display: list-item;
clear: inherit;
list-style-type: inherit;
list-style-position: inside;
}

[WebJoel]

I had a kick at this again this afternoon during lunchbreak, -sort of came up with something that works nicely for IE6 and Fx 2.x.

The 'container' (I'll BOLD it) can be a bit wider and the three ULs will expand nicely to fill-in the width. Much narrower than this though, the third UL will 'wrap' below.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

html, body {min-height:100%; height:101%; font-size:100.1%;
padding-bottom:25px; /* IE does not understand "margin-bottom" on BODY, so this */
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */}
html>body {font-size:small; height:auto;}/* Assist IE6 and earlier, 100% height */
font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size:0; font-size:1.0em; line-height:1.0em; margin:16px 0 12px 0;}

h1, h2, h3, h4, h5, h6 {font-size:0; font-family: 'times new roman', arial, verdana, helvetica, sans-serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}
h1 {font-size: 1.5em;}
h2 {font-size: 1.4em;}
h3 {font-size: 1.3em;}
h4 {font-size: 1.2em;}
h5 {font-size: 1.1em;}
h6 {font-size: 1.0em;}
</style>

<style>
#navigation {width:100%; margin:0 auto; }

#navigation ul {font-family: Arial, Helvetica, sans-serif; font-size: 12px;
color: #C9C2B9; background-color:#fff; width:670px; float:left; width:33%;}

#navigation h3 {text-align:center; display:block; margin:-3px 0 0 -35px;
height:1.6em; padding:10px 0 3px 0; background-color:#ececec;}

#navigation li {line-height:1.5em; list-style-type: none;
padding:3px 0 0 35px; height:26px; border:1px solid gray;display:block;}

#navigation li a {color: #C9C2B9; white-space:nowrap; line-height:1.4em; display:inline; text-decoration:none;}

#navigation li a:hover {color:#000; background-color:none; letter-spacing:0.1em; text-decoration:underline; margin-left:-8px;}
</style>

</head>
<body>

<div style="width:560px; padding:10px 4px 10px 4px; border:1px solid gray; margin:20px; background-color:#ebf4ea; overflow:hidden;"><!-- 'content wrapper' -->

<div id="navigation"><!-- 'navigation wrapper' -->
<ul style="width:31%;">
<li><h3 title="">1rst Column</h3></li>
<li><a href="#">Logos</a></li>
<li><a href="#">Advertising</a></li>
<li><a href="#">Layout</a></li>
<li><a href="#">Newsletters</a></li>
<li><a href="#">Mailpieces</a></li>
</ul>

<ul style="width:32%;">
<li><h3 title="">2nd Column</h3></li>
<li><a href="#">Development</a></li>
<li><a href="#">Consulting</a></li>
<li><a href="#">Content Edit</a></li>
<li><a href="#">Re-design</a></li>
<li><a href="#">SEO</a></li>
</ul>

<ul style="width:37%;">
<li><h3 title="">3rd Column</h3></li>
<li><a href="#">Network Administration</a></li>
<li><a href="#">Hardware Support</a></li>
<li><a href="#">Software Support</a></li>
<li><a href="#">Security Evaluation</a></li>
<li></li>
</ul>

</div><!-- end 'navigation wrapper' -->

</div><!-- end 'content wrapper' -->

</body>
</html> The bold is a non-semantic 'wrapper' but it does solve some problems, and would still be valid to use.
The "overflow:hidden;" on the 'wrapper' allows the container border to wrap-around the three ULs. Being that each is 'float:left;" ("horizontal"), they require this to make the container hold them.

[jeff6605]

Thank you...Looks very promising. I will put this code into my design and post the results.

[jeff6605]

Ok, WebJoel. I modified your markup to fit into my containers and to carry out the look I wanted. I have it looking great in Firefox again. I really liked the approach. Yet again, IE is displaying it incorrectly. Could you look at the source when time permits and see what I did wrong. The major edits were to the percentage widths and padding styles. Maybe I missed something.

You can find the new file here (http://www.landisdesign.com/testindex2.html).

[Kravvitz]

1) Many elements have default padding and/or margins and browsers differ on their defaults for these.
I recommend that you read No Margin For Error (http://www.search-this.com/2007/03/12/no-margin-for-error/) and Starting with CSS: revisited (http://kurafire.net/log/archive/2005/07/26/starting-css-revisited).

2) I should mention that really, that should be marked up like this:
<div id="listwrapper">
<ul id="navigation">
<li style="width:20%;">
<h3 title="">Print Design</h3>
<ul>
<li>Logos</li>
<li>Advertising</li>
<li>Layout</li>
<li>Newsletters</li>
<li>Mailpieces</li>
</ul></li>

<li style="width:25%;">
<h3 title="">Web Design</h3>
<ul>
<li>Development</li>
<li>Consulting</li>
<li>Content Edit</li>
<li>Re-design</li>
<li>SEO</li>
</ul></li>

<li style="width:27%;">
<h3 title="">Tech Solutions</h3>
<ul>
<li>Network Administration</li>

<li>Hardware Support</li>
<li>Software Support</li>
<li>Security Evaluation</li>
<li></li>
</ul></li>
</ul>
</div><!-- end 'navigation wrapper' -->
here's the style to go with it:
#navigation,#navigation ul {
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #C9C2B9;
background-color:#3c3f44;
}
#navigation li {
float: left;
margin-left: 30px;
}
#navigation ul {
float:left;
width: auto;
margin-top: 0;
}

#navigation h3 {
text-align:left;
margin-bottom: 0;
}

#navigation ul li {
line-height:1.3em;
padding:3px 0 0 20px;
margin: 0;
clear: both;
white-space: nowrap;
}

[WebJoel]

....
<div id=listwrapper<!-- 'content wrapper' -->

<div id="navigation"><!-- 'navigation wrapper' -->

<ul style="width:20%;">
<li><h3 title="">Print Design</h3></li>
<li>Logos</li>
<li>Advertising</li>
<li>Layout</li>
<li>Newsletters</li>
<li>Mailpieces</li>
</ul>.... Was this my err or yours? (Missing " > " for DIV)

The #navigation is a 'wrapper' and if you give it a default width, and it fits into the content wrapper, it should not cause the third UL to 'drop'. Not sure what is happening here...

[Kravvitz]

I think it's Jeff's error since the code you posted didn't have it.

It didn't seem to be the cause of the float drop though. It seemed to be caused by the wider default left margin of the <ul>s in IE. The code I posted should resolve the issues.

[jeff6605]

Thanks for the updated code. It seems to work well not and have learned a lot from both of your examples. I have updated my source. Please check it out here (http://www.landisdesign.com/testindex2.html).

It seems to be loading great in IE and Firefox. However when I validate I am getting an error on the <li style="width:26%;">. Is says that this element is not allowed in this context. Is this correct...it appears on all three lists. The W3C validation link is on the page.

Thank you!

[Kravvitz]

You're welcome :)

Change #navigation back to a <ul>. I rewrote it like that because it's a list with 3 items, each containing sub-items.

<li>s may only be direct children on <ul>s and <ol>s.

I suggest you learn how semantics apply to X/HTML. (http://www.dynamicsitesolutions.com/html/semantic-markup/) Semantics is really a very important subject when it comes to X/HTML.

[jeff6605]

Could you please explain. I do not see what you mean about changing the #navigation back to a <ul>. #navigation is a DIV and the <ul> is markup for the list.

Exactly what do I change? Thanks

[Kravvitz]

In the code I posted #navigation is a <ul>. I changed it to that because that's what it semantically should be.

Look at the code I posted again.

[jeff6605]

I think the code is fine in which I have it. All I am trying to say is that the W3C validator is having problem with this line, in all three ul trees...

From W3C Validator:
Line 50, Column 22: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag.

<li style="width:26%;"

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

From HTML:
<div id="listwrapper"><!-- 'content wrapper' -->
<div id="navigation"><!-- 'navigation wrapper' -->

<li style="width:26%;">
<h3 title="">Print Design</h3>
<ul>
<li>Logos</li>
<li>Advertising</li>
<li>Layout</li>
<li>Newsletters</li>
<li>Mailpieces</li>
</ul></li>

<li style="width:24%;">
<h3 title="">Web Design</h3>
<ul>
<li>Development</li>
<li>Consulting</li>
<li>Content Edit</li>
<li>Re-design</li>
<li>SEO</li>
</ul></li>

<li style="width:25%;">
<h3 title="">Tech Solutions</h3>
<ul>
<li>Network Administration</li>
<li>Hardware Support</li>
<li>Software Support</li>
<li>Security Evaluation</li>
<li></li>
</ul></li>

</div><!-- end 'navigation wrapper' -->

</div><!-- end 'content wrapper' -->

Is the,
<li style="width:25%;"> correctly positioned inside the list structure? On this page (http://www.landisdesign.com/testindex2.html), I have a link to the validation screen. If what you are saying is going to fix my problem could you paste my full code and bold the line in which I should change back.

[Kravvitz]

Read my last two replies again. The validator's error message explains the problem too. If you don't understand what I've explained to you twice, then I can't help you here.

By the way, the text in the sidebar will be difficult to read by many partially visually impaired people due to its low contrast to the background color. Check out http://www.autisticcuckoo.net/tools/web/colours-contrast.php

[WebJoel]

Maybe this will help if you could see the 'borders' (bright green) of the three <UL>s... You needs to tighten-up the widths a little bit, and/or get a better control over the font-sizes of the ULs and the Header text in the first <li>. Cross-browser differences in font-sizes, margins & padding could be what is causing the thrid UL to overflow and 'drop'.
To that end, it is what the 'wrapper' for the did in my example.

I would for instance, make the header text width:auto; and at least that will not be the reason the total width is overflowing. If the ULs had a percentage width as in my example, again, it becomes 'fluid'.

[jeff6605]

Hey, Sorry, did not want to come off as ignorant. I was just trying to find it, but the changes I was making lead me into a dead end. But, I did finally find it as it was looking me in the face the whole time I made the appropriate changes. Thank you to both of you for working me through it.

Final edits can be found here (http://www.landisdesign.com/index.html).

Thanks!

[jeff6605]

Resolved

[WebJoel]

Excellent! :D