Internet Explorer Makes New Line After Every Word

[Blazar]

I am trying to get my web site to look good in internet explorer but when IE displays tables it messes up. I have this thing with a green table header at the top of every table. In that green table header I would have a title for what is contained in the table, like Sign Up or Log In. But Internet explorer would display this as follows:
"Log In" would look like:

Log
In

and "This is a title" would be like:

This
is
a
title

Internet explorer would display every word on a new line. Can you please help me out because I am really lost and have searched the internet but to no avail.

This is my css which is applied to the table header:

#tableheader{
    vertical-align: top;
    text-align: left;
    width: 30px;
    height: 10%;
    background-color: rgb(34, 131, 22);
    color: white;
    font-family:verdana;
    font-size: 1em;
    border-color: black;
}

I am using IE8.

[ko ko]

What is the unique of 'tableheader' ? Is table cell or table ? If it is for table, your table has only '30px' width and has very small area for each cell in this table. Table can wrap it content and automatically set it's width related with the content inside it. I am not sure what problem it is. Remove 'width' property or set the 'width' to 'auto', and DTD also needs in your markup.
Hope that help.

[bvelez352]

width: 30px;

that's the problem

[Blazar]

thank you very much the getting rid of the width fixed the problem. i was just a little perplexed about why this did not affect Firefox or opera.

[Joenade]

The small width value is causing the linebreaks.

One other method you can try in cases where you must keep the fixed width is to set your spaces explicitly like this:

Log In

The   is converted into a space in the browser, but because it appears as a single word in the source, the words should stay together on the same line.