Layout problem only in ie8

vaibhavbthl · 11-15-2012, 08:46 AM

Hello

I have created a page using css on my wordpress site. My code is working fine in all browsers except ie8. It is working fine in ie9 also. Following is a screenshot in ie9 - http://www.images.rudragems.com/screenshot%20ie9.jpg
Following is a screenshot in ie8 - http://www.images.rudragems.com/screenshot%20ie8.jpg

I have learned css by searching everything on google and by reading expert articles. Following is my css and html code and i would be very grateful if you can point out the mistakes in it.

Code:

<script type="text/javascript">
 var addthis_config = {"data_track_clickback":true};
 </script> <script type="text/javascript"
 src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-501e397469cf10f2"></script>
<style type="text/css">
.imagebox
{
    width: 505px;
    float: left;
}

.righttextbox
{
    text-align: justify;
    width: 440px;
    float: right;
}

.table
{
    margin-left: 17px;
    border: 10px solid #006;
}
.table ul
{
    float:left;
    margin:0;
    padding:0;
}
.table ul li
{
    list-style:none;
    padding:5px 10px;
}
.table ul li.title
{
    font-size:25px;
    font-family:Times New Roman;
    font-weight:bold;
}
.table ul li.odd
{
    font-family:Times New Roman;
    font-size:25px;
    width:100px;
}
.table ul li.even
{
    font-family:Times New Roman;
    font-size:25px;
    width:5px;
}
.table ul li.quantity
{
    font-family:Times New Roman;
    font-size:25px;
    height:165px;
}
.table ul li.field
{
    font-size:20px;
    font-family:Times New Roman;
    font-weight:bold;
    padding-top:0.1em;
}
.table ul li.comments
{
    font-family:Times New Roman;
    font-size:20px;
    padding-top:7px;
    width:280px;
    height:375px;
    text-align:justify;
}

.button {
    border: 1px solid #006;
    background: #2982c5;
}
.button:hover {
    border: 1px solid #f00;
    background: #17599F;
}
</style>

Following is the html

Code:

<div class="imagebox"><table name=SlideshowOuterTable  align="left" border="0" cellspacing="0" cellpadding="0" style="background-color:none; "><tr><td align="center" oncontextmenu="return false" ondrag="return false" onmousedown="return false" >
<table width="510"  border="0" cellspacing="0" cellpadding="0" ><tr valign="bottom">
<td align="center" width="500" height="500"><img src="http://siteimages.rudragems.com/Rudraksha/Premium/8+Mukhi+Rudraksha.jpg" id="clicpicLg867" clicpic="v2web" width="500" height="500" alt="8 Mukhi Rudraksha" style="border:0px ridge white"></td></tr><tr><td><p style="width:100%; font-family:sans-serif; font-size:14; background-color:transparent; color:#000000; text-align:center" id="caption867" >Click to enlarge </p></td></tr><tr><td align=center><div id="theSlider" style="overflow:auto; width:500px; height:160px; scrollbar-base-color:none; "><nobr><a href="http://siteimages.rudragems.com/Rudraksha/Premium/8+Mukhi+Rudraksha.jpg" onclick="bigPic=document.getElementById('clicpicLg867'); bigPic.src='http://siteimages.rudragems.com/Rudraksha/Premium/8+Mukhi+Rudraksha.jpg'; bigPic.width=500; bigPic.height=500; document.getElementById('caption867').innerHTML='Click to enlarge'; return false;"><img src="http://siteimages.rudragems.com/Rudraksha/Premium/8+Mukhi+Rudraksha.jpg" width="150" height="150" hspace="2" border="0" style="border:0px ridge white" src="http://siteimages.rudragems.com/Rudraksha/Premium/8+Mukhi+Rudraksha.jpg" ></a><a href="http://siteimages.rudragems.com/Rudraksha/Premium/8+Mukhi+Rudraksha+Side.jpg" onclick="bigPic=document.getElementById('clicpicLg867'); bigPic.src='http://siteimages.rudragems.com/Rudraksha/Premium/8+Mukhi+Rudraksha+Side.jpg'; bigPic.width=500; bigPic.height=500; document.getElementById('caption867').innerHTML='Click to enlarge'; return false;"><img src="http://siteimages.rudragems.com/Rudraksha/Premium/8+Mukhi+Rudraksha+Side.jpg" width="150" height="150" hspace="2" border="0" style="border:0px ridge white" src="http://siteimages.rudragems.com/Rudraksha/Premium/8+Mukhi+Rudraksha+Side.jpg" ></a><a href="http://siteimages.rudragems.com/Rudraksha/Premium/8+Mukhi+Rudraksha+Back.jpg" onclick="bigPic=document.getElementById('clicpicLg867'); bigPic.src='http://siteimages.rudragems.com/Rudraksha/Premium/8+Mukhi+Rudraksha+Back.jpg'; bigPic.width=500; bigPic.height=500; document.getElementById('caption867').innerHTML='Click to enlarge'; return false;"><img src="http://siteimages.rudragems.com/Rudraksha/Premium/8+Mukhi+Rudraksha+Back.jpg" width="150" height="150" hspace="2" border="0" style="border:0px ridge white" src="http://siteimages.rudragems.com/Rudraksha/Premium/8+Mukhi+Rudraksha+Back.jpg" ></a></nobr></div></td></tr></table></td></tr></table>
<!-- large image preloader, backgrounds often load after other page content -->
<div style="display:none">
</div>
<div style="padding-left:75px;">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-501e34d25f606942"></script>
<!-- AddThis Button END --></div>
</div>
<div class="righttextbox"><div class="table">
<ul>
<li class="odd">Product</li>
<li class="odd">Condition</li>
<li class="odd">Quality</li>
<li class="odd">Origin</li>
<li class="odd">Size</li>
<li class="odd">Price</li>
<li class="quantity">Quantity</li>
<li class="odd">Free Gifts</li>
<li class="odd">Comments</li>
</ul>
<ul>
<li class="even">:</li>
<li class="even">:</li>
<li class="even">:</li>
<li class="even">:</li>
<li class="even">:</li>
<li class="even">:</li>
<li class="quantity">:</li>
<li class="even">:</li>
<li class="even">:</li>
</ul>
<ul>
<li class="title"><h1 style="font-size:25px; font-family:times new roman; font-weight:bold; line-height:16px; margin-top:4px;">8 Mukhi Rudraksha</h1></li>
<li class="title">New</li>
<li class="title">Premium Quality</li>
<li class="title">Nepal</li>
<li class="title">20 mm / 2.0 cms (approx)</li>
<li class="title"><span class="WebRupee">Rs </span>1,000 / US $18</span></li>
<li class="field"><form action='https://www.2checkout.com/checkout/purchase' method='post'>

	    <input type='hidden' name='sid' value='1548684'>

	    <input type='hidden' name='quantity' value='1'>

	    <input type='hidden' name='product_id' value='9'>

            <input name='quantity' size='5' type='text' value='1'> More than 100 available
<li></li>
            <input type="submit" value="Buy it Now" style="width:150px; height:40px; float:left; font-size:20px;" class="button" /></form></li> <b>Or</b>
<li></li>
<li><a href="http://www.rudragems.com/premium-quality-8-mukhi-rudraksha-pay-via-cash"><input type="submit" value="Pay by Cash" style="width:150px; height:40px; float:left; font-size:20px;" class="button" /></a></li>
<li></li>
<li></li>
<li></li>
<li class="title">4,5,6 Mukhi Rudraksha</li>
<li class="comments">We can also get this Rudraksha certified from lab at an additional cost of  <span class="WebRupee">Rs</span> 250.
We Do Not Use Sample Pictures. All Pictures are of the Actual Rudraksha on Sale however there can be a situation when someone else purchases this Rudraksha before we change the pictures. To avoid this, please drop us an email at <a href="mailto:support@rudragems.com?Subject=Rudraksh%20Pictures">support@rudragems.com</a> and we will gladly send you pictures of the current bead but most of the times you will get the same bead.</li>
</ul>
</div></div>

Thank You & Regards
Vaibhav Bathla