Home | Contact Us | FAQ | Search & Site Map | Link to Us
Sign In | Join | Other 45 Sites in Network
HomeAnnouncementsFree MagazinesWhite PapersSubmit Content
Discussion GroupsASP.NETWindows FormsLanguages.NET FrameworkVisual Studio.NET
Articles.NET FrameworkASP.NETToolsWindows Forms
.NET DirectoryOpen Source ProjectsUser GroupsWeb Resources
Related Topics
Visual Basic 6SQL ServerMS AccessOther DB ProductsMS Server ProductsMore Topics ...

.NET Forum / ASP.NET / General / October 2007

Tip: Looking for answers? Try searching our database.

Firefox wierd align issues

Thread view: 
Enable EMail Alerts  Start New Thread
Thread rating: 
VB Programmer - 13 Oct 2007 14:13 GMT
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 />
               <asp:PasswordRecovery 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" />
               </asp:PasswordRecovery>
                 <br />
              </td>
    </tr>
   </table>
           </td>
       </tr>
   </table>
</asp:Content>
Göran Andersson - 13 Oct 2007 14:47 GMT
> 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!
>
[quoted text clipped - 10 lines]
>                 <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.

Signature

Göran Andersson
_____
http://www.guffa.com

VB Programmer - 13 Oct 2007 14:52 GMT
Thanks Göran.  So, how should I center these elements?  What is the standard
way?  Thanks!

>> 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,
[quoted text clipped - 31 lines]
> elements. According to the standards, it only centers inline elements, but
> IE incorrectly centers block elements too.
Göran Andersson - 13 Oct 2007 18:32 GMT
> 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>

Signature

Göran Andersson
_____
http://www.guffa.com


Free Magazines

Get these publications absolutely FREE for up to 12 months. There are no hidden fees and no obligation. Simply choose a title, complete the application form and submit it. Read more ...

Oracle MagazineNetwork ComputingComputer WorldBio-IT WorldeWeekInformation WeekInfosecurity
 
Sign In
Join
My Latest Posts
My Monitored Threads
My Blog
My Photo Gallery
My Profile
My Homepage

Start New Thread
Enable EMail Alerts
Rate this Thread



©2008 Advenet LLC   Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.