CSS Forum

**evans123** · 06-12-2010, 03:10 AM

I have a problem when my plugin for Wordpress highlights my code. Theres not enough space in the line for the text so its hidden and your able to scroll and see it. I would like the white block to cover the length of the text but it stops. Any ideas?

Link: http://www.benwebdeveloper.com/2010/...-website-icon/

CSS:

Code:

.wp_syntax {
  color: #100;
  background-color: #f9f9f9;
  border: 1px solid silver;
  margin: 0 0 1.5em 0;
  overflow: auto;
}

/* IE FIX */
.wp_syntax {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: expression(this.scrollWidth > this.offsetWidth ? 15 : 0);
  width: 100%;
}

.wp_syntax table {
  border-collapse: collapse;
}

.wp_syntax div, .wp_syntax td {
  vertical-align: top;
  padding: 2px 4px;
}

.wp_syntax .line_numbers {
  text-align: right;
  background-color: #def;
  color: gray;
  overflow: visible;
}

/* potential overrides for other styles */
.wp_syntax pre {
  margin: 0;
  width: auto;
  float: none;
  clear: none;
  overflow: visible;    
  font-size: 12px;
  line-height: 1.333;
  white-space: pre;
}

**chrishirst** · 06-12-2010, 08:24 AM

remove overfow: hidden; & overflow: auto;

**evans123** · 06-12-2010, 08:28 AM

I have done that now but the white space still doesnt cover all the text.

**chrishirst** · 06-12-2010, 09:22 AM

Code:

.wp_syntax {
  color: #100;
  background-color: #f9f9f9;
  border: 1px solid silver;
  margin: 0 0 1.5em 0;
  overflow: auto;
}

is where the scroll comes from.

And the code is a mess of nested element which there is no need for at all
A <pre> with a class that doesn't appear to exist (.html) and inline style added. Wrapped in a div with another class that doesn't appear in the style sheets (.code) all inside ANOTHER <div> (.wp_syntax)

HTML Code:

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;link rel=&quot;SHORTCUT ICON&quot; href=&quot;http://www.yourdomain.com/path/favicon.ico&quot;/&gt;</pre></div></div>

There is two elements too many in that lot and THAT is what is causing the problem.
the background is filling the parent but because no rules apply to the children they simply take up the defaults.

Either rewrite the "pugin" to produce better code or add classes for .html and .code with a background-colour of transparent specified