Here is my problem code and advice me something fot the portfolio pls https://codepen.com/LukaBarliani/pen/xrGyRy
Run your CSS through any CSS Linter and you will know why.
http://csslint.net/
Your CSS works fine after fixing some issues and ran through a CSS beautifier.
body,
html {
width: 100%;
height: 100%;
}
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
}
body {
background-image: url("");
background-repeat: no-repeat;
}
.button1 {
background-color: #008CBA;
border: none;
color: white;
padding: 12px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 8px;
}
.button2 {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 8px;
}
.button3 {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 8px;
}
.intro-message {
position: relative;
padding-top: 20%;
padding-bottom: 20%;
}
.intro-header {
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
background: url('https://40.media.tumblr.com/1b916597d3e174399cb7adadddb66ede/tumblr_nt5uk4psl31ud7rr3o1_1280.jpg') no-repeat center center fixed;
background-size: cover;
height: 855px;
}
li {
float: left;
border-right: 1px solid #bbb;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
border: 1px solid #e7e7e7;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
li:last-child {
border-right: none;
}
I'm only a year in to Web Design. I've been learning menus at Lynda.com and specifically have a problem creating a sub menu.
I've made the sub menu how I want it, however when I flick between the list items on my menu they change over too quickly.
See on the picture below:
http://s22.postimg.org/699f35hm9/macca_travel.png
If you look at the position of the cursor, it is still on the 'About' tab, but the 'Blog' hover has lit up and has been selected.
The two sections with sub menus are the 'Blog' tab and the 'Photos' tab. These two tabs don't cross over smoothly and I think it's because for whatever reason they're selecting too quickly.
I don't know why :)
Here is my CSS:
#font-face {
font-family: 'telegraficoregular';
src: url('../FONTS/telegrafico-webfont.eot');
src: url('../FONTS/telegrafico-webfont.eot?#iefix') format('embedded-opentype'),
url('../FONTS/telegrafico-webfont.woff2') format('woff2'),
url('../FONTS/telegrafico-webfont.woff') format('woff'),
url('../FONTS/telegrafico-webfont.ttf') format('truetype'),
url('../FONTS/telegrafico-webfont.svg#telegraficoregular') format('svg');
font-weight: normal;
font-style: normal;
}
.cf:after {
content: "";
display: table;
clear: both;
}
html, body, head, nav, article, aside, section, h3, h4, footer, ul, li {
margin: 0;
padding: 0;
}
/*Global Styles*/
html {
background: white;
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 1200px;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
h1 {
font-family: telegraficoregular;
font-size: 3em;
color: white;
padding: 0;
margin:0;
text-align: center;
}
h2 {
font-family: telegraficoregular;
font-size: 1em;
font-style: italic;
color: white;
padding: 0;
margin: 0;
text-align: center;
}
p {
font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding-left:70px;
}
h4 + p {
font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding-left:70px;
padding-top: 10px;
}
/*Nav Styles */
header {
background:#6593b5;
width: 100%;
height: 160px;
margin:0 auto;
}
nav {
background: black;
height: 2em;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
padding:0 2em;
line-height: 2em;
color: white;
font-family: telegraficoregular;
text-decoration: none;
}
li, ul {
position: relative;
margin: 0;
padding: 0;
}
ul.SubMenu {
float: none;
width: auto;
height: auto;
list-style: none;
background: black;
color: white;
position: absolute;
left: -9000em;
}
ul.SubMenu li{
float: none;
}
ul.SubMenu li a{
display:block;
border-bottom: 1px solid white;
padding: .2em 2em;
white-space: nowrap;
}
li:hover ul {
left: 0;
}
li:hover ul {
left: 0;
}
/* Article Styles */
article {
width: 896px;
padding: 32px;
}
/*Section Styles */
section.China {
text-align: center;
margin: 80px auto;
padding: 20px;
}
section h3 {
font-family: telegraficoregular;
font-size: 2em;
border-bottom: 1px solid black;
padding: 5px;
}
section h4 {
font-family: telegraficoregular;
font-size: 1.4em;
padding-top: 60px;
padding-left: 70px;
text-align: left;
text-decoration: underline;
}
section.China img {
position: relative;
top: 20px;
border-radius: 5px;
}
section.Australia {
text-align: center;
margin: 20px auto;
padding: 20px;
}
section.Australia img {
position: relative;
top: 20px;
border-radius: 5px;
}
section.Thailand {
text-align: center;
margin: 20px auto;
padding: 20px;
}
section.Thailand img {
position: relative;
top: 20px;
border-radius: 5px;
}
/* Link Styles*/
a:hover {
color: orange;
height: 32px;
background: black;
}
ul.SubMenu li a:hover {
background: orange;
color: white;
}
/* About Styles */
#AboutContent{
width: 960px;
height: 1200px;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
#AboutHeader {
text-align: center;
margin: 20px auto;
padding: 20px;
}
#AboutHeader img {
display: block;
margin: 0 auto;
text-align: center;
}
#AboutHeader h2 {
font-family: telegraficoregular;
font-size: 1.5em;
text-decoration: underline;
color: black;
padding: 0;
margin-top: 20px;
text-align: center;
}
h2 + img {
position: relative;
top: 50px;
border-radius: 5px;
}
#AboutHeader p {
font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding:50px 0 0 100px;
}
/*Photos Content */
#PhotoContent{
width: 960px;
height:auto;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
/* Photos Gallery */
#ChinaPhotos {
width: 960px;
height:1200px;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
#ChinaPhotos h3 {
font-family: telegraficoregular;
font-size: 2em;
border-bottom: 1px solid black;
padding: 5px;
text-align: center;
margin-top: 20px;
}
#ChinaPhotos img {
margin-top: 20px;
border: 1px solid black;
}
#ChinaPhotos a .Thumb:hover {
width: 320px;
height: 240px;
}
/* Container Styles */
#Content {
width: 960px;
height: auto;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
/* Footer Styles */
.Footer {
width: 100%;
height: 160px;
background: black;
}
.Footer p {
font-family: telegraficoregular;
color: white;
font-style: italic;
line-height: 160px;
text-align: center;
}
Thanks Joe
Add the following to each section of your CSS:
ul.SubMenu {
margin-top: 2em;
}
nav ul li a {
float: left;
}
nav ul li {
display: block;
}
basically I wanted to try have the same rgba value in three different areas. I wanted my body, nav and footer all to have rgba(0,0,0,.8).
My body works but the nav and footer just show was solid black without the transparency...
I've tried changing the transparency slightly so they're different but that doesn't work either.
Are you only allowed to use it once?
Joe
#font-face {
font-family: 'telegraficoregular';
src: url('../FONTS/telegrafico-webfont.eot');
src: url('../FONTS/telegrafico-webfont.eot?#iefix') format('embedded-opentype'),
url('../FONTS/telegrafico-webfont.woff2') format('woff2'),
url('../FONTS/telegrafico-webfont.woff') format('woff'),
url('../FONTS/telegrafico-webfont.ttf') format('truetype'),
url('../FONTS/telegrafico-webfont.svg#telegraficoregular') format('svg');
font-weight: normal;
font-style: normal;
}
.cf:after {
content: "";
display: table;
clear: both;
}
html, body, head, nav, article, aside, section, h3, h4, footer, ul, li {
margin: 0;
padding: 0;
}
/*Global Styles*/
html {
margin: 0;
padding: 0;
}
body {
width: 100%;
margin: 0 auto;
padding: 0;
background:rgba(0,0,0,.9);
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
}
h1 {
font-family: telegraficoregular;
font-size: 3em;
color: rgb(50,153,187);
padding: 0;
margin:0;
text-align: center;
}
h2 {
font-family: telegraficoregular;
font-size: 1em;
font-style: italic;
color: #003366;
padding: 0;
margin: 0;
text-align: center;
}
p {
font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding-left:70px;
}
h4 + p {
font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding-left:70px;
padding-top: 10px;
}
/*Nav Styles */
header {
background:rgb(233,233,233);
width: 100%;
height: 160px;
margin:0 auto;
}
nav {
background:rgba(0,0,0,.8);
width: auto;
height: 64px;
}
nav ul.TopMenu li {
float: left;
list-style: none;
width: 150px;
}
nav ul.TopMenu {
width: 600px;
margin: 0 auto;
}
nav ul.TopMenu li a {
display:block;
line-height: 64px;
padding:0 2em;
text-align: center;
font-family: telegraficoregular;
font-size: 1.2em;
text-decoration: none;
}
li {
position: relative;
}
nav ul.SubMenu{
float: none;
text-align: center;
border-bottom: 1px solid white;
position: absolute;
left: -9000em;
top: 64px;
height: auto;
max-height: 0;
-moz-transition: max-height 0.5s ease-in-out;
-webkit-transition: max-height 0.5s ease-in-out;
-o-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
overflow:hidden;
z-index:999;
}
nav ul.SubMenu li{
height: 32px;
font-family: telegraficoregular;
font-size: 1em;
padding: 0;
margin: 0;
border-bottom: 1px solid white;
}
nav ul.SubMenu li a{
display:block;
line-height: 32px;
padding: 0px;
margin: 0;
}
.TopMenu li:hover ul{
left: 0;
max-height: 20em;
}
ul.SubMenu li a{
background: rgba(0,0,0,.8);
border-bottom: 1px solid white;
}
ul.SubMenu li a:visited {
color: white;
}
ul.SubMenu li a:hover {
background: rgba(255,165,0,.8);
}
a:visited {
color: white;
}
a:hover {
color: orange;
}
/* Article Styles */
article {
width: 896px;
padding: 32px;
}
/*Section Styles */
section.China {
text-align: center;
margin: 20px auto;
padding: 20px;
}
section h3 {
font-family: telegraficoregular;
font-size: 2em;
border-bottom: 1px solid black;
padding: 5px;
}
section h4 {
font-family: telegraficoregular;
font-size: 1.4em;
padding-top: 60px;
padding-left: 70px;
text-align: left;
text-decoration: underline;
}
section.China img {
position: relative;
top: 20px;
border-radius: 5px;
}
section.Australia {
text-align: center;
margin: 20px auto;
padding: 20px;
}
section.Australia img {
position: relative;
top: 20px;
border-radius: 5px;
}
section.Thailand {
text-align: center;
margin: 20px auto;
padding: 20px;
}
section.Thailand img {
position: relative;
top: 20px;
border-radius: 5px;
}
/* Link Styles*/
/* About Styles */
#AboutContent{
width: 960px;
height: 1200px;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
#AboutHeader {
text-align: center;
margin: 20px auto;
padding: 20px;
}
#AboutHeader img {
display: block;
margin: 0 auto;
text-align: center;
}
#AboutHeader h2 {
font-family: telegraficoregular;
font-size: 1.5em;
text-decoration: underline;
color: black;
padding: 0;
margin-top: 20px;
text-align: center;
}
h2 + img {
position: relative;
top: 50px;
border-radius: 5px;
}
#AboutHeader p {
font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding:50px 0 0 100px;
}
/*Photos Content */
#PhotoContent{
width: 960px;
height:auto;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
/* Photos Gallery */
#ChinaPhotos {
width: 960px;
height:1200px;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
#ChinaPhotos h3 {
font-family: telegraficoregular;
font-size: 2em;
border-bottom: 1px solid black;
padding: 5px;
text-align: center;
margin-top: 20px;
}
#ChinaPhotos img {
margin-top: 20px;
border: 1px solid black;
}
#ChinaPhotos a .Thumb:hover {
width: 320px;
height: 240px;
}
/* Container Styles */
#Content {
width: 960px;
height: auto;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
/* Footer Styles */
.Footer {
width: 100%;
height: 80px;
background: rgba(0,0,0,.7);
}
.Footer p {
font-family: telegraficoregular;
color: white;
font-style: italic;
line-height: 80px;
text-align: center;
}
So, it looks as though it's the overlap that is causing your problems (see comment above. I changed the background colours in the nav and footer and they show up just find.
It's the fact that you have two elements with 80% opacity overlapped, and the outcome looks black.
html, body, head, nav, article, aside, section, h3, h4, footer, ul, li {
margin: 0;
padding: 0;
}
/*Global Styles*/
html {
margin: 0;
padding: 0;
}
body {
width: 100%;
margin: 0 auto;
padding: 0;
background:rgba(0,0,0,.9);
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
}
h1 {
font-family: telegraficoregular;
font-size: 3em;
color: rgb(50,153,187);
padding: 0;
margin:0;
text-align: center;
}
h2 {
font-family: telegraficoregular;
font-size: 1em;
font-style: italic;
color: #003366;
padding: 0;
margin: 0;
text-align: center;
}
p {
font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding-left:70px;
}
h4 + p {
font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding-left:70px;
padding-top: 10px;
}
/*Nav Styles */
header {
background:rgb(233,233,233);
width: 100%;
height: 160px;
margin:0 auto;
}
nav {
background:rgba(255,0,0,.8);
width: auto;
height: 64px;
}
nav ul.TopMenu li {
float: left;
list-style: none;
width: 150px;
}
nav ul.TopMenu {
width: 600px;
margin: 0 auto;
}
nav ul.TopMenu li a {
display:block;
line-height: 64px;
padding:0 2em;
text-align: center;
font-family: telegraficoregular;
font-size: 1.2em;
text-decoration: none;
}
li {
position: relative;
}
nav ul.SubMenu{
float: none;
text-align: center;
border-bottom: 1px solid white;
position: absolute;
left: -9000em;
top: 64px;
height: auto;
max-height: 0;
-moz-transition: max-height 0.5s ease-in-out;
-webkit-transition: max-height 0.5s ease-in-out;
-o-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
overflow:hidden;
z-index:999;
}
nav ul.SubMenu li{
height: 32px;
font-family: telegraficoregular;
font-size: 1em;
padding: 0;
margin: 0;
border-bottom: 1px solid white;
}
nav ul.SubMenu li a{
display:block;
line-height: 32px;
padding: 0px;
margin: 0;
}
.TopMenu li:hover ul{
left: 0;
max-height: 20em;
}
ul.SubMenu li a{
background: rgba(0,0,0,.8);
border-bottom: 1px solid white;
}
ul.SubMenu li a:visited {
color: white;
}
ul.SubMenu li a:hover {
background: rgba(255,165,0,.8);
}
a:visited {
color: white;
}
a:hover {
color: orange;
}
/* Article Styles */
article {
width: 896px;
padding: 32px;
}
/*Section Styles */
section.China {
text-align: center;
margin: 20px auto;
padding: 20px;
}
section h3 {
font-family: telegraficoregular;
font-size: 2em;
border-bottom: 1px solid black;
padding: 5px;
}
section h4 {
font-family: telegraficoregular;
font-size: 1.4em;
padding-top: 60px;
padding-left: 70px;
text-align: left;
text-decoration: underline;
}
section.China img {
position: relative;
top: 20px;
border-radius: 5px;
}
section.Australia {
text-align: center;
margin: 20px auto;
padding: 20px;
}
section.Australia img {
position: relative;
top: 20px;
border-radius: 5px;
}
section.Thailand {
text-align: center;
margin: 20px auto;
padding: 20px;
}
section.Thailand img {
position: relative;
top: 20px;
border-radius: 5px;
}
/* Link Styles*/
/* About Styles */
#AboutContent{
width: 960px;
height: 1200px;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
#AboutHeader {
text-align: center;
margin: 20px auto;
padding: 20px;
}
#AboutHeader img {
display: block;
margin: 0 auto;
text-align: center;
}
#AboutHeader h2 {
font-family: telegraficoregular;
font-size: 1.5em;
text-decoration: underline;
color: black;
padding: 0;
margin-top: 20px;
text-align: center;
}
h2 + img {
position: relative;
top: 50px;
border-radius: 5px;
}
#AboutHeader p {
font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding:50px 0 0 100px;
}
/*Photos Content */
#PhotoContent{
width: 960px;
height:auto;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
/* Photos Gallery */
#ChinaPhotos {
width: 960px;
height:1200px;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
#ChinaPhotos h3 {
font-family: telegraficoregular;
font-size: 2em;
border-bottom: 1px solid black;
padding: 5px;
text-align: center;
margin-top: 20px;
}
#ChinaPhotos img {
margin-top: 20px;
border: 1px solid black;
}
#ChinaPhotos a .Thumb:hover {
width: 320px;
height: 240px;
}
/* Container Styles */
#Content {
width: 960px;
height: auto;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
/* Footer Styles */
.Footer {
width: 100%;
height: 80px;
background: rgba(0,0,255,.5);
}
.Footer p {
font-family: telegraficoregular;
color: white;
font-style: italic;
line-height: 80px;
text-align: center;
}
<nav>
<ul>
<li>something</li>
<li>something else</li>
</ul>
</nav>
<footer class="Footer">
This is a footer
</footer>
I hope you all are doing great.
I just wanted to see how my website would look if I moved logo to the right, and the search bar to the left. I edited the style.css to make the logo float right, but when doing that with the search bar, nothing moves ,I tried "center"-ing it and putting it to the "left" but it won't work. Here have a look at some of the code :
/* Horizontal Category List (Default & Flyout) */
#SideCategoryList h2 {
display: block;
border-bottom: #ACA9A9 dashed 1px;
}
/* Logo */
#Logo {
float: left;
margin-bottom: 20px;
}
#Logo h1 {
font-size: 63px;
font-weight: normal !important;
letter-spacing: -1px;
text-transform: none;
padding: 0;
margin: 0 0 15px;
font-family: 'Sacramento', Arial, Sans-Serif;
letter-spacing: normal;
}
#Logo #LogoImage {
}
/* Top Search Form */
#SearchForm{
margin: 15px 0 0 0;
padding: 0px;
width: auto;
position: relative;
border-bottom: 1px dashed #ACA9A9;
overflow: auto;
float: center;
}
#SearchForm form {
padding: 0;
margin: 0;
}
#SearchForm label {
display: none;
}
#SearchForm input {
color: #aca9a9;
width: 145px;
height: 18px;
font-size: 0.8em;
font-weight: 400;
text-transform: uppercase;
padding: 2px 3px 2px 3px;
I'm currently working on a website.. I've check the css but I can't seem to figure out why this grey line keeps on showing on top of my Visual Studio website website... I'm using the default Site.css present when creating a asp.net website... please help....
my css:
/* DEFAULTS
----------------------------------------------------------*/
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 960px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:#3a4f63;
width:100%;
}
div.menu
{
padding: 4px 0px 4px 8px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
/* FORM ELEMENTS
----------------------------------------------------------*/
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}
fieldset p
{
margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label
{
display: block;
}
fieldset label.inline
{
display: inline;
}
legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input.textEntry
{
width: 320px;
border: 1px solid #ccc;
}
input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}
div.accountInfo
{
width: 42%;
}
/* MISC
----------------------------------------------------------*/
.clear
{
clear: both;
}
.title
{
display: block;
float: left;
text-align: left;
width: auto;
}
.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: White;
}
.loginDisplay a:link
{
color: white;
}
.loginDisplay a:visited
{
color: white;
}
.loginDisplay a:hover
{
color: white;
}
.failureNotification
{
font-size: 1.2em;
color: Red;
}
.bold
{
font-weight: bold;
}
.submitButton
{
text-align: right;
padding-right: 10px;
}
(This is based on Blender's answer, I will delete this if Blender will post his answer)
In order to be formal and to have an answer to this question, as what Blender suggested change
margin: 20px auto 0px auto;
to
margin: 0px auto 0px auto;
This solved the issue according to the one who asked the question.