Jump to content

Tables look fine in IE7, but not IE8


Chrisj

Recommended Posts

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;
}

Link to post
Share on other sites

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.

 

 

 

Link to post
Share on other sites

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.

Link to post
Share on other sites

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

Link to post
Share on other sites

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

 

 

Link to post
Share on other sites

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>

 

Link to post
Share on other sites

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.

 

Link to post
Share on other sites

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;
}

Link to post
Share on other sites

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;
	}

Link to post
Share on other sites

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>

Link to post
Share on other sites

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.

Link to post
Share on other sites

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;
	}

 

 

Link to post
Share on other sites

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.

Link to post
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.