Discuss: CSS Design: Taming Lists
by Mark Newhouse
- Editorial Comments
92 re: Mozilla 1.2a rendering
Mozilla consistently has 1px rounding errors, as noted by Big John above. His page describes the problem well, the same thing can happen horizontally, as can be seen at http://www.meyerweb.com/eric/css/edge/boxpunch/demo.html (look for the punchout on the right, the black border sticks out 1px) and on my defunct mozilla news page at http://grayrest.com/moz when the browser width is about 1024, changing the width causes this to fluctuate so if you don’t see it try changing the width of your browser.
posted at 02:31 pm on October 28, 2002 by grayrest
93 Re: Real World but Verticle
to the person who mentioned he had trouble getting list to be 14%:
i have made a list which i use for vertical navigation. the list resides in a sidebar that is 20% of the body. here is my CSS for my list:
ul.menu {
width: 90%;
list-style: none;
margin: 0px auto 0px auto;
padding: 0px;
border: none;
text-align: center;
}
ul.menu li {
text-align: left;
margin-bottom: 2px;
}
ul.menu li a {
display: block;
padding: 0px 0px 0px 1.5em;
margin: 0px;
border-left: 2px solid;
border-right: 2px solid;
width: 100%;
}
ul.menu li>a {
width: auto;
}
posted at 06:21 pm on October 30, 2002 by MyDimension
94 Inline List Question
Ok, first, I’m really liking the list+css combo for nav. However, I am having issues with inline lists. The one that is really bugging me is that there is a space between the list items that I cannot seem to get rid of when the list is inline.
For instance, I have a list I’ve set to inline with each item having a border. There is a space between each item, outside of the border, of a couple of pixels. Is there a standard work around for this that anyone knows of?
posted at 11:19 pm on October 30, 2002 by John Keller
95 list-style-image alignment
Love the article.
When supplying a custom image for the bullet via list-style-image or list style, is it possible to set the vertical alignment of that bullet?
Currently, the custom bullet bottom is aligned with the middle of the LI text. I would like to get them both valign=bottom.
Thanks,
-=Chris
posted at 01:31 pm on October 31, 2002 by Chris
96 Hoorah! Nested dynamic lists
Hooray!
Dave Lindquist solves the problem (see my post a couple above) very neatly, validly and accessible at http://www.gazingus.org/dhtml/?id=109
(and again) Hooray!
posted at 09:01 am on November 1, 2002 by Simon
99 Re: Nested lists
The nested list is logically a part of the first list item of the containing list. So the code you want is:
<ul>
<li><h2>Main Administration</h2>
<ul>
<li>[url=“about:blank” target=”_blank”]Summary Page[/url]</li>
<li>[url=“about:blank” target=”_blank”]Change Main Password[/url]</li>
<li>[url=“about:blank” target=”_blank”]Change MySQL Password[/url]</li>
<li>[url=“about:blank” target=”_blank”]Log Out[/url]</li>
</ul>
</li>
</ul>
posted at 05:54 am on November 12, 2002 by Martin
100 Design flaw
I think the design is very smart, but has just one flaw.
We all have to write pages that look good in:
a. browsers without css support (e.g. ipaq)
b. browsers without javascript turned on (e.g. security bugs)
c. browsers without proper dom2 support (e.g. netscape 4.x)
d. browsers that support everything
(For example, http://www.alforto.com, will display correct on all browsers.)
Well, this design brakes on browsers with javascript turned off. <li> elements can not be accessed because they are hidden in the css and there is no way to make these elements display.
Oke, change .menu{ display: hidden into block and problem disappears. But now script is not working right the first time.
A related problem is that an <ul> has no meaning with javascript, but without it has. It will try to load a html page.
Has anybody a hint how to solve this problems?
Arjen
posted at 07:23 am on November 17, 2002 by Arjen Meijer
Discussion Closed
New comments are not being accepted, but you are welcome to explore what people said before we closed the door.
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)






91 testing...
testing… 1 2 3 4 5 6
posted at 12:30 pm on October 26, 2002 by MacOpera 6 Beta Tester