Page 1 of 1

Problem with css bar showing correct in explorer

Posted: Tue Jun 22, 2010 9:35 am
by aka.snowball
Hi.

I have the following code.

Code: Select all

<div id="coveregeOverview"><div class="graph">
    <div class="bar_low" style="width: 3%;" TITLE="0 %"> -3%</div></div>
</div>
And the following css

Code: Select all

	.graph { 
        position: relative;
        width: 150px; 
        border: 1px solid #000000; 
        padding: 2px;
		background: #f1f1f1;

    }



	.bar_low{
	background: #ff0000;
	}

    .graph .bar .bar_low { 
        display: block;
        position: relative;
        text-align: center; 
        color: #333; 
        height: 2em; 
        line-height: 2em;
				
    }
    .graph span { position: absolute; left: 1em; }

It is shown correct in firefox and in opera, but its not showing as I want it in internet explorer.

You can look how its shown
http://img145.imageshack.us/img145/5712/wrongright.jpg

I know that if you use a "-" sign and there is a low width percentage (in my case 3) this "error" occurs, but not when it comes to bigger numbers such as 50%+.

Anyone has a suggestion on how I can get rid of this annoying "error" in internet explorer? :)

Re: Problem with css bar showing correct in explorer

Posted: Tue Jun 22, 2010 9:53 am
by Weirdan
My best guess:

Code: Select all

.graph .bar, .graph .bar_low {
   word-wrap: normal;
   white-space: nowrap;
}

Re: Problem with css bar showing correct in explorer

Posted: Tue Jun 22, 2010 10:12 am
by aka.snowball
Sorry didn't work :(