X
Tap here to go to the mobile version of the site.
Your Firefox is out of date and may contain a security risk! Upgrade Firefox

Support Forum

Website is not centered in Mozilla Firefox

Posted

Hello,

Our website was designed by a developer with whom we no longer can get in touch with. We have a small issue and we just can not figure out how to resolve it so we are turning to you for assistance.

When you open our website http://nflalumnisouthflorida.org in Internet Explorer it is aligned properly in the center of the page, however when we open it in Mozilla Firefox it is displayed on the left side.

I am sure it is a simple oversight when it was originally developed, however we can not find the proper line in the code to correct this.

Please help.

Thank you in advance for your attention and assistance, NFL Alumni South Florida Chapter Team

Chosen solution

You need to apply this rule to the Table #container element (body > div table) or add it to the inline style sheet.

#container {
	border: thin solid #000000;
	width: 760px;
	height: 1px;
	margin-left: auto;
	margin-right: auto;
}

Also check the page source as there seem to be a lot or tags marked in red indicating an error.

  • Firefox > Web Developer > Page Source
  • Tools > Web Developer > Page Source (Ctrl+U)

If you hover such a red tag then you get a tooltip with some information.

Read this answer in context 2

Additional System Details

Installed Plug-ins

  • Google Talk Plugin Video Accelerator version:0.1.44.23
  • Version 3.13.1.11376
  • Next Generation Java Plug-in 1.6.0_39 for Mozilla browsers
  • NPRuntime Script Plug-in Library for Java(TM) Deploy
  • The QuickTime Plugin allows you to view a wide variety of multimedia content in Web pages. For more information, visit the QuickTime Web site.
  • Adobe PDF Plug-In For Firefox and Netscape "9.5.3"
  • iTunes Detector Plug-in
  • Google Update
  • Shockwave Flash 11.3 r300
  • RealJukebox Netscape Plugin
  • RealNetworks(tm) RealPlayer Chrome Background Extension Plug-In
  • RealPlayer(tm) HTML5VideoShim Plug-In
  • RealPlayer(tm) LiveConnect-Enabled Plug-In
  • RealPlayer Download Plugin
  • ActiveTouch General Plugin Container Version 105
  • DivX Plus Web Player version 2.2.0.52
  • DivX VOD Helper Plug-in
  • Windows Presentation Foundation (WPF) plug-in for Mozilla browsers
  • DRM Netscape Network Object
  • Npdsplay dll
  • DRM Store Netscape Plugin
  • np-mswmp

Application

  • User Agent: Mozilla/5.0 (Windows NT 5.1; rv:18.0) Gecko/20100101 Firefox/18.0

More Information

cor-el
  • Top 10 Contributor
  • Moderator
10747 solutions 96724 answers

Add this style rule:

#container{margin-left: auto; margin-right: auto;}

A good place to ask advice about web development is at the MozillaZine "Web Development/Standards Evangelism" forum.

The helpers at that forum are more knowledgeable about web development issues.
You need to register at the MozillaZine forum site in order to post at that forum.

Question owner

I tried entering this code line in multiple locations and nothing happened. I will register and post this on MozillaZine. Thank you...

cor-el
  • Top 10 Contributor
  • Moderator
10747 solutions 96724 answers

Chosen Solution

You need to apply this rule to the Table #container element (body > div table) or add it to the inline style sheet.

#container {
	border: thin solid #000000;
	width: 760px;
	height: 1px;
	margin-left: auto;
	margin-right: auto;
}

Also check the page source as there seem to be a lot or tags marked in red indicating an error.

  • Firefox > Web Developer > Page Source
  • Tools > Web Developer > Page Source (Ctrl+U)

If you hover such a red tag then you get a tooltip with some information.

Question owner

This did the trick. Thank you and may you constantly be Blessed for all your kindness and assistance... Sincerely, The NFL Alumni South Florida Chapter Team

cor-el
  • Top 10 Contributor
  • Moderator
10747 solutions 96724 answers

You're welcome

Katje 0 solutions 1 answers

I have a related problem with weebly in Mozilla. The website itself is horizontally centered, but my menu (container) is not. Could someone help me? Thank you in advance !

#nav-wrap .container {
 clear: both;
 overflow: hidden;
 position: relative;
 margin: 0 auto;
 display: inline; /*allow the centering to work*/
}

#nav-wrap table {
 display: inline;   /*allow the centering to work*/
 margin-left: 0 auto;
 margin-right: 0 auto;
 width: 100%;
 margin-bottom: 0px;
 margin-top: 15px;
} 

#menu {
 vertical-align: middle;
 width: 100%;
 text-align: center;
 margin: 0;
}

#nav-wrap .container ul {
 list-style: none;
 display: inline;
}

#nav-wrap .container ul li {
 list-style: none;
 display: inline; /*allow the centering to work*/
 margin-left: 10px;
 margin-right: 10px;
}

#nav-wrap .container ul li a {
 display: inline; /*allow the centering to work*/
 font-family: 'Verdana';
 color: #1379dc;
 text-decoration: none;
 padding: 5px 5px; 
 border: 0px;
 list-style-type: none;
 font-size: 16px;
}

#nav-wrap .container ul li#active a,
#nav-wrap .container ul li a:hover {
 background: #de16a5;
 font-family: 'Verdana';
 color: #ffffff;
 border: 0;
}

Modified by cor-el

cor-el
  • Top 10 Contributor
  • Moderator
10747 solutions 96724 answers

Can you post a link to a publicly accessible page so we can check the code?

What is the width of the #nav-wrap element?

Current Firefox versions have a lot of built-in web developer tools including an Inspector and Style viewer and editor.
You can also inspect the box representation.