Website is not centered in Mozilla Firefox
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 👍 2All Replies (7)
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.
I tried entering this code line in multiple locations and nothing happened. I will register and post this on MozillaZine. Thank you...
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.
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
You're welcome
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
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.