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

Here is a sample page that demonstrates this: http://susam.in/files/notes/css-hacks/pre-word-wrap/pre-word-wrap.html. The CSS code for the HTML pre element is as follows.

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

The first box in each output below use the wrap class. The second ones in each is a plain pre element.

Screenshot of output in Firefox 3.6
Output in Firefox 3.6
Screenshot of output in Chrome 11
Output in Chrome 11
Screenshot of output in Internet Explorer 6
Output in Internet Explorer 6

When the HTML pre element uses the CSS width and overflow: auto properties, 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 remaining code.

However, when it contains only one line of code, we see a couple of issues in Firefox 3.6 and IE6. Here is a sample page that demonstrates the issue: http://susam.in/files/notes/css-hacks/pre-overflow/pre-overflow.html. Here is the CSS used for the HTML pre element.

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

Firefox 3.6 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.

Screenshot of the output in Firefox 3.6
Output in Firefox 3.6

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

Screenshot of the output in Chrome 11
Output in Chrome 11

Internet Explorer 6 always hides the last line of the code behind the scroll-bar. Therefore, when there is only one line of code, the scroll-bar hides this only line of code and no code is visible.

Screenshot of the output it in Internet Explorer 6
Output in Internet Explorer 6

If there are two HTML div elements placed side-by-side using float: left and float: right, a long word in one of the div elements breaks the floating property of the other in Internet Explorer 6 as well as Internet Explorer 8.

Here is a sample page that demonstrates this issue: http://susam.in/files/notes/css-hacks/long-word-and-sidebar/long-word-and-sidebar.html. Here is the CSS used for both the HTML div elements.

#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 each output shown below, the box on the left has its ID as id1 and the one on the right has its ID as id2. The box on the left has a long word.

Screenshot of the output in Firefox 3.6
Output in Firefox 3.6

The sidebar with its 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 8 as can be seen below.

Screenshot of the output in Internet Explorer 8
Output in Internet Explorer 8

The fix involves allowing long words to break and wrap.

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

Here is a page that demonstrates the fix: http://susam.in/files/notes/css-hacks/long-word-and-sidebar/long-word-and-sidebar-fixed.html.

Screenshot of the output in Firefox 3.6
Output in Firefox 3.6
Screenshot of the output in Internet Explorer 8
Output in Internet Explorer 8

If there are two HTML div elements placed side-by-side using float: left and float: right, a long HTML element in one of the div elements breaks the floating property of the other in Internet Explorer 6.

Here is a sample page that demonstrates this issue: http://susam.in/files/notes/css-hacks/long-nontext-and-sidebar/long-nontext-and-sidebar.html. Here is the CSS used for both the HTML div elements.

#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 each output shown below, the box on the left has its ID as id1 and the one on the right has its ID as id2. The green box within the first box has its ID as long.

Screenshot of the output in Firefox 3.6
Output in Firefox 3.6

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

Screenshot of the output in Internet Explorer 6
Output in Internet Explorer 6

This issue may 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 a page that demonstrates the fix: http://susam.in/files/notes/css-hacks/long-nontext-and-sidebar/long-nontext-and-sidebar-fixed.html.

Screenshot of the output in Firefox 3.6
Output in Firefox 3.6
Screenshot of the output in Internet Explorer 6
Output in Internet Explorer 6

This issue occurs when padding: 0 property is applied to a ul element. The bullet symbols do not appear.

Here is a sample page that demonstrates this issue: http://susam.in/files/notes/css-hacks/list-padding/list-padding.html. Here is the CSS used for both the HTML div elements.

ul {
    padding: 0;
    list-style: none;
    color: green;
    background: #ffdd88;
}
ul.circles {
    list-style: circle;
    color: maroon;
    background: #ddff88;
}

The second list in each output below uses the circles class.

Screenshot of the output in Firefox 3.6
Output in Firefox 3.6
Screenshot of the output in Internet Explorer 6
Output in Internet Explorer 6

The output in Internet Explorer 6 gives a clue about the issue. It shows that padding: 0 property is applied around the text only, and not around the text together with the bullet points. Thus, the bullets of the list with circles class are present beyond the left border of the list. The fix therefore simply requires adding some extra padding to the circles class.

ul.circles {
    list-style: circle;
    color: maroon;
    background: #ddff88;
    padding-left: 15px;
}

Here is a page that demonstrates the fix: http://susam.in/files/notes/css-hacks/list-padding/list-padding-fixed.html.

Screenshot of the output in Firefox 3.6
Output in Firefox 3.6
Screenshot of the output in Internet Explorer 6
Output in Internet Explorer 6

Newer | Older
RSS