SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css problem in internet explorer

    Hi.

    I have the following code.

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

    Code:
    	.graph { 
            position: relative;
            width: 150px; 
            border: 1px solid #000000; 
            padding: 2px;
    		background: #f1f1f1;
    
        }
    Code:
    	.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?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
                
    
    
            <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

    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.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have tested the

    Code:
        .graph .bar .bar_low { 
    
    		word-wrap: normal;
    		white-space: nowrap;
    				
        }
    with no success

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://img145.imageshack.us/img145/5712/wrongright.jpg

    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

    Code:
    <!--[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

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another quastion, where do i put the

    Code:
    <!--[if IE]>
      <style type="text/css">
        @import 'iestyle.css';
      </style>
    <![endif]-->
    In the head before the
    Code:
    <link href="basictest.css" rel="stylesheet" type="text/css">
    ?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •