CODEWITHSUNDEEP
htmlcssinternet-explorerinternet-explorer-7
DaveDev
DaveDev

Reputation: 42185

IE7 Mode squishing table header contents to the left on multiple lines

I have an example of a table that I'm trying to generate here:

http://jsfiddle.net/DTsxa/

I'm having difficulty with the table header though when the table is viewed with Internet Exploder in IE7 Mode, or IE8 Compatibility Mode. The text "Fund Performance Figures as at 19 November 2010" should be on a single line, but it's being squished into the left on multiple lines.

I thought white-space: nowrap; (as per the sample below) might have fixed this, but it's not having any effect at all.

<tr>
    <th class="TableHeaderRow" colspan="8">This Fund's Performance Figures as at 1 December 2010</th>
</tr>

with this CSS:

th.TableHeaderRow
{
    background-color: #A4A247;
    padding: 10px 5px;
    font-weight:bold;

    white-space: nowrap;
}

Can somebody see a work around to this issue?

Upvotes: 0

Views: 218

Answers (2)

Greg Borreson
Greg Borreson

Reputation: 213

Try using "white-space: pre;". That seems to work better than nowrap.

Upvotes: 0

Jeremy B.
Jeremy B.

Reputation: 9216

your problem appears to be here:

.PerformanceTable th
{
    width: 50px;
    border-left: solid 1px #00573D;
    border-top: solid 1px #00573D;

    /*background-color: #FFF;
    color: #00573D;*/
    vertical-align: top;


    /*height:28px;*/
}

IE is accepting your width: 50px and forcing it to be shorter. removing that line made it look correct for me. Give that a try

Upvotes: 2

Related Questions