Css problem in internet explorer

Content
1

Hi.

I have the following code.

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

And the following css


	.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
here

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? :slight_smile:

2

Another quastion, where do i put the

<!--[if IE]>
  <style type="text/css">
    @import 'iestyle.css';
  </style>
<![endif]-->

In the head before the

<link href="basictest.css" rel="stylesheet" type="text/css">

? :slight_smile:

3

[http://img145.imageshack.us/img145/5712/wrongright.jpg"]http://img145.imageshack.us/img145/5712/wrongright.jpg]([url)

If you look at the picture, the reason for setting the width of the tables is so that you can see how much of the bar that is filled with color, as well as you see it with numbers. This is how i want it to be. The problem occurs, just as I said only in internet explorer.

I know that you can use something like this to get around the problem

<!--[if IE]>
  <style type="text/css">
    @import 'iestyle.css';
  </style>
<![endif]-->

But I don’t know what to write in ‘iestyle.css’ to correct it. Because I do want the width of the color in the <tr> to be the same as the numbers inside it.

And everything that i use in css and html code is posted :slight_smile:

4

I have tested the

    .graph .bar .bar_low { 

		word-wrap: normal;
		white-space: nowrap;
				
    }

with no success

5 
            


        <table id="results">            <thead id="head"><tr>
    <th id="module">Testcase
</th>
    <th id="coverage">cases
</th>
    <th id="oldcoverage">(was)
</th>
    <th id="diffrencecoverage">(diffrence)
</th>


</tr>

</thead>
<tbody id="add_templ">
                <tr class="coverage-row increaseCover notcovered">
                    <td>add_c
</td>
                    <td class="graph"> 
					
    <div class="bar_lowMid" style="width: 30%;" TITLE="0 %"> 30%</div>
                       
                    </td>
                    <td class="graph">    
    <div class="bar_low" style="width:0%;" TITLE="0 %"> 0%</div>
                    </td>
					 <td  class="graph">   
    <div class="bar_increase" style="width:30%;" TITLE="0 %"> 30%</div>
                    </td>

                </tr>

            </tbody>
</table>

I am using a table for this :slight_smile:

The reason for 3 % is that i want it to show the diffrence, for example I take the current percentage minus previous percentage to see the diffrence.
And the width is the diffrence.

So the width is how well covered the tests are. :slight_smile:

6

Your code is a bit confusing here. 3% is not very wide. It’s not clear to me how you have set things up.

Why aren’t you using a table for this?

7

The reason for 3 % is that i want it to show the diffrence, for example I take the current percentage minus previous percentage to see the diffrence.
And the width is the diffrence.

I was referring to stuff like this

style=“width: 3%;”

style=“width:0%;”

You don’t have to reflect the date in the style declarations.

The code you posted here doesn’t seem to relate much to what you posted originally. It’s a bit confusing. Why not post the whole table code and all the css relating to it?