Home ›
ASP.NET Forums » General ASP.NET » Getting Started » Mozilla Nothing is Centered

Mozilla Nothing is Centered

Last post 05-18-2008 6:23 PM by JZoerman. 10 replies.

Sort Posts:

  • Mozilla Nothing is Centered

    05-16-2008, 9:44 PM
    • Loading...
    • mbanghart
    • Joined on 05-07-2008, 2:23 PM
    • Posts 8

    Hi,

     My ASP.NET 2.0 page displays perfectly in IE.  When I load it in FIrefox everything that should be centered (text, div tag) is not.  Everything is left justified.

     Any ideas?

     THanks
    Marc

  • Re: Mozilla Nothing is Centered

    05-16-2008, 10:29 PM
    • Loading...
    • jchandra
    • Joined on 05-15-2008, 5:36 AM
    • Jakarta, Indonesia
    • Posts 197

    What do you do to make the stuffs appear in center in IE?

    It's pretty hard to know what's wrong without seeing any HTML / CSS code. 

    Jimmy Chandra
    Blogging at Incoherent Rambling

    Mark this post as Answer if you think it helped you solve the problem.

  • Re: Mozilla Nothing is Centered

    05-17-2008, 1:18 AM
    • Loading...
    • shobhit rai
    • Joined on 05-10-2008, 4:52 AM
    • Mumbai
    • Posts 139

    hello

    i will suggest u to allign the site for firefox it will be fine with ie also, u can align the things through css only...or need to specify the align =center every where

    HAPPY CODING
    regards
    shobhit rai

  • Re: Mozilla Nothing is Centered

    05-17-2008, 2:13 AM
    • Loading...
    • JZoerman
    • Joined on 08-24-2006, 6:27 AM
    • Posts 128

    This example will work with all of the "big three"...

    Nest a div

     <div class="divParent">
       <div class="divContent">
       </div>
     </div>

    CSS

    .divParent
    {
        text-align: center;
        width: 100%;
        background-color: #7a88b2;
        margin: auto;
    }
    .divContent
    {
        text-align: center;
        margin: auto;
        width: 500px;
        height: 250px;
        background-color: #f1f1f1;
    }

    The trick here is setting margin: auto, hope this helps...

  • Re: Mozilla Nothing is Centered

    05-17-2008, 2:42 AM
    I had the same problem with FF. Now I fixed it. Margin auto is the key. http://ipinfo.info/netrenderer/ is a good tool to check how your site renders in different browsers without having to install them.
    Joseph James
    www.beforeyoubuy.co.uk

  • Re: Mozilla Nothing is Centered

    05-17-2008, 6:35 AM

     create 2 CSS ,one for Mozilla and another for IE and by the help of javascript detect the browser

    and then implement the CSS as for the browser 

    ======================================
    Regard,
    Pradeep Sahoo
    Sr. Sofware Developer
    Don't forget to click "Mark as Answer" on the post that helped you.

  • Re: Mozilla Nothing is Centered

    05-18-2008, 1:04 AM
    • Loading...
    • mbanghart
    • Joined on 05-07-2008, 2:23 PM
    • Posts 8

    Here is my code for the Master Page.  Pictures and text in my content pages are centered in Firefox.  The DIV's do not center though.

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MainContent.master.cs" Inherits="MainContent" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head runat="server">

    <link href="Stylesheets/OkaloosaText.css" rel="stylesheet" type="text/css" />

    <title>Okaloosa Rugby Football Club Homepage</title>

    </head>

    <body style="text-align: center" bgcolor="black">

    <form id="form1" runat="server">

    <div style="text-align: center">

    &nbsp;

    </div>

    <div style="z-index: 2; left: 1%; width: 789px; position: static; top: 35%; background-color: #000099;

    text-align: center; border-right: #000099 thin groove; padding-right: 1%; border-top: #000099 thin groove; padding-left: 1%; padding-bottom: 1%; border-left: #000099 thin groove; color: #ffffff; padding-top: 1%; border-bottom: #000099 thin groove;">

    <img src="Graphics/okaloosabannertrim.jpg" align="middle" border="2" alt="Okaloosa Rugby Football Club" /><br />

    <asp:Menu ID="MainMenu" runat="server" BackColor="Silver" ForeColor="#284E98" Orientation="Horizontal"

    Width="100%" DynamicHorizontalOffset="2" Font-Bold="True" Font-Names="Verdana" Font-Overline="False" Font-Size="1em" Font-Underline="False" StaticSubMenuIndent="10px">

    <Items>

    <asp:MenuItem Text="Home" Value="Home" NavigateUrl="~/Default.aspx"></asp:MenuItem>

    <asp:MenuItem Text="Schedule" Value="Schedule" NavigateUrl="~/Schedule.aspx"></asp:MenuItem>

    <asp:MenuItem Text="Directions" Value="Directions" NavigateUrl="~/Directions.aspx"></asp:MenuItem>

    <asp:MenuItem Text="Pictures" Value="Pictures" NavigateUrl="http://picasaweb.google.com/OkaloosaRugby" Target="_blank"></asp:MenuItem>

    <asp:MenuItem Text="About Us" Value="About Us" NavigateUrl="~/AboutUs.aspx"></asp:MenuItem>

    <asp:MenuItem Text="Links" Value="Links" NavigateUrl="~/Links.aspx"></asp:MenuItem>

    <asp:MenuItem Text="Forum" Value="Forum" NavigateUrl="http://okaloosarugby.org/forum/index.php" Target="_blank"></asp:MenuItem>

    <asp:MenuItem Text="Contact" Value="Contact" NavigateUrl="~/Contact.aspx"></asp:MenuItem>

    </Items>

    <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />

    <DynamicHoverStyle BackColor="#284E98" ForeColor="White" />

    <DynamicMenuStyle BackColor="#B5C7DE" />

    <StaticSelectedStyle BackColor="#507CD1" />

    <DynamicSelectedStyle BackColor="#507CD1" />

    <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />

    <StaticHoverStyle BackColor="#284E98" ForeColor="White" />

    </asp:Menu>

    <br />

    &nbsp;<br />

    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

    </asp:ContentPlaceHolder>

    <br />

    <table align="center" bgcolor="#ffffff" cellspacing="5" border="2" bordercolor="#000099">

    <tr>

    <td style="width: 100px">

    <img src="Graphics/cheers.jpg" alt="Cheers Sportsbar and Pub" /></td>

    <td style="width: 100px">

    <asp:HyperLink ID="HyperLink2" runat="server" ImageUrl="~/Graphics/LEGcolor343reg.jpg"

    NavigateUrl="http://www.legendaryinc.com/" Target="_blank" ToolTip="Legendary Realty">HyperLink</asp:HyperLink></td>

    </tr>

    </table>

    <br />

    <asp:Menu ID="BottomMenu" runat="server" Font-Names="Verdana" Font-Size="Small" ForeColor="White"

    Orientation="Horizontal" Width="100%">

    <Items>

    <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" Value="Home"></asp:MenuItem>

    <asp:MenuItem NavigateUrl="~/Schedule.aspx" Text="Schedule" Value="Schedule"></asp:MenuItem>

    <asp:MenuItem NavigateUrl="~/Directions.aspx" Text="Directions" Value="Directions"></asp:MenuItem>

    <asp:MenuItem NavigateUrl="http://picasaweb.google.com/OkaloosaRugby" Target="_blank"

    Text="Pictures" Value="Pictures"></asp:MenuItem>

    <asp:MenuItem NavigateUrl="~/AboutUs.aspx" Text="About Us" Value="About Us"></asp:MenuItem>

    <asp:MenuItem NavigateUrl="~/Links.aspx" Text="Links" Value="Links"></asp:MenuItem>

    <asp:MenuItem NavigateUrl="http://okaloosarugby.org/forum/index.php" Target="_blank"

    Text="Forum" Value="Forum"></asp:MenuItem>

    <asp:MenuItem NavigateUrl="~/Contact.aspx" Text="Contact" Value="Contact"></asp:MenuItem>

    <asp:MenuItem Text="Site Map" Value="Site Map" NavigateUrl="~/sitemap.html" Target="_blank"></asp:MenuItem>

    </Items>

    </asp:Menu>

    <br />

    <span style="font-size: 0.8em; font-family: Verdana">

    &nbsp;All content copyright of Okaloosa RFC 2008.&nbsp;

    <br />

    <asp:HyperLink ID="HyperLink1" runat="server" Font-Names="Verdana" Font-Underline="False"

    ForeColor="White" NavigateUrl="http://people.smu.edu/mbanghart/" Target="_blank">Web Design by Marc and Scooby 2008</asp:HyperLink></span></div>

    &nbsp;

    </form>

    </body>

    </html>

  • Re: Mozilla Nothing is Centered

    05-18-2008, 2:37 AM
    • Loading...
    • LockH
    • Joined on 03-25-2007, 2:58 PM
    • Scotland, where whisky has no e.
    • Posts 529

    FireFox doesn't like it if you put HorizontalAlign="Center" on GridViews etc, I think that gets rendered as a table with the align attribute, which is deprecated.  

    I had problems where I had two or three column layouts with divs floating left. Content of the second column was being displayed only after the bottom of the first column, even though the controls were easily narrow enough to fit in the second column. I cured it by removing ' HorizontalAlign="Center" ' from GridViews and FormViews, and 'align' from tables.

    It occurred to me later that changing the doctype might make a difference, but I didn't go back and try that.

     

    If a post helps to solve your problem, please click the Answer button on that post.

    I'm still confused, but now I'm confused on a higher plane.

  • Re: Mozilla Nothing is Centered

    05-18-2008, 10:37 AM
    Answer
    • Loading...
    • JZoerman
    • Joined on 08-24-2006, 6:27 AM
    • Posts 128

    Here, this code will center in FF, only 2 changes (margin: auto)...

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MainContent.master.cs" Inherits="MainContent" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head id="Head1" runat="server">

    <link href="Stylesheets/OkaloosaText.css" rel="stylesheet" type="text/css" />

    <title>Okaloosa Rugby Football Club Homepage</title>


    </head>
    <body style="text-align: center" bgcolor="black">

    <form id="form1" runat="server">

    <div style="text-align: center;  margin: auto" >


    </div>

    <div style=" margin: auto; z-index: 2; left: 1%; width: 789px; position: static; top: 35%; background-color: #000099;
    text-align: center; border-right: #000099 thin groove; padding-right: 1%; border-top: #000099 thin groove; padding-left: 1%; padding-bottom: 1%; border-left: #000099 thin groove; color: #ffffff; padding-top: 1%; border-bottom: #000099 thin groove;">

    <img src="Graphics/okaloosabannertrim.jpg" align="middle" border="2" alt="Okaloosa Rugby Football Club" /><br />

    <asp:Menu ID="MainMenu" runat="server" BackColor="Silver" ForeColor="#284E98" Orientation="Horizontal"

    Width="100%" DynamicHorizontalOffset="2" Font-Bold="True" Font-Names="Verdana" Font-Overline="False" Font-Size="1em" Font-Underline="False" StaticSubMenuIndent="10px">

    <Items>

    <asp:MenuItem Text="Home" Value="Home" NavigateUrl="~/Default.aspx"></asp:MenuItem>

    <asp:MenuItem Text="Schedule" Value="Schedule" NavigateUrl="~/Schedule.aspx"></asp:MenuItem>

    <asp:MenuItem Text="Directions" Value="Directions" NavigateUrl="~/Directions.aspx"></asp:MenuItem>

    <asp:MenuItem Text="Pictures" Value="Pictures" NavigateUrl="http://picasaweb.google.com/OkaloosaRugby" Target="_blank"></asp:MenuItem>

    <asp:MenuItem Text="About Us" Value="About Us" NavigateUrl="~/AboutUs.aspx"></asp:MenuItem>

    <asp:MenuItem Text="Links" Value="Links" NavigateUrl="~/Links.aspx"></asp:MenuItem>

    <asp:MenuItem Text="Forum" Value="Forum" NavigateUrl="http://okaloosarugby.org/forum/index.php" Target="_blank"></asp:MenuItem>

    <asp:MenuItem Text="Contact" Value="Contact" NavigateUrl="~/Contact.aspx"></asp:MenuItem>

    </Items>

    <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />

    <DynamicHoverStyle BackColor="#284E98" ForeColor="White" />

    <DynamicMenuStyle BackColor="#B5C7DE" />

    <StaticSelectedStyle BackColor="#507CD1" />

    <DynamicSelectedStyle BackColor="#507CD1" />

    <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />

    <StaticHoverStyle BackColor="#284E98" ForeColor="White" />

    </asp:Menu>

    <br />

    &nbsp;<br />

    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

    </asp:ContentPlaceHolder>

    <br />

    <table align="center" bgcolor="#ffffff" cellspacing="5" border="2" bordercolor="#000099">

    <tr>

    <td style="width: 100px">

    <img src="Graphics/cheers.jpg" alt="Cheers Sportsbar and Pub" /></td>

    <td style="width: 100px">

    <asp:HyperLink ID="HyperLink2" runat="server" ImageUrl="~/Graphics/LEGcolor343reg.jpg"

    NavigateUrl="http://www.legendaryinc.com/" Target="_blank" ToolTip="Legendary Realty">HyperLink</asp:HyperLink></td>

    </tr>

    </table>

    <br />

    <asp:Menu ID="BottomMenu" runat="server" Font-Names="Verdana" Font-Size="Small" ForeColor="White"

    Orientation="Horizontal" Width="100%">

    <Items>

    <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" Value="Home"></asp:MenuItem>

    <asp:MenuItem NavigateUrl="~/Schedule.aspx" Text="Schedule" Value="Schedule"></asp:MenuItem>

    <asp:MenuItem NavigateUrl="~/Directions.aspx" Text="Directions" Value="Directions"></asp:MenuItem>

    <asp:MenuItem NavigateUrl="http://picasaweb.google.com/OkaloosaRugby" Target="_blank"

    Text="Pictures" Value="Pictures"></asp:MenuItem>

    <asp:MenuItem NavigateUrl="~/AboutUs.aspx" Text="About Us" Value="About Us"></asp:MenuItem>

    <asp:MenuItem NavigateUrl="~/Links.aspx" Text="Links" Value="Links"></asp:MenuItem>

    <asp:MenuItem NavigateUrl="http://okaloosarugby.org/forum/index.php" Target="_blank"

    Text="Forum" Value="Forum"></asp:MenuItem>

    <asp:MenuItem NavigateUrl="~/Contact.aspx" Text="Contact" Value="Contact"></asp:MenuItem>

    <asp:MenuItem Text="Site Map" Value="Site Map" NavigateUrl="~/sitemap.html" Target="_blank"></asp:MenuItem>

    </Items>

    </asp:Menu>

    <br />

    <span style="font-size: 0.8em; font-family: Verdana">

    &nbsp;All content copyright of Okaloosa RFC 2008.&nbsp;

    <br />

    <asp:HyperLink ID="HyperLink1" runat="server" Font-Names="Verdana" Font-Underline="False"

    ForeColor="White" NavigateUrl="http://people.smu.edu/mbanghart/" Target="_blank">Web Design by Marc and Scooby 2008</asp:HyperLink></span></div>

    &nbsp;

    </form>
    </body>

    </html>


     

     

  • Re: Mozilla Nothing is Centered

    05-18-2008, 6:01 PM
    • Loading...
    • mbanghart
    • Joined on 05-07-2008, 2:23 PM
    • Posts 8

    Thanks a lot!  The margin-auto worked.  Do you know why Mozilla needs this?

     Thank again!

  • Re: Mozilla Nothing is Centered

    05-18-2008, 6:23 PM
    • Loading...