SQLConnect() hangs on Windows 7

Often while debugging or running programs on Windows 7 gets stuck at SQLConnect() call that tries to connect to a Sybase database on the same machine.

I am not sure what causes the issue but this happens to me only when I am running Sybase as a non-administrator and Visual Studio or the program as administrator.

The solution is to run both as administrator.

Code wrap behaviour

When pre element uses width and word-wrap: break-word properties, the long lines of code wrap in Chrome and IE6 but not in Firefox.

Here is the example CSS for the pre elements in this sample page: http://susam.in/downloads/files/css-hacks/pre-word-wrap/pre-word-wrap.html.

pre {
    border: 1px solid black;
    background: #ebebeb;
    width: 20em;
    overflow: auto;
    color: blue;
}
pre.wrap {
    word-wrap: break-word;
}

In the outputs below, the first boxes use the wrap class. The second ones are plain pre elements.

Output in Firefox 3.6

Output in Chrome 11

Output in IE6

Long code overflow behaviour

When pre element uses width and overflow: auto property, code that doesn't fit within the width of the pre element is clipped and a scroll-bar appears which can be used to view the clipped code.

However, when it contains only one line of code, we see a couple of issues in Firefox and IE. Here is the example CSS for the pre elements in this sample page: http://susam.in/downloads/files/css-hacks/pre-overflow/pre-overflow.html

pre {
    border: 1px solid black;
    background: #ddccff;
    width: 20em;
    overflow: auto;
}

Firefox doesn't display the scroll-bar if the pre element contains only one line of code. It is still possible to scroll the code though by using the arrow-keys on the keyboard or selecting text in the code with the mouse and moving right.

Output in Firefox 3.6

Chrome does the right thing and displays the scroll-bar.

Output in Chrome 11

IE always hides the last line of the code with the scroll-bar. So, when there is only one line of code, the scroll-bar hides this only line of code and no code is visible.

Output in IE 6

I don't know how to fix this without fixing a height for the pre elements using the height property in CSS. I simply avoid displaying one line of code. If the code is only one line long, I would add an extra blank line to the code to avoid this issue.

Long word breaking float in IE

If there are two div elements placed side-by-side using float: left and float: right, a long word in one of the div elements breaks the float for the other.

An example CSS along with screenshots of the issue demonstrated by a sample page at http://susam.in/downloads/files/css-hacks/long-word-and-sidebar/long-word-and-sidebar.html follow.

#id1 {
    float: left;
    width: 65%;
    border: 1px solid #000080;
    background: #ffcc00;
    padding: 2px;
}
#id2 {
    float: right;
    width: 30%;
    border: 1px solid #008000;
    background: #ccccff;
    padding: 2px;
}

In the outputs shown below, the box on the left has ID as "id1" and the one one the right has ID as "id2". The box on the left has a long word.

Output in Firefox 3.6

The sidebar with ID as "id2" is intact in Firefox even though the long word has spilled outside the box on the left. However, the layout breaks in Internet Explorer as can be seen below.

Output in IE 6

The fix involves allowing long words to break and wrapping into the next line.

#id1 {
    float: left;
    width: 65%;
    border: 1px solid #000080;
    background: #ffcc00;
    padding: 2px;
    word-wrap: break-word;
}

Outputs from the fixed web page at http://susam.in/downloads/files/css-hacks/long-word-and-sidebar/long-word-and-sidebar-fixed.html follow.

Output in Firefox 3.6 after the fix

Output in IE 6 after the fix

Long non-text breaking float in IE

If there are two div elements placed side-by-side using float: left and float: right, a long non-text block in one of the div elements breaks the float for the other.

Such layouts are very common on the web. An example is this notes blog of mine in which you are reading this post. The content area inside which this blog post is present has a float: left style applied on it whereas the sidebar on the right hand side of the page has float: right style applied on it.

An example CSS along with screenshots of the issue follow:

#long {
    width: 154%;
    height: 20px;
    border: 1px solid #000000;
    background: #008000;
}
#id1 {
    float: left;
    width: 65%;
    border: 1px solid #000080;
    background: #ffcc00;
    padding: 2px;
}
#id2 {
    float: right;
    width: 30%;
    border: 1px solid #008000;
    background: #ccccff;
    padding: 2px;
}

In the outputs from a sample web page at: http://susam.in/downloads/files/css-hacks/long-nontext-and-sidebar/long-nontext-and-sidebar.html shown below, the box on the left has ID as "id1" and the one one the right has ID as "id2". The green box within the first box has ID as "long".

Output in Firefox 3.6

The id2 sidebar is intact in Firefox even though the green div element has spilled outside the id1 div element. However, the layout breaks in Internet Explorer as can be seen below.

Output in IE 6

This issue can be caused by any type of long non-text content in one of the div elements. The long green div element here is only an example. Another such examples could be a very long image.

The fix is simple. Overflowing content should be clipped with overflow: hidden style in the div element where such long non-text content is expected. Here is the fixed CSS.

#id1 {
    float: left;
    width: 65%;
    border: 1px solid #000080;
    background: #ffcc00;
    padding: 2px;
    overflow: hidden;
}

An example of the fixed web page can be found at: http://susam.in/downloads/files/css-hacks/long-nontext-and-sidebar/long-nontext-and-sidebar-fixed.html

Output in Firefox 3.6 after the fix

Output in IE 6 after the fix