Forum Moderators: not2easy
the original code was based on 3 columns of equal height (maybe that's the trouble?) but I adapted it slightly for 2 columns.
HTML: <span> repeated for all items
<ul>
<li class="licol-1"><span>Item one</span></li>
<li class="licol-1">Item two</li>
<li class="licol-1">Item three</li>
<li class="licol-1">Item four</li>
<li class="licol-2 licol-first">Item five</li>
<li class="licol-2">Item six</li>
<li class="licol-2">Item seven</li>
<li class="licol-2">Item eight</li>
</ul>
}
#colTwoPerf li {
width:42%; /*even shrinking this doesn't seem to make a difference*/
margin:15px 0 0 0;
padding:0 15px 0 0;
line-height:15px;
position:relative; /* IE needs this in order to recognise links in all columns */
color: orange;
}
#colTwoPerf li span {
color:#666666;}
#colTwoPerf li.licol-1 {
margin-left:0px;
}
#colTwoPerf li.licol-2 {
margin-left:360px
}
#colTwoPerf li.licol-first {
margin-top:-285px;
}
#colTwoPerf li.licol-1a {
margin-left:0px;
}
#colTwoPerf li.licol-2a {
margin-left:360px
}
#colTwoPerf li.licol-first-a {
margin-top:-255px;
}
The request was for a 2-column list under the two headings that appear on the page. It's a good way of presenting the info, but if it never displays properly, are there any other options?
I'm on a pc, not a mac, and both winSafari and FF (supposedly the same cross-platform) refused to display your licol-2 list items in the provided code. Plus your reference to ie suggest ie5 for mac, which is quite different from the pc versions. That makes it makes it difficult to understand what you mean by descriptions such as "slightly off", etc.
There are many ways to do this, and after looking at a range of options based on your code, I think what is best will depend on:
# How long each of the lists are - how much effort and code you put into this
# How many of the list items will wrap, how many lines there will be -and whether you can change the order of the list items to work around that
# Whether you are prepared to accept stuctural mark-up
# what exactly is in the list - images, links, etc.
Some immediate thoughts on the code:
# The span appears to enable a colour change between bullet and text. If the real world text is links, colour the links, and avoid the span
# bullet alignment after wrapping in ie (pc} can be fixed by using
vertical-alignline-heightWork-arounds might be:
#Float the li and use • to simulate a bullet
#Float two <ul> side-by-side so there is no need to float the li.
#Use a definition list using the <dt> for headings and the <dd>'s for your list.
# Accept having to class more than one li and add in the additional heights for the ones that need to wrap and their "opposite" so the list will visually display with each list item appearing to start on the same "line"
The code suggests you are trying to "position" each of the <li>'s using margins. I'd suggest best to use conventional positioning techniques - perhaps post some real-world code?
This is a list of text - some items are single words and a couple are a few more, causing wrapping. The span colours the bullet and text differently. Large headings appear outside the list.
Thank you for those suggestions.. the tutorial I read also mentioned floating and its inherent problems! The margin technique finally worked in IE, but each line contained only one word, which may not suit the client.. also didn't quite display properly in FF in the end.
My next plan is to do a TABLE. Does this sound feasible?
My first attempt had the two list items all together in a single column each and they're still not lining up. I will try each list item getting its own cell - which should remedy the problem of when there isn't a corresponding item in the next column over.
Still want to have the bullets, but not sure how to do it: Can it be done with something like 'text-decoration: disc' (or whatever it actually should be) applied to the cells.. or would I do <ul><li> ITEM 1</ul></li> within each cell?
I'm concerned that in the event of wrapping, the bullets will align with the bottom line of text rather than the top.... I saw this happening in IE.
I really need to get this finished in 24 hrs, I don't care if the HTML is a mess!
Thanks.
My next plan is to do a TABLE. Does this sound feasible?
I will try each list item getting its own cell - which should remedy the problem of when there isn't a corresponding item in the next column over.Yes it will remedy the alignment problem, but you are no longer coding a list and create the issue you recognise in
Can it be done with something like 'text-decoration: disc'
Another option I trialled was the pseudo element
:beforecontent: ".":first-letterThat was the reason behind suggesting • - not ideal, but can be styled to look like a bullet for ie, but if combined with a pseudo element can be given display:none so it doesn't affect accessibility devices. However, that may require some structural mark-up.
I'm concerned that in the event of wrapping, the bullets will align with the bottom line of text rather than the top.... I saw this happening in IEAs stated in my first post, ie respects
vertical-alignThe margin technique finally worked in IE, but each line contained only one word, which may not suit the client.. also didn't quite display properly in FF in the end.The display discrepancy may be due to the way ie handles margins (and padding). Hence my suggestion to use proper positioning.
It would be easier if you would post some "almost working code", but I spent some time on this yesterday, so I'll dig through the examples and post some possible solutions shortly. No need for [too] messy html ;)
It could be further tidied but it is quite a bit of work to overcome the variations on :before. In the end the span - which was intended to be hidden with display:none and only used by ie, has been used for all because ff has too many difficulties with the pseudo elements (:first-letter, :first-line and :before) - which make this a breeze in winSafari. However, better than a table ;)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Title</title>
<style type="text/css">
ul {
width:550px;
}
li {
display:inline;
float:left;
width: 50%;
height:35px; /*dimension to accommodate tallest wrap */
font-size:14px; /* balance font-size and line-height with height of the li*/
line-height:16px;
border:1px solid blue;/*for testing */
border-style:solid none;
}
/*This could be first-letter, but ff refuses to play nice*/
li span {
float:left;
color: orange; /*gap to avoid triggering a smiley when posted */
margin-right:5px;
font-size:30px;
height:35px; /*same as height of li*/
border:1px solid red; /*for testing*/
}
</style>
</head>
<body>
<h2>My List</h2>
<ul>
<li><span>•</span>List Item</li>
<li><span>•</span>List Item that is long enough to wrap and wrap and wrap</li>
<li><span>•</span>List Item that is long enough to wrap and wrap and wrap</li>
<li><span>•</span>List Item</li>
<li><span>•</span>List Item</li>
<li><span>•</span>List Item that is long enough to wrap and wrap and wrap </li>
<li><span>•</span>Last List Item </li>
</ul>
</body>
</html>
Tested on [pc] ie6&7, Opera9.27&9.6, ff2&3, winSafari.
I reverted to just having my separate lists in a single row with 2 columns.
It works fine.. should have done it from the start and saved myself a lot of grief. One list doesn't quite balance out in FF, but we'll have to live with it.
What's so terrible about tables anyway?!
