Member Avatar for MidiMagic

I copied this from another thread because it became buried. So far, all I got were kludges that changed other parts of the page to fix the problem.

Divs don't always work exactly the way you want them to, especially when they are inside other layout tags. I gave up after SIX hours of trying to get a simple three-column set of divs
to line up correctly inside a pair of li tags. It always either dropped one div to a lower area, or took some of the text below the ending li tag and put it on the right of the three divs, or failed to display correctly on one browser while working on the others.

Here is code that fails. Somebody please tell me why. You will note that the set of divs inside the li pair fails, but the ones down below the ul pair work correctly. And IE messes it up differently than FF does. The ONLY difference between the two is that one set is inside the ul list's li pair.

And giving up the bulleted list is NOT an option. The rest of the real page looks stupid without the bullets.

<html>
<head>
<style>

.x3col {float: left; margin: none; border: none; padding: none; width: 33%;}

</style>
</head>
<body>

<ul>
  <li>
    <p>Here is the list:</p>
    <div class="x3col">
      <ol>
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ol>
    </div>
    <div class="x3col">
      <ol>
        <li>four</li>
        <li>five</li>
        <li>six</li>
        <li>seven</li>
      </ol>
    </div>
    <div class="x3col">
      <ol>
        <li>eight</li>
        <li>nine</li>
        <li>ten</li>
        <li>eleven</li>
      </ol>
    </div>
  </li>
  <li>Here's the end of the list</li>
</ul>
<p>Here is the next line</p>
<p>And down here, it works.</p>
<div class="x3col">
  <ol>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ol>
</div>
<div class="x3col">
  <ol>
    <li>four</li>
    <li>five</li>
    <li>six</li>
    <li>seven</li>
  </ol>
</div>
<div class="x3col">
  <ol>
    <li>eight</li>
    <li>nine</li>
    <li>ten</li>
    <li>eleven</li>
  </ol>
</div>
<p>Here is the next line</p>
</body>
</html>
  • 2 Contributors
  • 7 Replies
  • 111 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by MidiMagic
Member Avatar for FC Jamison

That right there is just a real pain in the kiester!
Here is the solution I came up with:

<html>
  <head>
    <style>
      ol { 
        float: left; 
        margin: 0; 
        border: 0; 
        padding: 0; 
        width: 30%;
        list-style-position:inside;
      }
    </style>
  </head>
	
  <body>
    <ul>
      <li>Here is list 1:<br />
        <ol>
          <li>one</li>
          <li>two</li>
          <li>three</li>
        </ol>
        <ol>
          <li>four</li>
          <li>five</li>
          <li>six</li>
          <li>seven</li>
        </ol>
        <ol>
          <li>eight</li>
          <li>nine</li>
          <li>ten</li>
          <li>eleven</li>
        </ol>
      </li> 
    </ul>
    <P>&nbsp;</P>
    <P>&nbsp;</P>
    <ul>
    	<li>Here is list 2:<br />
        <ol>
          <li>one</li>
          <li>two</li>
          <li>three</li>
        </ol>
        <ol>
          <li>four</li>
          <li>five</li>
          <li>six</li>
          <li>seven</li>
        </ol>
        <ol style="float: left; margin: 0;">
          <li>eight</li>
          <li>nine</li>
          <li>ten</li>
          <li>eleven</li>
        </ol>
      </li> 
    </ul>
  </body>
</html>

I tested this in IE7, FF2, NN9, Opera 9.22, and AOL1.5. You can also use the XHTML DOCTYPE.

Member Avatar for MidiMagic

You can't do that. You changed the contents of the lists of items so it works. But if I fix it for the original display I want, it falls apart again.

In the example, ALL of the text I put in must be displayed in the correct place, not just the numbers one through eleven.

The first group of columns is inisde a list. The second group is NOT in the external list. You put both inside lists.

You conveniently removed the parts which display in the wrong place. That's cheating.
They are:

* Here's the end of the list

Here is the next line

And down here, it works.

You remind me of the college student who passed a test by changing the questions on an online test, or the use of lime to "remove" PCBs from soil (it poisoned the test for PCB).

I have a really good reason for wanting it displayed correctly in its original form. It should look something like this (except for column widths, and the asterix replacing the bullets):

* Here is the list
      1. one        1. four       1. eight
      2. two        2. five       2. nine
      3. three      3. six        3. ten
                    4. seven      4. eleven
  * Here's the end of the list

Here is the next line

And down here, it works.

  1. one        1. four       1. eight
  2. two        2. five       2. nine
  3. three      3. six        3. ten
                4. seven      4. eleven

Here is the next line
Member Avatar for MidiMagic

The fact that nobody can make this work without using tables shows that table removal is not yet totally feasible.

Member Avatar for FC Jamison

There's no reason to get your panties all in a wad and be rude about it.

Some things simply won't work in all browsers, so you have to get creative in making the page look like you want it to.

If you actually looked at the code and played with it a little, you might see that it's really not so hard to get the page to look like you want it to:

<html>
  <head>
    <style>
      ol { 
        float: left; 
        margin: 0; 
        border: 0; 
        padding: 0; 
        width: 30%;
        list-style-position:inside;
      }
      .x3col {
        float: left; 
        margin: 0; 
        border: 0; 
        padding: 0; 
        width: 33%;
      }
    </style>
  </head>
	
  <body>
    <ul>
      <li>Here is list 1:<br />
        <ol>
          <li>one</li>
          <li>two</li>
          <li>three</li>
        </ol>
        <ol>
          <li>four</li>
          <li>five</li>
          <li>six</li>
          <li>seven</li>
        </ol>
        <ol>
          <li>eight</li>
          <li>nine</li>
          <li>ten</li>
          <li>eleven</li>
        </ol>
      </li> 
    </ul>
    <P>&nbsp;</P>
    <br />
    <ul>
      <li>Here's the end of the list</li>
    </ul>
    <p>Here is the next line</p>
    <p>And down here, it works.</p>
    <div class="x3col">
      <ol>
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ol>
    </div>
    <div class="x3col">
      <ol>
        <li>four</li>
        <li>five</li>
        <li>six</li>
        <li>seven</li>
      </ol>
    </div>
    <div class="x3col">
      <ol>
        <li>eight</li>
        <li>nine</li>
        <li>ten</li>
        <li>eleven</li>
      </ol>
    </div>
    <p>Here is the next line</p>
  </body>
</html>
Member Avatar for MidiMagic

I wasn't trying to be rude. I was merely listing facts. You have to watch what you infer from text. I think extremely logically.

You are still changing the rules in the middle of the game.

It does work, but it is still a kludge.

The outside list needs to be a single complete list.

In the actual application, the outside list is a much larger list, and it is now ordered. It can't be broken apart like that, because setting the start point is deprecated.

I said no inside list style position. It still looks stupid in the prototype.

When converted to xhtml, the code won't validate because of a misplaced br tag. When I remove the tag, the format falls apart again.

This code works perfectly if I use table parts instead of divs. Table has an inherent row-ness and column-ness that div doesn't have.

Member Avatar for FC Jamison

You seem to be arguing that tables are your only solution. I was just trying to give you something that works in CSS because that's what you asked for. I'm sure I could get it to validate under xhtml given more time...but it seems unappreciated, so why waste the effort?

There comes a point there CSS just doesn't work as nicely as tables do because of the way each browser interprets it. Many people will tell you that you MUST use CSS for non-tabular design and if it doesn't work,change your design...I say use what works.

The problem isn't in the CSS, it's the browsers. Until they all follow CSS standards, you have to go with what works.

Member Avatar for MidiMagic

I want people to keep trying. I would love to be proved wrong here. But so far, I haven't found anything that always works and preserves the formatting I want.

I don't think it's just the browsers. I think we are missing a tag.

The div tag is too general to use for something like rows and columns and have it stay put. It takes a lot of jiggery-pokery with the widths to get divs to stay where they belong, and then resizing the browser window throws the divs around to land wherever they will.

We need something with TWO sets of tags. One tag pair tells the browser what material belongs within a set of columns (like tr). The other pair tells each column which column of the set it is, and where it belongs (like td).

I tried nesting divs with different widths, and that didn't work either.

My thought is that those in charge of W3C are so heavily into book and newspaper publishing that they forget that people have other needs (e.g. tutorials, term papers, and advertising). Right now, we cannot do the following in xhtml code which validates. We used to be able to do all of them:

- Center an image, without a lot of extra code. The only reliable centering I have found uses a div "wrapper" and a lot of styles.

- Quote a portion of a reference work which includes PART of an ordered list, but does not include the first element (e.g. items 25 through 28 from a list of 56 items in somebody's book). They removed all ways to start an ordered list at a point other than a, 1, or i.

- Enclose a reference quotation which spans multiple paragraphs.

- Link to a location in the middle of the page.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.