Clear element of multiple-column layout?

Clear an OL or UL but not a P element in example...

[JAB Creations]

I've implemented Gecko's proprietary CSS3 multiple-column layout though I'd like certain elements to clear from being split between columns such as OL, UL, but at the same time avoid clearing all elements such as P.

- John

[Dabrowski]

Why would you do such a thing?

a) Nobody uses Gecko
b) The CSS3 spec won't be finalised for years.

Not sure what you mean though about splitting between columns, is that a CSS3 thing?

It could be 'cos OL, and UL are not block elements maybe?

[JAB Creations]

a) Nobody uses Gecko

My site stats this March 2007 (up to and including the 30th of this month)...

Firefox 2.0.0.2: 47.1%
Firefox 2.0.0.3: 16.1%
Internet Explorer 6.0 SP2: 8.9%
Internet Explorer 7.0: 5.7%
Internet Explorer 6.0: 5.2%
Firefox 1.5.0.10: 4.6%
Firefox 2.0.0.1: 3.1%
Firefox 2.0: 1.6%
Firefox 1.5.0.11: 1.1%
Internet Explorer 5.5: 0.4%
Safari 2.0.4 (Tiger): 0.4%
Firefox 1.5.0.9: 0.3%
Firefox 1.5.0.2: 0.2%
Opera 9.10: 0.2%
Firefox 3.0 (Minefield Nightly Build): 0.2%
Firefox 2.0.0.2 (BonEcho Nightly Build): 0.1%
Firefox 1.5.0.7: 0.1%
Firefox 1.0.7: 0.1%
Mozilla SeaMonkey 1.1.1: 0.1%
Firefox 1.5.0.4: 0.1%
Safari 1.3 (Panther): 0.1%
Safari 1.3.2 (Panther): 0.1%
Firefox 1.5.0.8: 0.1%
Firefox 2.0.0.1 (BonEcho Nightly Build): 0.1%
Konqueror 3.5: 0.1%
America Online 9.0 (MSIE6/6SP2): 0.1%
Firefox 1.5.0.6: 0.1%

Gecko (rough) total: 75% share.

All 0.1% shares represent no less then several thousand hits representing roughly dozens to hundreds of visitors.

b) The CSS3 spec won't be finalized for years.

My work thus far is basically how I learn web related technologies and I'm pretty cutting edge at the moment. I've been patching old browsers to render exactly the same as competent browsers and adding (based on user's descrition) CSS3 related specs whether they are proprietary or not as they are served separate of the main stylesheet and can be toggled on or off (in the second live test case with the first live test case to be release later today after I patch small issues like this).

It could be 'cos OL, and UL are not block elements maybe?

That was my first guess though I doubted it when I saw very weird table behavior *LoL*. I applied display: block; on both OL and UL elements without success.

For clarification I'll restate my question differently...

I have an element such as UL or OL that I do not want to split in to two (or more) columns while I want other columns to split such as P; is there a way to clear a column?

- John

[Dabrowski]

I stand corrected on that point at least.

When you describe CSS3, proprietry, columns, and split content, it sounds like CSS3 columns will split a single content flow across columns, sort of like a newspaper?

Am I getting close?

[jessejump]

Wrap the UL, OLs in a DIV?

[JAB Creations]

Dabrowski, I'm pretty much a bleeding edge enthusiast doing independent research (for now) and have for nine years so I'm able to do design wise what others would probably either not think of or refuse to do for one reason or another. IE's share while not that great on my site still is roughly between 50%-80% on sites around the world with it not being uncommon to have it as high as 95%+ on some (browser neutral sites (not including forced proprietary sites such as South Korean bank sites in example)).

<div style="clear: both;">

Tried that and tried to clear it without success. I'm still open to any suggestions! Thanks for the suggestions so far. I've been scanning the W3C site without success thus far...

- John

[Dabrowski]

John, I salute you. Programmers who take the initative to use new technologies are the people who shape the development of these technologies, and without that and left to W3C, who knows what they'd come up with?

Anyway, that particular discussion aside, could you stickymail me a URL that I could look at to see what you mean? I think apart from guessing blindly I need to have a look, at least at some code.

I am still unclear about the proprietry CSS3 column thing you mentioned, exactly how are the columns formed and where is the content? i.e. 3 columns with 3 sets of content, or 1 content flow that is automatically split?

[Robin_reala]

I believe the CSS you'd want is:

ul, ol { column-break-inside: avoid; }

(see [w3.org ]).

Your problem though is that Gecko doesn't currently implement it.

[JAB Creations]

Thanks Robin, it looks like Gecko 1.8 does not support that spec however and that is the only (and specific) version of any rendering engine I've even begun to try and implement CSS3 stuff with in my latest work.

Is there any place we can read about any new CSS3 specs (besides just more selectors) being added to Gecko 1.9 by any chance?

- John

[Robin_reala]

I usually keep an eye on the various Mozilla developer blogs, and CC myself on any interesting bugs in Bugzilla (you can filter by the ‘css3’ keyword).

[Dabrowski]

Impressively complicated site if nothing else.

I can see the DIV in question, I take it you haven't added the DIV as wrapper test that was suggested?

I couldn't actually find the multi-column bit though, could you set up a smaller page that demonstrates this with the bare minimum, and include the CSS and JS in the same file?

Impressed with your attempt to make a scrolling wrapper take remaining vertical height too, something I'm working on and I think you'll like when it's finished.

[JAB Creations]

Robin, I'm seeing lots of blog related websites and doing a search for "CSS" alone isn't bringing anything up, could you provide a link please?

Thanks Dabrowski, I did use the suggested div temporarily though since it's a live test case I removed it (since it had no effect). I'm mostly only changing back end stuff while cleaning up my general file and file referencing (including my file naming scheme). If I'm going to go in to the level of detail that I am I have to keep it as organized as possible.

One of my recent changes (thank goodness for this!)...
[webmasterworld.com...]

Anyway here is a minimal and working test case for Gecko 1.8 browsers...

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Clearning Multi-Column Test Case</title>
<style type="text/css">
div {-moz-column-count: 2;}
</style>
</head>

<body>

<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nunc malesuada.
Fusce non mauris in elit pharetra sollicitudin.
Etiam mauris dolor, rutrum id, adipiscing ac, consequat ac, lorem.
Sed ultrices velit nec felis.</p>

<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>

<p>Vivamus tellus.
Sed a purus vitae orci porta tincidunt.
Nulla pharetra nonummy justo.
Aliquam elementum libero ac neque.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

</div>

</body>
</html>

- John

[Dabrowski]

ok, assuming we're allowed links to W3C, look here:

[w3.org...]

Just incase that link is cut, Google 'css3 columns' and look for the W3.

There is apparently a CSS property of column-break-before/after/inside, which according to another site I looked on should work in Gecko 1.8. I tried it and it didn't work but I'm only on FF 1.5.0.11, you tell me what version of Gecko that is.

Anyway, you should set 'column-break-inside: avoid'. And it's helpful setting 'column-break-after: avoid' for headings so you don't end up with a heading in one column and the content in the next.

And, worst of all, you spelt 'clearing' wrong on your test page. :D

[JAB Creations]

W3C and browser vendor links (main websites) are ok to post as they are definitive references though I have been somewhat infamous for being wrong (and making mistakes, gah).

Here we go! CSS properties supported in Gecko (what version I can only assume 1.8 at least)...
[developer.mozilla.org...]

Then there are the Mozilla CSS extensions (proprietary implementation)...
[developer.mozilla.org...]

Just found these thankfully!

If you're not sure what version of Gecko you're using go to Help and then About Mozilla Firefox and look at the revision number. Firefox 1.5 uses Gecko 1.8 (which finally saw a fix for a no-scrolling bug on overflow elements.

The only thing that has any promise that I've played with are height and margins.

- John

[Dabrowski]

ok then I'm on Gecko 1.8.

Well, looking at W3C and the proprietry Moz properties, I'd say it can't be done with any element or wrapper as it support the column-break-inside property yet.

What did I tell you about not using it until it's released?!

[Dabrowski]

I think the problem is occurring with UL rather than with P as P is one element, but it's treating the LI's separately.

You could use a bit of JS to check the height of the containing DIV vs the height & offset of the UL and apply a top margin if appropriate?

[JAB Creations]

At this point in time if I don't want something to break in to multiple columns I just won't use the class I'm using on the parent divisible element. This goal is not a high priority and it does not seem reasonable to pursue this to the extent we are at this too early of a stage for CSS3, especially in consideration of everything else that I'm working on. If you find a way though I'd use it. ;) Thanks for the creative help and suggestions...

- John

[Dabrowski]

Looking at your site, you don't seem a stranger to JS, you could implement that in 10 mins.

[JAB Creations]

The DHTML stuff is ported over from a pre-existing library though I did have to modify it to get it to work with application/xhtml+xml mime. I know JavaScript good enough to some extent though I'm sure as heck don't consider myself as acknowledgeable as some of the people here who have helped me in the past. We're talking about a script to enhance an already proprietary implementation of a feature not yet actually part of a standard! I've already got a full plate of work to begin with that I'll just refrain from implementing the multi-column class if I really dislike it's effects on some elements.

I don't know the difference between the various versions of JavaScript though I would personally start reading at Mozilla's DOM reading [mozilla.org] and see if there are any objects that could potentially be used to achieve this goal. However I really don't have that much free time on my hands as I've started working on my first big project (that isn't my personal site) as I'd like to move out of the retirement community I'm currently stranded in (that was even referenced as a retirement community in Batman the animated series for goodness sakes!) If you start a thread over in the JavaScript forums I'd be happy to read and hopefully learn something from it though my focus right now in regards to learning new things is firmly planted in PHP, MySQL, and related security matters.

- John

[Dabrowski]

Fair enough, when CSS3 is properly implemented you will be able to prevent the break anyway.

I'm not going to start a thread:
a) because I don't want to do it
b) because I already know how to do it if I wanted to.

Although it has given me an idea to auto-columnise content if the screen is wide enough.

[JAB Creations]

Ok, how would you do it if you wanted to? Being more specific I assume you already have an idea of which DOM objects you'd use?

- John

[Dabrowski]

I'd get the offsetheight of the div, the offsettop of the ul, the offsetheight of the ul (hopefully moz will report the entire height as if it hadn't been split).

if( ul.offsettop +ul.offsetheight > div.offsetheight)
top margin = div.offsetheight -ul.offsettop;

That's where I'd start. You get the idea? If it worked you could create generic code to correct all elements in all columnised divs.