Nice problem!! :mrgreen:
Here is what's going on:
You have several nested blocks. the first one has its content centered with the deprecated but useful
align="center". Three levels deeper is the
class="login_l" div that needs to be left aligned, and the code you are using for that lies 2 levels back in the
class="page" div styled with
text-align:left.
This is causing an interpretation puzzle in which every browser does its best to provide a render but is left either guessing or using its own faulty propietary scheme (by the latter I mean IE).
As far as I know text-align - and the align attribute for that matter - are supposed to style inline elements and probably shouldn't style block elements.
Somewhere in there IE and FF do the equations to produce the result you want (although I suspect they are using different equations) and Opera's opinion differs. Opera is accepting your initial
align=center as block-wide and disregarding your second
text-align:left for block styling.
The solution (or at least how I fixed it):
1. Change the deprecated
align=center to
text-align:center
2. Add a centering style to the
class=page div
(margin-left:auto; margin-right:auto )
The result is all browsers rendering the same (hopefully exactly the same you had initially).
Here is sample code that illustrates this whole thing, I added borders to the divs to show what I'm talking about. The first one is the original and the second one is the fix:
<style>
.login_l
{
background: #ECECEC;
height: 32px;
width: 697px;
}
.login_r
{
height: 32px;
text-align: center;
}
</style>
<div align=center style="border:1px solid red">
Dummy text Dummy textDummy text Dummy text Dummy textDummy text Dummy text Dummy textDummy text Dummy text Dummy textDummy text Dummy
<div class="page" style="width:887px; text-align:left; border:1px solid blue ">
<div style="border:1px solid cyan; width:750px "><br />
<div class="login_l" style="clear:both; border:1px solid green; ">
<div class="login_r" style="border:1px solid yellow ">
<form action="index.php" method="get">
<table cellpadding="5" cellspacing="0" border="0" width="100%" align="center" >
<tr>
<td><div class="cp_heading"> <a href="/techtalkforums/faq.php?faq=daniweb_faq">About Us</a> - <a href="/techtalkforums/sendmessage.php">Contact Us</a> - <strong><a href="/mediakit/">Advertising</a></strong> - <a href="/techtalkforums/archive/">Archive</a> - <a href="/techtalkforums/faq.php?faq=privacy_policy">Privacy Statement</a> </div></td>
<td align="right"><div class="cp_heading"> All times are GMT. The time now is <span class="time">05:53 AM</span>. </div></td>
</tr>
</table>
</form>
</div>
</div>
<br />
<div style="width:697px"> <span style="float:right"> <a href="#top" onClick="self.scrollTo(0, 0); return false;">Return To Top</a> </span> ©2003 - 2006 DaniWeb LLC
<div class="smallfont"> vBulletin Copyright ©2000 - 2006, Jelsoft Enterprises Ltd. </div>
<div class="smallfont"> </div>
</div>
<p> </p>
</div>
</div>
</div>
<p> </p>
<div style=" text-align:center;border:1px solid red">
Dummy text Dummy textDummy text Dummy text Dummy textDummy text Dummy text Dummy textDummy text Dummy text Dummy textDummy text Dummy
<div class="page" style="width:887px; text-align:left; margin-left:auto; margin-right:auto ; border:1px solid blue ">
<div style="border:1px solid cyan; width:750px "><br />
<div class="login_l" style="clear:both; border:1px solid green; ">
<div class="login_r" style="border:1px solid yellow ">
<form action="index.php" method="get">
<table cellpadding="5" cellspacing="0" border="0" width="100%" align="center" >
<tr>
<td><div class="cp_heading"> <a href="/techtalkforums/faq.php?faq=daniweb_faq">About Us</a> - <a href="/techtalkforums/sendmessage.php">Contact Us</a> - <strong><a href="/mediakit/">Advertising</a></strong> - <a href="/techtalkforums/archive/">Archive</a> - <a href="/techtalkforums/faq.php?faq=privacy_policy">Privacy Statement</a> </div></td>
<td align="right"><div class="cp_heading"> All times are GMT. The time now is <span class="time">05:53 AM</span>. </div></td>
</tr>
</table>
</form>
</div>
</div>
<br />
<div style="width:697px"> <span style="float:right"> <a href="#top" onClick="self.scrollTo(0, 0); return false;">Return To Top</a> </span> ©2003 - 2006 DaniWeb LLC
<div class="smallfont"> vBulletin Copyright ©2000 - 2006, Jelsoft Enterprises Ltd. </div>
<div class="smallfont"> </div>
</div>
<p> </p>
</div>
</div>
</div>
I hope it makes sense.
Unsolved 
Offline 
