Tables look fine in IE7, but not IE8

[Chrisj]

These tables look fine in IE7, but not in IE8. Can you help me? Thanks

 

<ul class="tableX">
        <li class="lt"><div><font color="#800000"><b>Number</font></div></li>
        <li class="rt"><div>Items</b></div></li>
        <li class="lt"><div>90</div></li>
        <li class="rt"><div>$5.00</div></li>
        <li class="lt"><div><font color="#800000"><b>Total</font></div></li>
        <li class="rt"><div>$5.00</b></div></li>
    </ul>
    <ul class="tableX">
         <li class="lt"><div><font color="#800000"><b>Number</font></div></li>
         <li class="rt"><div>Items</b></div></li>
         <li class="lt"><div>180</div></li>
         <li class="rt"><div>$10.00</div></li>
         <li class="lt"><div><font color="#800000"><b>Total</font></div></li>
         <li class="rt"><div>$10.00</b></div></li>
    </ul>
    <ul class="tableX">
         <li class="lt"><div><font color="#800000"><b>Number</font></div></li>
         <li class="rt"><div>Items</b></div></li>
         <li class="lt"><div>270</div></li>
         <li class="rt"><div>$15.00</div></li>
         <li class="lt"><div><font color="#800000"><b>Total</font></div></li>
         <li class="rt"><div>$15.00</b></div></li>
    </ul>
    <ul class="tableX">
         <li class="lt"><div><font color="#800000"><b>Number</font></div></li>
         <li class="rt"><div>Items</b></div></li>
         <li class="lt"><div>360</div></li>
         <li class="rt"><div>$20.00</div></li>
         <li class="lt"><div><font color="#800000"><b>Total</font></div></li>
         <li class="rt"><div>$20.00</b></div></li>
    </ul>
    <ul class="tableX">
         <li class="lt"><div><font color="#800000"><b>Number</font></div></li>
         <li class="rt"><div>Items</b></div></li>
         <li class="lt"><div>450</div></li>
         <li class="rt"><div>$25.00</div></li>
         <li class="lt"><div><font color="#800000"><b>Total</font></div></li>
         <li class="rt"><div>$25.00</b></div></li>
    </ul>Css code:

 

Css code:

 

ul.tableX {
    width:162px;
    float: left;
    margin:0 0 0px 5px;
    padding: 0;
    list-style: none;
    border: solid #000;
    border-width: 0 1px 1px 0;
}
.tableX li.lt {
    float:left;
    border: solid #000;
    border-width: 1px 0 0 1px;
}
.tableX li.rt {
    float:right;
    border: solid #000;
    border-width: 1px 0 0 1px;
}
.tableX li div {
    width: 80px;
    text-align: center;
    color: #000;
    font-size: 12px;
    padding: .4em 0;
}

[haku]

I think the problem is that they don't look right.

[Chrisj]

If you can elaborate, that might be a little more helpful, thanks.

[haku]

That's exactly what I was thinking when I read your initial description of the problem, or rather lack of 

[Chrisj]

I appreciate your reply. I thought maybe someone might see why the code won't work in IE8 by just looking at it.

I'll try to provide a better explanation.

Their are two columns in each table. In IE7 the rows in the first column are perfectly adjacent to the rows in the second column. Like this:

 

Number  Items

90          $5.00

Total        $5.00

 

But in IE8 the rows in the first column do not line up perfectly adjacent to the rows in the second column. 

It appears something like this:

 

Number  Items

90          space

Total      $5.00

space    $5.00

 

The "space" is only about 1/4 of the size of the other column boxes. The "space" is more like a gap.

Why does IE8 add these gaps? Any help to remedy this will be appreciated. Thanks.

 

 

 

[rajivgonsalves]

change your  width:162px; to  width:163px; thats one solution. not sure why but the spacing is a little different in IE8

[Chrisj]

Thanks for your reply.

 

I changed the width 162px to  width:163px, however this did not solve the issue.

 

Any other suggestions will be appreciated.

[vinpkl]

dont use so many divs inside list elements.

 

they both are block level elements and will disturb your structure everytime.

 

vineet

[haku]

Your code is definitely very invalid. You can't use blocks inside list elements, and you have <b> tags overlapping other tags (ex this is invalid: <p><b></p></b> because you are overlapping the tags) and you are using the deprecated font tag.

 

Validate the code at the w3c site, and you will probably find that your problem goes away.

[JustLikeIcarus]

Honestly your trying to display Tabular data. Therefore I think you will see better results using actual tables instead of trying to emulate them with lists.

[Chrisj]

Thanks for your replies. can you please give me an example of "using actual tables instead of trying to emulate them with lists" and an example of "dont use so many divs inside list elements"?  thanks again

[JustLikeIcarus]

Heres your data in an html table.

<table>
  <thead>
    <tr><th>Number</th><th>Items</th></tr>
  </thead>
  <tbody>
    <tr><td>90</td><td>$5.00</td></tr>
    <tr><td>Total</td><td>$5.00</td></tr>
  </tbody>
</table>

[Chrisj]

Thanks again for your help. The orginal code in this thread (that looked good in IE7) displayed five two-column tables horizontal across the page.

 

I added your table code to the web page to test it:

[<table1>
<thead>
<tr><th>Number</th><th>Items</th></tr>
</thead>
<tbody>
<tr><td>90</td><td>$5.00</td></tr>
<tr><td>Total</td><td>$5.00</td></tr>
</tbody>
</table>

<table2>
<thead>
<tr><th>Number1</th><th>Items1</th></tr>
</thead>
<tbody>
<tr><td>90</td><td>$5.00</td></tr>
<tr><td>Total</td><td>$5.00</td></tr>
</tbody>
</table>

 

And I tried to modify the css code to possibly work with the table code:

 

	.table1{
    width:232px;
    float: left;
    clear:left;
    margin:0 0 20px 0;
    padding: 0;
    list-style: none;
    border: solid #000;
    border-width: 0 1px 1px 0;
}
table1 li.lt {
    float:left;
    width: 115px;
    border: solid #000;
    border-width: 1px 0 0 1px;
}
.table1 li.rt {
    float:right;
    width: 115px;
    border: solid #000;
    border-width: 1px 0 0 1px;
}
.table1 li div {
    width: 110px;
    text-align: center;
    color: #000;
    font-size: 12px;
    padding: .4em 0;
}		

	.table2{
	    width:232px;
	    float: left;
	    clear:left;
	    margin:0 0 20px 0;
	    padding: 0;
	    list-style: none;
	    border: solid #000;
	    border-width: 0 1px 1px 0;
}

	table2 li.lt {
	    float:left;
	    width: 115px;
	    border: solid #000;
	    border-width: 1px 0 0 1px;
	}
	.table2 li.rt {
	    float:right;
	    width: 115px;
	    border: solid #000;
	    border-width: 1px 0 0 1px;
	}
	.table2 li div {
	    width: 110px;
	    text-align: center;
	    color: #000;
	    font-size: 12px;
	    padding: .4em 0;
}

 

But of course it doesn't look good. If you would like to provide more guidance it will be greatly appreciated.

 

Thanks

 

 

[JustLikeIcarus]

Well first "table1 table2" are not valid html tags.  If you want to float tables to the left next to each other you will need to remove the "clear:left" style that you have since its canceling out your float.

[Chrisj]

Thanks for your reply and guidance.

So if I have this code (below) on the page,

how do I identify it and differentiate it from other another table in css?

Thanks again.

 

 

<table>
<thead> 
<tr><th>Number</th><th>Items</th></tr>
</thead>
<tbody>
<tr><td>90</td><td>$5.00</td></tr>
<tr><td>Total</td><td>$5.00</td></tr>
</tbody>
</table>

 

[JustLikeIcarus]

Give them an id attribute like <table id="tab1"> the in the css you do #tab1{ }

[Chrisj]

Thanks for all of your help. I have these tables now side by side, like this:

 

<table id="tab1">
<thead>
<tr><th>Number</th><th>Items</th></tr>
</thead>
<tbody>
<tr><td>90</td><td>$5.00</td></tr>
<tr><td>Total</td><td>$5.00</td></tr>
</tbody>
</table>

<table id="tab1">
<thead>
<tr><th>Number</th><th>Items</th></tr>
</thead>
<tbody>
<tr><td>90</td><td>$5.00</td></tr>
<tr><td>Total</td><td>$5.00</td></tr>
</tbody>
</table>

 

 

With the css code like this:

		
	#tab1{
		    width:100px;
		    float: left;
		    margin:0 0 20px 0;
		    padding: 0;
		    border: solid #000;
    		    border-width: 1px 1px 1px 1px;
	}

 

This puts a border around each table, but in my orginal code I had each variable in it's own bordered "cell"?

Can you help me put a vertical line seperating columns and a line seperating rows?

 

Thanks again.

 

[JustLikeIcarus]

First, you cant have multiple items with the same id. if you want to style those 2 tables with "tab1" then change it to class="tab1" and the css to

 

.tab1 {
             width:100px;
             float: left;
             margin:0 0 20px 0;
             padding: 0;
              border-collapse:collapse;
             border: 1px solid #000;
             }

.tab1 th, .tab1 td {
border: 1px solid #000;
}

[Chrisj]

Thank you again for your assistance. I changed the css code to what you suggested (below),

but now it seems the tables are aligned verically, instead of across the page, and they have no border, like this:

 

Number Items

90          $5.00

Total      $5.00

Number Items

90          $5.00

Total      $5.00

Number Items

90          $5.00

Total      $5.00

Number Items

90        $5.00

Total    $5.00

 

Any additionall help will be appreciated.

 

		.tab1 {             
	width:100px;             
	float: left;             
	margin:0 0 20px 0;             
	padding: 0;              
	border-collapse:collapse;             
	border: 1px solid #000;             }
	.tab1 th, .tab1 td { 
	border: 1px solid #000;
	}

[JustLikeIcarus]

This displayed fine for me.

.tab1 {
  width:100px;
  float: left;
  margin:0 20px 0 0;
  padding: 0;
  border-collapse:collapse;
  border: 1px solid #000;
}
.tab1 th, .tab1 td {
border: 1px solid #000;
}

 

 

<table class="tab1">
<thead>
<tr><th>Number</th><th>Items</th></tr>
</thead>
<tbody>
<tr><td>90</td><td>$5.00</td></tr>
<tr><td>Total</td><td>$5.00</td></tr>
</tbody>
</table>

<table class="tab1">
<thead>
<tr><th>Number</th><th>Items</th></tr>
</thead>
<tbody>
<tr><td>90</td><td>$5.00</td></tr>
<tr><td>Total</td><td>$5.00</td></tr>
</tbody>
</table>

[Chrisj]

Thank you, it displays correctly now, I must have copied it incorrectly. Thanks much.

 

Would you be intersted in telling me how to correctly center the information inside the table?

And how to change the color of the word "Items" correctly?

 

Thank you again.

[Chrisj]

I've got this part:  text-align:center;

 

How about changing the color of just the word "Items"  Thanks again.

 

I've been using <font color="#800000">Items</font>, isn't there a better way?

[JustLikeIcarus]

One way is to give the table cell a class like <th class="red-text"> then in the css do .red-text { color: #ff0000; } then whatever is in that cell will be red.

[Chrisj]

Thanks again for all of your help.

 

I'd like to also create a stand alone table, but when I used this code, it didn't appear like the previous ones that worked successfully. This new one Tab2 the cells all had their own borders, and it didn't have an overall border. Help please..thanks

 

 

<table class="tab2">
<thead>
<tr><th>Number</th><th class="red-text">Item</th></tr>
</thead>
<tbody>
<tr><td>5</td><td>A</td></tr>
<tr><td>Total</td><td>5A</td></tr>
</tbody>
</table>

 

		#tab2 {  
	width:170px;  
	float: left;  
	text-align:center;
	margin:0 10px 0 0;  
	padding: 5;  
	border-collapse:collapse;  
	border: 1px solid #000;
	}
	#tab2 th, .tab2 td { 
	border: 1px solid #000;
	}

 

 

[JustLikeIcarus]

It looks like you need to do a little reading on html and css. Take a look at the differences in the id attribute and the class attribute for html elements as well.  A good place for learning more about css is http://www.w3schools.com/css/default.asp they have a section for html as well. I think that you'll be able to answer a lot of your questions by just taking an hour or two reading though the sites examples.  If after you do this you still are not sure how to do what your asking, let us know.