CSS out of control

Highlighter set conditions where CSS looses control of the display

by Georges Trottier

HTML

<script src="http://www.gtro.com/include/jquery.chili-2.2.js"></script>
<script src="http://www.gtro.com/include/recipes.js"></script>
<body>
<input type="button" value="Change to display:table" id="ChangeDisplay">
<div id="container">
  <h1>Test page for Chili printing with line-numbering &quot;on&quot;</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue.</p>
<pre class="code ln-"><code class="html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
    &lt;title&gt;Test Chili printing&lt;/title&gt;
  &lt;/head&gt;

  &lt;body&gt;
    &lt;h1&gt;Test page for Chili printing with line-numbering &quot;on&quot;&lt;/h1&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue.&lt;/p&gt; 
    &lt;pre class="ln-"&gt;&lt;code class="css"&gt;p.notebox {
      display:block;
      background: #eee;
      padding: 15px 45px 15px 60px;
      margin: 0 auto;
      position: relative;  
      /*Font*/
      font-size: 1.0em;
      line-height: 1.2;
      color: #000;
      text-align: justify;
    }&lt;/code&gt;&lt;/pre&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>

</body>

CSS

body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16pt;
}

#container { display:block; background: url(/include/images/back.jpg); max-width: 900px !important;}

input {position: fixed; left:10px; top: 10px; border: 5px double;} 

h1 {text-align: center;}
pre
{
  overflow: auto;
	word-wrap: break-word;
  white-space: pre-wrap; /* CSS 3 */
  width: 90%;
  font-family: "Lucida Console", monospace;
	margin: 0 auto;
	padding-left: 20px;
	background-color:#eee; /*#eee*/
  border: 5px double #000;
	border-radius: 15px;
}
code
{
	font-family: "Lucida Console", monospace;
  font-size: 1.0em;
}
pre.code{
  overflow: auto; /* can also be scroll */
  font-family: "Lucida Console", monospace;
}

JavaScript

//alert(screen.width);
	$("#ChangeDisplay").click(function() {
		if ($("#container").css('display') == 'block') {
			$("#container").css('display', 'table');
			$("#container").css('table-layout', 'fixed');
			$(this).attr('value', 'Change to display : block');
		}
		else {
			$("#container").css('display', 'block');
			$(this).attr('value', 'Change to display : table');
		}
		
	});