Search this site


Page 1 of 3  [next]

Metadata

Articles

Projects

Presentations

Site design refresher / CSS overflow property on IE 7

I updated some of this site's design. The most obvious changes are cosmetic (new banner logo at the top, slight color/layout differences). The least obvious change (hopefully) is that this site is now layed out purely with CSS, not tables.

After refreshing my rotting CSS braincells, I got a layout working properly and was quite happy. Then I tested in IE, and saw my <pre> tags being displayed incorrectly (according to my desire, not necessarily the code, which don't always align):

The above should have been two lines of text with a horizontal scroll bar. I want to say use scroll-bar for text that's too wide but expand vertically without a scroll bar: Never a vertical scroll bar, only ever a horizontal one.

I've spent a bit today scouring the web with not much help. I've randomly permuted css values for overflow, overflow-x, overflow-y, min-height, etc. Having failed that, I read everything I could find from randomly permuted search queries, one of which lead me to a depressingly long detail about IE6's expanding box problems. The page claims (and several others do, also) that IE7 fixes several box expansion problems.

I created a very small demo with minimal CSS to show the problem here: Click here to view the demo. It includes the solution I found, detailed below.

After some other random permutation, I gave up and tried wrapping the pre in a div and applying the overflow properties to the div. It worked. It's 2009 and I still have to deal with weird and obscure browser rendering inconsistencies. I came up with this:

<style>
  .scroll-wide {
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 500px;
  }

  /* On firefox, pre tags have a top and bottom margin > 0, which makes your 
   * scrolling div have a blank top line, which isn't what
   * we want. Fix one weirdness to find another? I didn't fully investigate.
   * Here's the fix: */
  div pre {
    margin-top: 0;
    margin-bottom: auto;
  }
</style>

...

<div class="scroll-wide">
  <pre>
    stuff
  </pre>
</div>

Solving this with wrap-pre-in-a-div can be automated with jQuery and a CSS definition:

// javascript
$("pre").wrap("<div class='pre-wrap'></div>");

// In CSS
div.pre-wrap {
  /* overflow/height/whatever options */
}
It's still possible I was doing something wrong and that this hack isn't necessary, but I don't know. I'm just glad to have it working now.

PS: If you use Meyer's reset.css, you'll want to include pre { margin-bottom: auto; } , or IE will again clip the bottom of the pre contents with the scrollbar.

urledit firefox extension project page is up.

I put up a project page for the new urledit extension. It includes download links and a screencast demo.

/projects/firefox-urledit

My svn repo now online-ish.

Lack of updates due to all energy being spent on upgrades/fixes to my new house! Sorry folks ;)

Having recently merged all of my code repositories into one single subversion repository, I decided it was time to look into running a web-based interface to it.

Looks like some short time ago ViewCVS (like cvsweb) was rewritten to support different version control systems and renamed to ViewVC. It's dead easy to configure, so within minutes I had a happy web-based view into my new, single, repository.

Go to my svn repo

This repository contains most of the code I've ever written (excluding (job and school)-related stuff). Looking back at it now, there's code in there I haven't touched in years.

One of those is rssnews, which I wrote to teach myself perl back in 2002. The rewrite barely got started but made its way into source control. Seems funny now, where there are entire dot com businesses built around serving syndicated feeds, that I wonder where I might be if I had continued to maintain it? Surely I'd be a millionaire ;)

Another is 'diesel', a project I started to make automagic configuration of CSH's new FWSM context easy. I only finished the first part, which was an expect script which would read a config file in and install it into the firewall over ssh. CSH recently added a user-configurable web tool that allows members to configure firewall access rules for their registered machines. It uses this expect script to set rules, last I recall.

Good times. Oh, and I found this neat site the other day:
http://www.oreillynet.com/sysadmin/

It has some decent writing. Brian Jones makes some good points in this piece about sysadmins and technical books; that sysadmins are starting to lean towards writing more code than simple administrative tasks. He (I think it was him) also talks about how programming methodolgies have become more popular and adopted and questions why no common-practice sysadmin methodologies have risen.

Comment spam that got through

I get emails from this site when someone comments.

This morning, this showed up:

Name: Virtual Pharmacy
Email: [snipped]
URL: [snipped]
Hostname: 114.199.36.72.reverse.layeredtech.com (72.36.199.114)
Entry URL: http://www.semicomplete.com/blog/geekery/barcamp-sanfrancisco-2
Comment location: [snipped]

Everyone repeat, what alcohol should be consumed moderately, but what it means? Why to women
 recommend to drink more moderately than to men? What is the female alcoholism? WBR LeoP
A quick google search for the strange tail token, "WBR LeoP" reveals a clear indication that this is comment spam (as if the content didn't give it away).

The url the spammer used points at pharmacynewsblog.com, which looks like a normal blog.

It's not.

The content is entirely viagra-and-friends related, which is fine. However, examine a simple visible text snippet of the following (this is from the frontpage):

Drug treatment may beat psychotherapy at ...
Google for this phrase and you'll find that it's been plagiarized. But deliciously so:

View source, you'll see:

<p>Drug <b class=ne>joint pain are </b>treatment <BLINK class=ne>of
purchase </BLINK>may <sup class=ne>wellbutrin at </sup>beat <small
class=ne>and paxil vs </small>psychotherapy
The css class 'ne' sets 'display: none' among other properties that make it stay out of the way of the browser.

This is quite clever, and appears automated.

pharmacynewsblog.com seems to be a somewhat autogenerated spam blog that takes news postings about viagara and the like and injects random html into it, with the intention of defeating antispam solutions. Anti-spam engines probably aren't smart enough to know that it should ignore the text pieces that are invisible. Who knows.

But, back to the spam comment. I use javascript to poke parts of the comment form indicating that a javascript-capable browser was used to submit the comment. If javascript is not detected, the comment is denied.

This comment got through, which means that javascript was enabled, which means that it was probably a webbrowser that did it.

Here's the apache log snippet:

72.36.199.114 - - [29/Jan/2007:13:01:17 -0500] "GET /blog/geekery/barcamp-sanfrancisco-2.html HTTP/1.1" 200 15903 "-" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)"
72.36.199.114 - - [29/Jan/2007:13:01:18 -0500] "GET /style.css HTTP/1.1" 200 2584 "http://www.semicomplete.com/blog/geekery/barcamp-sanfrancisco-2.html" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)"
72.36.199.114 - - [29/Jan/2007:13:01:20 -0500] "POST /blog/geekery/barcamp-sanfrancisco-2 HTTP/1.1" 200 16392 "http://www.semicomplete.com/blog/geekery/barcamp-sanfrancisco-2.html" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)"
72.36.199.114 - - [29/Jan/2007:13:01:21 -0500] "GET /style.css HTTP/1.1" 200 2584 "http://www.semicomplete.com/blog/geekery/barcamp-sanfrancisco-2" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)"
It didn't fetch any images, but it did pull style sheets, which is strange behavior if it's a simple spam bot that doesn't care about how a page looks. It also pulled the blog posting page first, then submitted a comment. Further indication that this bot is either really clever, or a person is behind the wheel.

If you search for the ip, 72.36.199.114, the first hit on google is an automagically updated list of known comment spam hosts.

New ssh vpn article, soon.

I keep an eye on my apache access logs to see what kind of traffic my site gets and why it gets here. It seems that a non-trivial number of searches are for 'vpn over ssh' and similar variants. These land at the ppp over ssh article.

New versions of openssh have built-in support for tunneling, and do not require ppp at all. Seeing as how I've never really used this new feature, and there's a nontrivial number of searches ending up on the ppp-over-ssh article, I think it's time to write a little article on how to use the new openssh built-in tunneling.

Stay tuned...

What next?

I've still been swamped with work, life, more work and more life. As as result, I've posted much less frequently lately than I have in the past.

This is mostly due to lacking time to spend on research. I've learned many new things in recent weeks that I'm eager to post about, but I haven't had time to sit down and actually write.

So. This site has very few regular visitors, but to those of you who do read: What should I post about next? Ideas would be much appreciated. :)

I'm also working on a new site layout and planning on putting more time and effort into research and posts here. We'll see how far that actually goes, though. Site layout should be done soon. My awesome (?) GIMP-fu created a new logo. Thoughts and suggestions welcome.

Site host relocation

I noticed that this site's up on waxy.org/links. In preparation for traffic, I have moved the site to another server that can better handle the traffic load.

Let me know if there are problems.

Pyblosxom comment antispam plugin

Ever since I added comments to this site, I've started getting comment spam. To combat this, I hacked together a comment management system using jquery and python. It lets me search comments and delete them via web interface.

I'm bored of deleting comments by hand. So, I wrote a little antispam plugin. This plugin creates a token that expires after a given period of time. This token is used as a hidden item in the comment form. If this token is expired when the form is submitted, the comment is rejected.

Spam seems to come entirely from solo-connection POST requests. This means that the bots don't bother viewing the page first. In theory, the bots will be using a cached idea of the form, which will be expired. We'll see how well this works.

Right now it just uses a timestamp. If that fails, I'll add other tokens such as source IP, etc. Perhaps cookies too? This should be simple to filter out, becuase the spam bots don't act anything like humans with regards to browsing behavior.

I have enabled the plugin on this site. I'll post the source when I see it actually working correctly.

Waiting for spam bots to come by is boring :(

Dynamic DNS + DHCP Article

I wrote a new article (due to overwhelming demand of 1 person asking) about how to get dynamic dns and dhcp working.

articles/dynamic-dns-with-dhcp

Pyblosxom single-entry page title plugin

The page titles pyblosxom provides are usually great. However, when there is only one entry displayed, I feel it would be better to rely on that entry's title.

I wrote a very short plugin to do just that. Turns out the plugin api for pyblosxom is quite easy to understand, and this hack was only about 10 lines.

pagetitle.py adds a new variable which will contain the standard page title, unless there is only one entry in view. If there is only one entry in view, the page title is augmented with the story title aswell. This makes search engine results and browsers happier, as they can recognize what your page is about by the title. User experience good, also good for search engines.

The new variable you want to use is: $blog_title_or_entry_title

If you want to get a better idea of what this plugin does, you can click the permalink below to view only this entry. The page title (in the url bar) should now reflect this entry's title.

download pagetitle.py