Firefox wierd align issues

[VB Programmer]

Have you noticed that designing in VS.NET 2005 is great for IE but when you
view the browser in Firefox alot of the items dont align properly, such as
the login control, change password control, listboxes, etc...?

Anyone know why this is and how to fix it? I'm using the latest versions...

(From now on I'm designing using FF as my main browser just to make sure
it's compatible...)

Thanks!

If you want an example, here it is...

The Login and Forget Password are LEFT ALIGNED (incorrect). All the other
stuff is centered correctly...

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<table width="100%" style="text-align:center">
<tr>
<td>
<table style="width: 100%; text-align:center"
cellspacing="1">
<tr>
<td>
<asp:Login ID="Login1" runat="server" BackColor="#F7F6F3"
BorderColor="#E6E2D8" BorderPadding="4"
BorderStyle="Solid" BorderWidth="1px"
Font-Names="Verdana" Font-Size="Small"
ForeColor="#333333"
DestinationPageUrl="~/LoginRedirect.aspx">
<TitleTextStyle BackColor="#5D7B9D" Font-Bold="True"
Font-Size="0.9em" ForeColor="White" />
<InstructionTextStyle Font-Italic="True"
ForeColor="Black" />
<TextBoxStyle Font-Size="0.8em" />
<LoginButtonStyle BackColor="#FFFBFF"
BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px"
Font-Names="Verdana" Font-Size="0.8em"
ForeColor="#284775" />
</asp:Login>
<br />
<asp:HyperLink ID="HyperLink1" runat="server"
NavigateUrl="~/LoginRedirect.aspx" Font-Names="verdana"
Font-Size="Small">Click here if you're already logged in...</asp:HyperLink>
<br />
<br />
<asp:HyperLink ID="HyperLink2" runat="server"
NavigateUrl="~/NewUser.aspx" Font-Names="verdana" Font-Size="Small">Need an
account? Click here. (Only pre-approved existing clients.)</asp:HyperLink>
<br />
<br />
<aspasswordRecovery ID="PasswordRecovery1" runat="server"
BackColor="#F7F6F3" BorderColor="#E6E2D8"
BorderPadding="4" BorderStyle="Solid" BorderWidth="1px"
Font-Names="Verdana"
Font-Size="Small">
<InstructionTextStyle Font-Italic="True"
ForeColor="Black" />
<SuccessTextStyle Font-Bold="True" ForeColor="#5D7B9D"
/>
<TextBoxStyle Font-Size="0.8em" />
<TitleTextStyle BackColor="#5D7B9D" Font-Bold="True"
Font-Size="0.9em" ForeColor="White" />
<SubmitButtonStyle BackColor="#FFFBFF"
BorderColor="#CCCCCC" BorderStyle="Solid"
BorderWidth="1px" Font-Names="Verdana"
Font-Size="0.8em" ForeColor="#284775" />
</aspasswordRecovery>
<br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</asp:Content>

 

[=?ISO-8859-1?Q?G=F6ran_Andersson?=]

Have you noticed that designing in VS.NET 2005 is great for IE but when you
view the browser in Firefox alot of the items dont align properly, such as
the login control, change password control, listboxes, etc...?

That's because you rely on rendering bugs in IE. That is quite common if
you make the page for IE. It actually renders incorrectly in IE and
correctly in the other browsers.

Anyone know why this is and how to fix it? I'm using the latest versions...

(From now on I'm designing using FF as my main browser just to make sure
it's compatible...)

That's a good method. It's much simpler to make a standards compliant
code work with the quirks in IE, than the other way around.

Thanks!

If you want an example, here it is...

The Login and Forget Password are LEFT ALIGNED (incorrect). All the other
stuff is centered correctly...

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<table width="100%" style="text-align:center">
<tr>
<td>
<table style="width: 100%; text-align:center"
cellspacing="1">

There is your problem this time. You are using text-align to center the
elements. According to the standards, it only centers inline elements,
but IE incorrectly centers block elements too.

 

[VB Programmer]

Thanks Göran. So, how should I center these elements? What is the standard
way? Thanks!

 

[=?ISO-8859-1?Q?G=F6ran_Andersson?=]

Thanks Göran. So, how should I center these elements? What is the standard
way? Thanks!

You can use margins. Example:

<style>
..container { background: #eee; }
..centered { margin: 0 auto; width: 200px; background: #ccc; }
</style>

<div class="container">
<div class="centered">Centered element</div>
</div>