Member Avatar for 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.

Edited by Blazar because: n/a
  • 4 Contributors
  • 4 Replies
  • 139 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Joenade

Dani AI

Generated

The symptom came from constraining the header cell so tightly that IE8 wrapped each word to fit. As noticed, the narrow constraint was the root cause; and were also on the right track. The key thing to understand is how browsers compute table widths: different engines apply the table layout algorithm and intrinsic sizing slightly differently, and IE8 (especially in quirks mode) will often obey a small fixed width by wrapping content instead of growing the column.

For consistent results:

  • Force no wrapping on the header text and provide a safe fallback for overflow.
  • Or use a predictable table layout and explicit column widths so all browsers distribute space the same way.

Example CSS patterns that work across browsers:

th.table-header {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

and, when you want predictable column behavior:

table { table-layout: fixed; }
col.headerCol { width: 120px; }

Cautions: table-layout: fixed makes column sizing deterministic but will clip content if the width is too small; text-overflow: ellipsis requires overflow: hidden and white-space: nowrap to show the ellipsis.

Quick troubleshooting checklist for the original case:

  • Confirm which element the selector targets (table vs th) and check computed width in the IE developer tools (F12).
  • Verify the page is in standards mode (use a modern DOCTYPE).
  • Try the white-space/text-overflow approach if you must keep a compact header.
  • If the label is short (two words), a nonbreaking-space is a simple content fallback, but prefer CSS for maintainability.

Further reading on table layout and whitespace handling: see the MDN docs for table-layout and white-space.

Recommended Answers

All 4 Replies

Member Avatar for 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.

Member Avatar for bvelez352 
width: 30px;

that's the problem

Member Avatar for 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.

Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.