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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.