Talk:CSS3 Multi Column

From CSScripting

Question - Trouble getting script to work with Firefox or Opera

Hi,

Nice script! I am trying to implement it, but I can't seem to get it to work at all in Firefox or Opera. In IE it works just fine. Your examples do work in both Firefox and Opera, so I wonder what I'm doing wrong. Here's my code:

CODE - The HTML file: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1250" />
    <meta name="generator" content="PSPad editor, www.pspad.com" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="multicolumn_layout.css" />
    <script type="text/javascript" src="css3-multi-column.js"></script>
  </head>
  <body>
    <h1>A list divided into columns</h1>
    <div class="textblock">
      <ul>
        <li>Chapter 1</li>
        <li>Chapter 2</li>
        <li>Chapter 3</li>
        <li>Chapter 4</li>
        <li>Chapter 5</li>
        <li>Chapter 6</li>
        <li>Chapter 7</li>
        <li>Chapter 8</li>
        <li>Chapter 9</li>
      </ul>
    </div>
  </body>
</html>


CODE - The css file: 

/* CSS Document */
html, body {
  font-family: "Times New Roman", Serif;
  font-size: 62,5%; /* Reset 1em to 10px */
  background-color: #F4F4F4;
}

.textblock {
  width: 100%;
}

ul {
  column-count: 3;
  column-gap: 20px;
  column-rule: 1px dotted #BBB;
  column-width: 100px;
  font-size: 1.1em;
  color: #666;
}

h1 {
  font-size: 2em;
  font-weight: bold;
  color: #000;
}


I haven't changed anything in the javascript. It doesn't seem to run the javascript at all in Firefox or Opera. However, I did put an alert() in the script to check if it was running or not, and it runs in both Opera and Firefox. It just doesn't mark up the columns the way it does in IE.

What am I doing wrong? Your example pages work fine in Firefox and Opera! I can't seem to find the major difference between your code and mine though!

I hope you can help me out.

Best regards, Martijn Senden.



For the script to work in Opera & Firefox, the css file must be hosted on a web server (doesn't work locally)

Cedric


Note (thx to Robert Orso): The CSS style specifying the column parameters must not be the last one in the CSS style or must at least be followed by a line-feed. Otherwise the script does not see the rule with Mozilla.

Retrieved from "http://www.csscripting.com/wiki/index.php?title=Talk:CSS3_Multi_Column"