“Inserted Left Margin” Browser Bug in IE 6 and 7

November 25th, 2009

I found a weird IE 6 and IE 7 CSS bug a few weeks ago at work. I forget the exact way I found the solution (in other words, it was probably dumb luck), but I haven’t found it described anywhere else on the web. I call it the “inserted left margin” bug for lack of a better name.

This is a problem with IE 6 and IE 7, but not with IE 8 or Firefox.

The problem is that setting the width style for a tag to a non-auto value will create a left margin in that tag for (and only for) input tags. This “inserted left margin” will be equal in size to the sum of all the left margins in the containing tags. Reread those two sentences to get an idea of how obscure and weird this bug is. :)

For example, consider this HTML:

<div id=’A’ style=’margin-left: 20px; border: red solid 3px;’>
<div id=’B’ style=’margin-left: 30px; border: blue solid 3px;’>
<div style=’width: 200px;‘>
<input type=’button’ value=’Hello’/>
</div>
</div>
</div>

In Firefox, this will render normally:

However, in IE 6 or IE 7, a left margin will be inserted. The margin is 50 pixels wide (the sum of the left margins of the containing divs, 20 and 30 pixels):

(more…)

TraceyText – A Source Code Visualization Tool to Teach Programming

March 4th, 2009

TraceyText’s home page is http://traceytext.sourceforge.net

TraceyText is an HTML-based teaching tool for visualizing single-stepping through source code. TraceyText can also double as a text/HTML slideshow library implemented in JavaScript. With TraceyText’s features, you can create web pages with a text or HTML slideshow and TraceyText will minimize the file size. TraceyText can also combine multiple “views” in the same slideshow to adjust in sync with each other.

The best way to see it in action are the source stepping demo and the picture slideshow demo. The demo runs through the Dragon Realm game from my book that teaches Python programming. You can either create these web pages with TraceyText by hand, or use the included TraceyText Python script to create a source file that generates the web page.

TraceyText is a useful tool for visualizing source code debugging or any presentation with HTML content. TraceyText has an API which opens itself to user-created JavaScript as well. TraceyText’s name comes from its original purpose as a way to demonstrate debugging traces through source code.

I created this tool as a way to demonstrate how programs run line by line, and what it outputs and the state of the varaibles. Simple text was way too verbose, and video would have taken too much bandwidth. In addition, TraceyText makes for a very nice and simple HTML slideshow.

On the downside, this is a tool mostly for programmers who know JavaScript. I’ll put together a user-friendly authoring tool later if there is interest.

Python Cheat Sheet

August 30th, 2008

I posted this Python cheat sheet before in my PyBat post, but several people found it useful so I wanted to give it it’s own post for emphasis.

And if you just want to see some simple samples of Python code, you can always look at the example programs from my free book for non-programmers, Invent Your Own Computer Games with Python (released under a Creative Commons license).

ccwd.exe – Copy Current Working Directory command

July 25th, 2008

I’ve written a small program that can be run from the command line. The ccwd program will copy the current working directory to the clipboard. I wrote it so that I wouldn’t have to right-click, Mark, highlight text in the console window, and press Enter to copy the text of the current working directory.

Now I can just run ccwd.exe and have it done automatically.

The source code is released under a BSD-style open source license, and the Windows binary is 7kb. I made this program intentionally simplistic (it is fashionable to call it light-weight), for people looking for very simple functionality. Place ccwd.exe somewhere in your system path (such as C:\Windows)

ccwd.exe does not produce any output, and returns 0 on success and a nonzero value on failure.

Source code

Binary executable

Similar programs can be found here:

PyBat: A Python Module to Replace Batch File Usage (or, “Batch Files Aren’t Dead, They Just Deserve to Die”)

March 10th, 2008

Download PyBat 0.1.2

More details at: http://pybat.sourceforge.net

UPDATE: Hi, Reddit! I just wanted to clear this up: PyBat is about solving a somewhat specific problem: allowing Python scripts and batch files to communicate environment variable changes. This is in the case where you have a ton of legacy batch files that you cannot (for whatever reason) outright replace (which may or may not be the best thing to do in your case). I understand that everyone has their favorite scripting language (and for nontrivial tasks, they all sound better than batch files), but this is for situations where you want new Python scripts to work with the old stuff. The rest of the article is simply my rant that using batch files for nontrivial tasks is like working on a fusion reactor with a stone ax. Thanks for reading! Check out the rest of the site!

I’ve seen build systems that have accumulated the cruft of undocumented, half-forgotten, it-was-written-by-a-guy-who-no-longer-works-here software that was added piecemeal over time. It wasn’t until I had to do maintenance work on it that I discovered the horrifying truth of batch files.

Batch files are great for small tasks. But no bit of software remains small for very long, and after a while it balloons into an almost (but not quite) unbearable size. Most batch files rely on goto logic. Batch files use environment variables (which is essentially a single namespace of global variables). Batch files have no consistent syntax. Batch files require several twists and hoops for basic programming tasks, if they can do them at all. Batch files rely on obscure command line switches (I can never remember if copy’s /Y suppresses the confirmation prompt and /-Y enforces the confirmation prompt, or the other way around.)

(UPDATE: I know you can use “call” to jump to a label in the batch file, though I don’t see it in use often. The parameters use the %1 %2 etc. convention, instead of more descriptive labels. And although you can always /? a command, most command line switches are also not very descriptive.)

I tried googling for a batch file debugger, but only found pages that give handy “techniques” like printf-style debugging. Yech.

Of course I then realized the reason no one would make such a useless, baroque thing is because we already have real scripting languages with real debuggers. Although throwing out a large system of batch files and rewriting them in Python or Perl is tempting, it’s something you should almost never do unless you have a week or two to kill.

No problem. Let’s just make all our new code or do piecemeal replacements in Python, and leave the old but still usable batch files around.

But you can’t. Because of environment variables. Many of the batch files I’ve seen do nothing but configure settings by changing environment variables (Visual Studio’s vcvars32.bat is an example of this). But any changes made to a child process’s environment will not be seen by the parent process. Batch files calling other batch files get around this with the “call” command. But batch files calling Python scripts (or vice versa) will not be able to see any changes made by the called file.

It’s not a flaw at all, it’s a basic, well-designed operating system principle. But it does make adding Python scripts that are backwards compatible with a batch file system impossible.

So I wrote a script to get around this impossibility. PyBat is a Python module that lets a Python script call a batch file (or vice versa), and will see the changes made by the called file. Because batch files can share environment variables with each other (with the call command), and Python scripts can share environment variables with each other (with the execfile() function), I’ve written pybat.py and pybat.bat that can bridge the two worlds by writing to a commonly known file. (A hack approach, but also the simplest that works.) (more…)

Next Page »

Powered by WordPress