Hi there,
I'm having a problem with one of my layouts when it's displayed in IE.
There appears to be an alignment issue to the left of the div.col-left (coloured in yellow). I'm really not sure why it is showing up in IE, and I've checked my code over and can't really find anything that would explain why it's there. I was thinking it could possibly be fixed by display:inline but unfortunately this doesn't work
Anyone any ideas as to why it's showing up only in IE?
HTML and CSS:-
Thanks for the helpCode:<html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1"> <style> body{ padding:0px; margin:10px; } .container{ align:center; width:800px; background-color:transparent; } .header{ width:100%; height:90px; background-color:#ff0000; margin-bottom:1px; } p{ font-family:Arial; font-size:12px; color:#64a8d8; } img.logo{ margin-top:16px; margin-left:15px; float:left; } img.navbar{ margin-bottom:10px; } .col-left{ width:239px; float:right; padding:0 0 0 11px; background-color:#ffff00; } .col-right{ width:530px; float:right; padding:0 10px 0 10px; } .col-right h1{ font-family:Arial; font-size:22px; color:#3177b7; margin:0px; } .col-right p{ font-family:Arial; font-size:12px; color:#64a8d8; } .col-right p.blackboard{ margin-left:270px; margin-top:-55px; } .footer{ width:100%; height:50px; clear:both; } img.welcome_child{ float:left; margin-right:10px; } img.clear-bar{ margin-left:15px; margin-top:-10px; padding-top:0px; } img.titles{ margin-top:15px; } .researchmore-cols{ width:137px; float:left; margin-left:30px; display:inline; padding-left:2px; } .researchmore-cols h1{ font-family:Arial; font-size:12px; color:#9cc7e7; font-weight:normal; } .researchmore-cols p{ font-family:Arial; font-size:11px; color:#64a8d8; margin-top:2px; } img.tryitnowforfree{ margin-bottom:10px; } ul{ font-family:Arial; font-size:12px; color:#64a8d8; line-height:17px; margin-bottom:20px; } table.login{ float:right; margin-right:20px; font-family:Arial; font-size:10px; color:#58a0d6; padding-top:0px; } </style> <script type="text/javascript">sfm='';</script> <div align=center> </head><BODY><div class="container"> <div class="header"> <!--<table class="login" width="153" border="0"> <tr> <td colspan="2">MEMBERS AREA</td> </tr> <tr> <td width="58">Username</td> <td width="79"><input name="username" type="text" id="username" size="13" /></td> </tr> <tr> <td>Password</td> <td><input name="password" type="text" id="password" size="13" /></td> </tr> </table>--> </div> <table class="login" width="800" border="0" cellpadding="0" cellspacing="0" align=center> </table> <BR><BR> <div align=left> <div class="col-right"> <!-- id : 30 --> <div class=long><a name='UKTW30'></a><img class="welcome_child" src="images/ptanet/welcome_child.jpg"/> <h1>welcome</h1> <br/><br/> <b><a href="index.php?pg=23">Find out more</a></b> </p> <img src="images/ptanet/blackboard.jpg"/> <img src="images/title_researchmore.jpg" class="titles"/> <div class="researchmore-cols"> <img src="images/templates.jpg"/> <h1>Templates</h1> </div> <div class="researchmore-cols"> <img src="images/costcomparison.jpg"/> <h1>Cost Comparison</h1> </div> <div class="researchmore-cols"> <img src="images/easysetup.jpg"/> <h1>Easy set-up</h1> </div> </div></div></div> <div align=left> <div class="col-left"> <!-- id : 29 --> <div class=long><a name='UKTW29'></a><img class="tryitnowforfree" src="imagestryitnowforfree.jpg"/> </div><br clear=all> <!-- id : 28 --> <div class=long><a name='UKTW28'></a><p><img src="images/title_benefits.jpg"/><br> </div><br clear=all> <!-- id : 31 --> <div class=long><a name='UKTW31'></a><img src="images/bottomleftbox.jpg"/> </div></div></div> <div class="footer"></div> </div> </div> </div> </div></body></html>
James
Bookmarks