Support » Plugins » <pre> doesn’t have a “visible” end.

  • Hiya.

    I believe this is a simple CSS issue, but I just can’t seem to figure it out. I won’t go into too much detail, instead I’ll let you see the problem for yourselves. Here is a simple tutorial I wrote for a “Hello, World” program in java:

    http://metaleks.net/tutorials/java/hello-world/

    Scroll down until you see some code. As you can see, the tables holding the code don’t seem to have a visible end.

    Does anyone have any ideas?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hi.

    Not sure what you’re getting at here. I looked at your page in a few different browsers and all looks ok to me. So, I was thinking that, maybe you mean the source.

    The first chunk of “<pre>” Code looks like this:

    <div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
    2
    3
    </pre></td><td class="code"><pre class="java"><span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">class</span> HelloWorld <span style="color: #66cc66;">{</span>
    
    &nbsp;
    <span style="color: #66cc66;">}</span></pre></td></tr></table></div>

    If you “properly indent”, you get this:

    <div class="wp_syntax">
      <table>
        <tr>
          <td class="line_numbers">
            <pre>
              1
              2
              3
            </pre>
          </td>
          <td class="code">
            <pre class="java">
              <span style="color: #000000; font-weight: bold;">public</span>
              <span style="color: #000000; font-weight: bold;">class</span> HelloWorld
              <span style="color: #66cc66;">{</span>&nbsp;
              <span style="color: #66cc66;">}</span>
            </pre>
          </td>
        </tr>
      </table>
    </div>

    Thanks for taking your time to look at this. I guess I should have been more specific. If you take a look at the code’s border (while looking at the page normally), you’ll notice a blue line that surrounds it. However, this line stops surrounding it when it comes to the right hand side of the code. It looks like it disappears into the template.

    Opps!

    Well, this is the piece of code causing your problem:

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

    Once this is removed – the page will display how you expect it to but be warned – This may break how the page looks in Internet Explorer (plugin author didn’t specify which version).

    mfields, many thanks for your help! That fixed the problem. ^_^

    Changing thread status to RESOLVED.

    Sorry, but I’m going to have to reopen this as the problem reared its ugly head back out of nowhere. My CSS for WP-Syntax is as follows:

    /* WP-Syntax */
    .wp_syntax {
        font: 110%/150% "Trebuchet MS", Tahoma, Arial;
        color: #100;
        background-color: #f9f9f9;
        border: 1px solid silver;
        margin: 0 1.5em 0 0;
    }
    
    /* 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;
    }

    I’ve tried setting various properties of margin-right, width and the like to something that will make the border on the right reappear, but to no avail. I’m not too good with CSS, so I’m hoping someone can help me out here.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘<pre> doesn’t have a “visible” end.’ is closed to new replies.