WordPress.org

Ready to get started?Download WordPress

Forums

<pre> doesn't have a "visible" end. (6 posts)

  1. Metaleks
    Member
    Posted 6 years ago #

    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?

  2. Michael Fields
    Themer
    Posted 6 years ago #

    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>
  3. Metaleks
    Member
    Posted 6 years ago #

    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.

  4. Michael Fields
    Themer
    Posted 6 years ago #

    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).

  5. Metaleks
    Member
    Posted 6 years ago #

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

    Changing thread status to RESOLVED.

  6. Metaleks
    Member
    Posted 5 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags