My website functions perfectly in Chrome and Firefox, but it's not rendering correctly in IE. I've fixed most of the bugs, but one issue remains unresolved. Currently, the image is displayed with the text bunched up next to it, while the table appears fine.
<div id="page">
<div id="slider">
<!-- Slider images go here -->
<div id="PhotoSlider">
<ul class="bjqs">
<li><img src="images/test2.png"></img></li>
<li><img src="images/test1.png"></img></li>
</ul>
</div>
<script>
$("#PhotoSlider").bjqs({
'height' : 286,
'width' : 1000,
'animationDuration' : 800,
'showMarkers' : true,
'useCaptions' : false,
'keyboardNav' : false,
'showControls' : false
});
</script>
</div>
<div id="content">
<div class="box">
<h1>Welcome!</h1><br/>
<p></p>
<p></p>
</div>
</div>
<div id="contentRight">
<p></p>
<p></p>
</div>
<div id="sidebar">
<img align="left" src="images/kidsSmiling1.png"></img><br>
<h2>Newsletter</h2>
<p>Sign up for the latest news and special offers</p>
<table>
<tr>
<td>First Name<req>*</req> </td>
<td><input id="firstName" name="firstName" type="text" style="width:180"/>
</tr>
<tr>
<td>Last Name<req>*</req> </td>
<td><input id="lastName" name="lastName" type="text" style="width:180"/>
</tr>
<tr>
<td>Email<req>*</req> </td>
<td><input id="email" name="email" type="text" style="width:180"/>
</tr>
</table>
<p align="middle"><input align="middle" type="submit" value="Submit" onclick="save()" style="width:65"></P>
<p><req>*</req> Required fields</p>
</div>
<br class="clearfix" />
<div id="media">
<img align="right" src="images/facebookLogo.png"></img> <img align="right" src="images/twitterLogo.png"></img>
</div>
</div>
</div>
<div id="footer">
Copyright © 2012 Kaysville Dental | <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="35615a5a415d715a56655440597558465b1b565a58">[email protected]</a>?Subject=Customer Inquiry">Email Us</a> | Phone:(800) 376-2241 | 690 Main Street. Kaysville, Utah
</div>
Unfortunately, I can't provide a live link as the site is only on localhost. The problem lies with the alignment of the image and text below it. The CSS code for this section is as follows:
#sidebar {
background: white;
padding: 0px 5px 0px 50px;
margin-left: 0;
border-right: 1px solid #C0C0C0 ;
float: left;
width: 312px;
}
#sidebar p {
font-size: 12px;
margin-bottom: 0.5em
}
#sidebar img{
margin-bottom: 1.5em;
}
#sidebar req {
font-size: 12px;
color: red;
}
#sidebar td{
padding: 0px 0px 10px 0px;
font-size: 14px;
}
#sidebar h2{
text-transform: uppercase;
}
#contentRight {
background: white;
padding: 0px 50px 0px 0px;
float: right;
width: 550px;
}
The "contentRight" division should be aligned to the right of the sidebar. The sidebar contains an image and a small form, while the content on the right side consists of just text.