IE V8 problem: a list item's bullet appears at the End instead of at the start

HTML & CSS
1

Hi,
I am trying to define a <li> list item, within an <ul> unordered list, that has 3 “columns” in it. Each “column”, within the <li> list item, is defined in a <p> paragraph.
Each “column” has the same width, and the height of the “column” is dynamic e.g. it grows with the content.

The purpose is to achieve a simple 3 column layout that can be reused in each section that is marked as <div class=“referentie”>, and
this without using html-tables and not applying extra classes to these html objects.

The result is working nicely on Firefox V3.6 and the list item’s square is at the start of the item.

=> Unfortunately, in Internet Explorer V8 the same list item’s square or bullet is now appearing at the end instead of at the front of the list item.

Who can advise me on fixing this?

This is the (correct and expected ) result on Firefox v3.6.12:

This is the result on Internet Explorer V8:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>CSS tabular format - based on li and p</title>
    <style type="text/css">
        p {
            margin-top:0;
        }
        .clear {
            clear:both;
            }
        .referentie
        {
            border-color: #555555 #222222 #222222 #444444;
            border-style: solid;
            border-width: 1px;
            margin-bottom: 10px;
        }
        .referentie .inner
        {
            padding: 5px;
        }
        .referentie img
        {
            float: right;
            margin-bottom: 25px;
        }
        .referentie ul
        {
            list-style-type: square;
        }
        .referentie li
        {
            clear: both;
        }
        .referentie p
        {
            float: left;
            width: 275px;
            margin-bottom: 0.5em;
        }
    </style>
</head>
<body>
    <div class="referentie">
        <div class="inner">
            <img src="http://www.infozine.be/wp-custom/images/logo-exagoon.png" alt="Exagoon via" />
            <h2>
                Exagoon</h2>
            <div class="clear">
            </div>
            <ul>
                <li><p>Brielen</p>
                    <p>Tisselt</p>
                    <p>Bepleistering, terrassen in tropisch hardhout , gevelbekleding</p>
                </li>
                <li><p>Brielen</p>
                    <p>Tisselt</p>
                    <p>Bepleistering, terrassen in tropisch hardhout , gevelbekleding</p>
                </li>
            </ul>
            <div class="clear">
            </div>
        </div>
    </div>
    <div class="referentie">
        <div class="inner">
            <img src="http://www.infozine.be/wp-custom/images/logo-exagoon.png" alt="Exagoon via" />
            <h2>
                Exagoon</h2>
            <div class="clear">
            </div>
            <ul>
                <li>
                    <p>Brielen</p>
                    <p>Tisselt</p>
                    <p>Bepleistering, terrassen in tropisch hardhout , gevelbekleding</p>
                </li>
                <li>
                    <p>Brielen</p>
                    <p>Tisselt</p>
                    <p>Bepleistering, terrassen in tropisch hardhout , gevelbekleding</p>
                </li>
            </ul>
            <div class="clear">
            </div>
        </div>
    </div>
</body>
</html>

Thanks!

2

Hi pantaluna, welcome to SitePoint! :slight_smile:

Also, congratulations on a very clearly laid out issue. (If only all questions were so clearly thought out and presented!)

The problem is caused by the <p>s being floated, it would seem, meaning that the bullets are wrapping around them. That’s how it appears, anyway.

In lieu of better advice, here’s something you could try: change float:left on the paragraphs to display:inline-block, and then add display:inline fixes for IE6 and 7 (if you care to):

.referentie p {
  [COLOR="Red"]display:inline-block;[/COLOR]
  width: 275px;
  margin-bottom: 0.5em;
}

[COLOR="Red"]*+html .referentie p { display:inline;}
* html .referentie p { display:inline;}[/COLOR]

You will need to readjust margins etc, but this should prove at least one possible solution.

3

IE7 is also aligning the bullets to the bottom of the longest text… only way I saw to fix that was to set vertical-align to “top” though then it’s a bit too high.

4

Thanks for the feedback!

I have abandoned the track to implement this using floats or inline-blocks because of too many unwanted side effects on primarily IE Vx, Chrome and Android Browser. I was able to fix a couple of issues regarding positioning and alignment of the blocks and its text, but after each change the thing didn’t work anymore on another (version) of a browser. I’m not in the business of losing too much time on this. The browser world is definitely not ready yet for this.:x

So I have implemented these tabular fixed-width listing that I was looking for using the good 'n old html tables; that is what they were created for in the 1st place, right?:slight_smile:

.referentie table {
	table-layout: fixed;
	border-collapse: collapse;
	margin-bottom: 1em;
	margin-top: 1em;
}
.referentie td, th {
	width: 250px;
	padding: 2px 10px;
}

Regards,
Paul.