Parse Error and unrecognized media only css validation - html

Css wont validate and I keep getting these errors. I have an ending bracket, so I'm not sure what the problem is. There's a parse error on line 39. Unrecognized media only on lines 79 and 81. Then on lines 79 and 89 those have the parse error. If anyone could help that would be greatly appreciated.
39. nav a:{text-decoration:none;
font-weight: bold; }
nav a:link {color: #ffffff;}
nav a:visited {color: #808080;}
nav a:hover {color: #ff0000; }
h1 {text-align: center;
color: #ffffff;
font-family: CustomHeaderFont}
h2 { text-align: center;
color: #ffffff;
font-family: CustomHeaderFont}
h3 {text-align: center;
color: #ffffff;
font-family: CustomHeaderFont}
p { font-family: CustomFont;
color: #ffffff;
text-align: center;}
ul li { padding: 5px 0px; }
footer { font-size: 90%;
text-align: center;
clear: right;
padding: 15px;
color: #ffffff;
font-family: CustomFont;
}
70. #media only screen and (max-width: 1024px){
body { margin: 0; }
#wrapper { width: auto; }
main {margin-left: 0;}
nav {float: none; width: auto; }
nav li { display: inline-block; padding: 0.5em; }
nav ul { text-align: center; }
nav a { border-style: none; }
h1, h2,h3 { font-size: 120%; }
79. p { font-size: 90%; } }
81. #media only screen and (max-width: 768px) {
h1, h2, h3{ font-size: 100%; }
p { font-size: 90%; }
main { margin: 0.5%;
width: auto ;}
nav, nav ul, nav li { padding: 0;}
nav li { display: block; }
aside { display: none; }
89. }
#font-face {
font-family: CustomFont;
src: url(Font/GlacialIndifference-Regular.otf); }
#font-face {
font-family: CustomHeaderFont;
src: url(Font/BLURRYFACE.ttf);
}
form { background-color: #000000;
font-family: CustomFont;
padding: 10px;
}
fieldset{ width: 320px;
border: 2px ridge #ff0000;
padding: 10px;
margin-bottom: 10px;
}
legend { font-family: CustomHeaderFont;
font-weight: bold;
}
label { float: left;
width: 100px;
clear: left;
text-align: right;
padding-right: 10px;
margin-top: 10px;
font-family: CustomFont;
}
textarea, submit {margin-top: 10px;
display: block;
}
input checkbox {display: inline;
margin-bottom: 60px;}
table { border: 5px solid #ff0000;
width: 600px;
margin: auto;
}
td, th {border: 1px solid #ff0000;
padding: 0.5em;
font-family: CustomFont;}
caption { font-family: CustomHeaderFont;
font-weight: bold;
font-size: 1.2em;
padding-bottom: 0.5em;
}

there is a : after a on line 39

Related

Error: colon expected css(css-colonexpected)

I'm trying to create a. Simple angular project.
In the css file /src/styles.css ,while writing the code, I'm facing being shown syntax errors.
body {
margin: 0;
background: #F2F2F2;
font-family: 'Montserrat', sans-serif;
height: 100vh;
}
#container { display: grid;
grid-template-columns: 70px auto;
height: 100%;
#content {
padding: 30px 50px;
ul {//error highlight saying: colon expected css(css-colonexpected)
list-style-type: none;
margin:0;padding:0;
li {
background: #fff;
border-radius: 8px;
padding: 20px;
margin-bottom: 8px;
a {
font-size: 1.5em;
text-decoration: none;
font-weight: bold;
color:#00A8FF;
}
ul {
margin-top: 20px;
li {
padding:0;
a {
font-size: 1em;
font-weight: 300;
}//Error highlight saying: at-rule or selector expected css(css-ruleselectorexpected)
}
}
}
}
}
}
Error msg shown as comments
Syntax errors being shown are:
-colon expected css(css-colonexpected)
-at-rule or selector expected css(css-ruleselectorexpected)
You are using a valid SASS or SCSS with nested classes in a .css file and hence the error is shown. The equivalent css would be:
body {
margin: 0;
background: #F2F2F2;
font-family: "Montserrat", sans-serif;
height: 100vh;
}
#container {
display: grid;
grid-template-columns: 70px auto;
height: 100%;
}
#container #content {
padding: 30px 50px;
}
#container #content ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#container #content ul li {
background: #fff;
border-radius: 8px;
padding: 20px;
margin-bottom: 8px;
}
#container #content ul li a {
font-size: 1.5em;
text-decoration: none;
font-weight: bold;
color: #00A8FF;
}
#container #content ul li ul {
margin-top: 20px;
}
#container #content ul li ul li {
padding: 0;
}
#container #content ul li ul li a {
font-size: 1em;
font-weight: 300;
}
You are using sass in CSS file.. So this error is being shown. Its file extension should be .sass or stylesheet should be coded according to CSS syntax.
In CSS, it would be like:
body {
margin: 0;
background: #F2F2F2;
font-family: "Montserrat", sans-serif;
height: 100vh;
}
#container {
display: grid;
grid-template-columns: 70px auto;
height: 100%;
}
#container #content {
padding: 30px 50px;
}
#container #content ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#container #content ul li {
background: #fff;
border-radius: 8px;
padding: 20px;
margin-bottom: 8px;
}
#container #content ul li a {
font-size: 1.5em;
text-decoration: none;
font-weight: bold;
color: #00A8FF;
}
#container #content ul li ul {
margin-top: 20px;
}
#container #content ul li ul li {
padding: 0;
}
#container #content ul li ul li a {
font-size: 1em;
font-weight: 300;
}

Input element and CSS not working

I've been fighting with an input element and CSS. I am not very good in design.
I am trying to create like that:
My input is inside a form that is inside a :
<li>
<FORM class="searchform" NAME="Search" ACTION="./index.cfm?P=128" METHOD=POST >
<INPUT type="text" name=search value="" STYLE="color: #676767; background-color: #282828; line-height: 18px" size="10" maxlength="40" Placeholder="search">
<INPUT class="search_button" TYPE=SUBMIT NAME="SubmitButton1" VALUE="Search" ID="SubmitButton1">
</FORM></li>
Here is my CSS:
#import url(http://fonts.googleapis.com/css?family=Montserrat);
body, html {height: 100%; margin: 0; font-size:16px;}
body {font-family: Arial;}
header {width: 100%; background-image: url('img/top-bg.png'); background-repeat: repeat-x; background-color: #dfebf2; position: fixed; height: 70px; z-index:2;}
aside {width: 270px; min-height: 100%; position: fixed; background-color: #dfebf2; left: 0; max-height: 100%; overflow-y: auto; /* border-right: 1px solid #bdcada; */}
section {top: 70px; left: 270px; position: absolute;}
h3 {font-family: 'Montserrat', Arial; text-transform: uppercase;font-size:15px;}
select {width: 230px; height: 34px; border: 1px solid #bdcada; font-size: 14px; font-weight: bold; margin: 10px 0 0 0; padding-left: 8px; border-radius: 3px;}
table, th, td {border: 1px solid #bdcada;}
input.search_button {
color: black;
line-height: 23px;
font-weight: bold;
font-size: 10px;
font-family: 'Montserrat', Arial;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 20em;
height: 2em;
}
.height-112px {height: 112px;}
#logo-box {float: left; margin-left: 20px; margin-top:10px; width: 250px;}
#mobile-menu-icon, #mobile-profile-icon {display:none;}
#top-nav {position: absolute; width: 100%; background-color: #282828; min-height: 42px; top: 70px; color: #fff;}
.top-nav-links {list-style-type: none; padding: 0px; margin: 0px; padding-left: 20px; padding-right:20px; line-height: 42px;}
.top-nav-links li {font-weight: bold; display: inline; margin-right: 15px; font-size: 10px; text-transform: uppercase; font-family: 'Montserrat', Arial;}
.top-nav-links a {color: #676767; text-decoration: none;}
.top-nav-links a:hover {color: #fff;}
.active-top a {color: #fff;}
#details-box {padding: 30px 20px 30px 20px; border-bottom: 1px solid #bdcada;}
#height-5px {height: 5px;}
.details-1 {font-weight: bold; font-size: 14px; color: #1072ad;}
.details-2 {font-style: italic; font-size: 12px; color: #9ca6b6; margin-left: 10px;}
.details-3 {font-weight: bold; font-size: 12px; color: #000; margin-left: 10px;}
#details-box a {text-decoration: none;}
.logout {font-size: 11px; color: red;}
#property-box {padding: 25px 20px 30px 20px;}
.blue-nav-title {font-family: 'Montserrat', Arial; font-weight: bold; font-size: 12px; color: #1072ad; text-transform: uppercase;}
.list-title {height: 42px; background-image: url('img/top-bg.png'); padding: 0 20px 0 20px; border-bottom: 1px solid #0b5987; line-height: 42px; font-family: 'Montserrat', Arial; font-size: 12px; color: #fff; text-transform: uppercase;}
.nav-links {list-style-type: none; padding: 0px; margin: 0px;}
.nav-links li {font-size: 12px; color: #6e7888; padding-left: 20px; line-height: 50px; border-bottom: 1px solid #bdcada;}
.nav-links a {text-decoration: none; color: #6e7888;}
.nav-links li:before {content: "â–º "; font-size: 7px; color: #157cb8; vertical-align: top; margin-right: 8px;}
.nav-links a:hover {text-decoration: none; color: #000;}
.active {background: #fff;}
#content {margin-left: 50px; margin-top: 92px;}
table {font-size: 12px; border-collapse: collapse; width: 100%; overflow-y:scroll; height:300px; display:block;}
table td, th {padding: 10px;}
table tr:hover {background: #f0f6f9;}
.table-b {font-size: 12px; border-collapse: collapse; width: AUTO; HEIGHT: AUTO; display:block;}
.table-b td, th {padding: 10px;}
.table-b tr:hover {background: #f0f6f9;}
.table-a {font-size: 12px; border-collapse: collapse; width: 100%; }
.table-a td, th {padding: 10px;}
.table-a tr:hover {background: #f0f6f9;}
form.searchform {display: inline-block;}
#login {width: 240px; border: 1px solid #bdcada; border-radius: 3px; padding: 30px; font-size: 12px;}
.input {width: 230px; height: 30px; border: 1px solid #bdcada; font-size: 14px; font-weight: bold; margin-top: 5px; margin-bottom: 10px; padding-left: 8px; border-radius: 3px;}
.divTable{
display:table;
width:auto;
background-color:#eee;
border:1px solid #666666;
border-spacing:5px;
}
.divRow{
display:table-row;
width:auto;
clear:both;
background-color:#ccc;
}
.divCell{
float:left;
display:table-column;
width:100px;
border-left: 2px solid #fff;
}
/* columns float left while they fit – some spacing in there too between columns*/
#column {width:48%;float:left;padding-right:20px;}
/*the table will always fill up the space of the column – column starts at 50% of the screen width so two can fit */
table {width:100%;margin-bottom:20px}
/* responsive breakpoint – at 1000px screen, the tables no longer fit side by side, so they auto-fit top-to-bottom, so make them each full width */
#media screen and (max-width: 1000px) {
#column {width:100%;}
#media only screen
and (max-device-width : 768px) {
body, html {width:100%; margin: 0; font-size:14px;}
header {position:initial; height:auto;}
aside {width:100%; position:initial; min-height:initial;}
section {position:initial;}
select {width: 100%; height:auto; padding:8px; font-size: inherit;}
.height-112px {height: auto;}
#logo-box {float: none; margin:0px; width: 100%}
#logo-img {margin: 10px 10px 5px 10px;}
#mobile-menu-icon, #mobile-profile-icon {display:block; float:right; height:45px; width:45px; margin: 12px 12px 5px 0px;}
#top-nav {position: initial; display:none; clear:both; border-bottom: 1px solid #bdcada; background-color: inherit; width: 100%; min-height: inherit;}
.top-nav-links li {display:block; width:100%; font-size: 16px; line-height:36px;}
.top-nav-links li:first-child {padding-top:10px;}
.top-nav-links li:last-child {padding-bottom:10px;}
.top-nav-links a {color: #000;}
.active-top a {color: #1067a6;}
#details-box {display:none; padding: 20px;}
.details-1, .details-2, .details-3, .logout {font-size: inherit;}
#property-box {padding: 20px;}
.blue-nav-title {font-family: 'Montserrat', Arial; font-weight: bold; font-size:inherit; color: #1072ad; text-transform: uppercase;}
.list-title {font-size:inherit;}
.list-title:after {content: "+"; font-weight: bold; font-size: 18px; float:right;}
.opened:after {content: "-"; font-weight: bold; font-size: 18px; float:right;}
.nav-links {display: none;}
.nav-links li {font-size: inherit;}
.nav-links li:before {content: "â–º "; font-size: 11px;}
#content {margin:0; padding:15px;}
table {font-size:inherit;}
table tr.odd {background: #eeeeee;}
table th {font-weight:normal; text-align:left;}
#login {width: 100%; padding:20px; max-width:400px; margin:0 auto; box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box; font-size: inherit;}
.input {width: 100%; box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box; font-size: inherit;}
}
#media only screen
and (min-device-width : 200px)
and (max-device-width : 319px) {
#mobile-menu-icon, #mobile-profile-icon {display:block; float:right; height:40px; width:40px; margin: 13px 10px 5px 0px;}
}
#media only screen
and (min-device-width : 425px)
and (max-device-width : 600px) {
body, html {width:100%; margin: 0; font-size:15px;}
}
#media only screen
and (min-device-width : 600px)
and (max-device-width : 768px) {
body, html {width:100%; margin: 0; font-size:16px;}
}
My search button is aligned to my li.
My result is like that:
Does anyone have an idea what I am doing wrong?
Thanks
style your search button like this
input.search_button {
color: black;
font-weight: bold;
font-size: 10px;
font-family: 'Montserrat', Arial;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 2px;
}
If you want to style one input then add an id and style that id as stated
Snippet
#import url(http://fonts.googleapis.com/css?family=Montserrat);
body,
html {
height: 100%;
margin: 0;
font-size: 16px;
}
body {
font-family: Arial;
}
header {
width: 100%;
background-image: url('img/top-bg.png');
background-repeat: repeat-x;
background-color: #dfebf2;
position: fixed;
height: 70px;
z-index: 2;
}
aside {
width: 270px;
min-height: 100%;
position: fixed;
background-color: #dfebf2;
left: 0;
max-height: 100%;
overflow-y: auto;
/* border-right: 1px solid #bdcada; */
}
section {
top: 70px;
left: 270px;
position: absolute;
}
h3 {
font-family: 'Montserrat', Arial;
text-transform: uppercase;
font-size: 15px;
}
select {
width: 230px;
height: 34px;
border: 1px solid #bdcada;
font-size: 14px;
font-weight: bold;
margin: 10px 0 0 0;
padding-left: 8px;
border-radius: 3px;
}
table,
th,
td {
border: 1px solid #bdcada;
}
input.search_button {
color: black;
font-weight: bold;
font-size: 10px;
font-family: 'Montserrat', Arial;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 2px;
}
.height-112px {
height: 112px;
}
#logo-box {
float: left;
margin-left: 20px;
margin-top: 10px;
width: 250px;
}
#mobile-menu-icon,
#mobile-profile-icon {
display: none;
}
#top-nav {
position: absolute;
width: 100%;
background-color: #282828;
min-height: 42px;
top: 70px;
color: #fff;
}
.top-nav-links {
list-style-type: none;
padding: 0px;
margin: 0px;
padding-left: 20px;
padding-right: 20px;
line-height: 42px;
}
.top-nav-links li {
font-weight: bold;
display: inline;
margin-right: 15px;
font-size: 10px;
text-transform: uppercase;
font-family: 'Montserrat', Arial;
}
.top-nav-links a {
color: #676767;
text-decoration: none;
}
.top-nav-links a:hover {
color: #fff;
}
.active-top a {
color: #fff;
}
#details-box {
padding: 30px 20px 30px 20px;
border-bottom: 1px solid #bdcada;
}
#height-5px {
height: 5px;
}
.details-1 {
font-weight: bold;
font-size: 14px;
color: #1072ad;
}
.details-2 {
font-style: italic;
font-size: 12px;
color: #9ca6b6;
margin-left: 10px;
}
.details-3 {
font-weight: bold;
font-size: 12px;
color: #000;
margin-left: 10px;
}
#details-box a {
text-decoration: none;
}
.logout {
font-size: 11px;
color: red;
}
#property-box {
padding: 25px 20px 30px 20px;
}
.blue-nav-title {
font-family: 'Montserrat', Arial;
font-weight: bold;
font-size: 12px;
color: #1072ad;
text-transform: uppercase;
}
.list-title {
height: 42px;
background-image: url('img/top-bg.png');
padding: 0 20px 0 20px;
border-bottom: 1px solid #0b5987;
line-height: 42px;
font-family: 'Montserrat', Arial;
font-size: 12px;
color: #fff;
text-transform: uppercase;
}
.nav-links {
list-style-type: none;
padding: 0px;
margin: 0px;
}
.nav-links li {
font-size: 12px;
color: #6e7888;
padding-left: 20px;
line-height: 50px;
border-bottom: 1px solid #bdcada;
}
.nav-links a {
text-decoration: none;
color: #6e7888;
}
.nav-links li:before {
content: "â–º ";
font-size: 7px;
color: #157cb8;
vertical-align: top;
margin-right: 8px;
}
.nav-links a:hover {
text-decoration: none;
color: #000;
}
.active {
background: #fff;
}
#content {
margin-left: 50px;
margin-top: 92px;
}
table {
font-size: 12px;
border-collapse: collapse;
width: 100%;
overflow-y: scroll;
height: 300px;
display: block;
}
table td,
th {
padding: 10px;
}
table tr:hover {
background: #f0f6f9;
}
.table-b {
font-size: 12px;
border-collapse: collapse;
width: AUTO;
HEIGHT: AUTO;
display: block;
}
.table-b td,
th {
padding: 10px;
}
.table-b tr:hover {
background: #f0f6f9;
}
.table-a {
font-size: 12px;
border-collapse: collapse;
width: 100%;
}
.table-a td,
th {
padding: 10px;
}
.table-a tr:hover {
background: #f0f6f9;
}
form.searchform {
display: inline-block;
}
#login {
width: 240px;
border: 1px solid #bdcada;
border-radius: 3px;
padding: 30px;
font-size: 12px;
}
.input {
width: 230px;
height: 30px;
border: 1px solid #bdcada;
font-size: 14px;
font-weight: bold;
margin-top: 5px;
margin-bottom: 10px;
padding-left: 8px;
border-radius: 3px;
}
.divTable {
display: table;
width: auto;
background-color: #eee;
border: 1px solid #666666;
border-spacing: 5px;
}
.divRow {
display: table-row;
width: auto;
clear: both;
background-color: #ccc;
}
.divCell {
float: left;
display: table-column;
width: 100px;
border-left: 2px solid #fff;
}
/* columns float left while they fit – some spacing in there too between columns*/
#column {
width: 48%;
float: left;
padding-right: 20px;
}
/*the table will always fill up the space of the column – column starts at 50% of the screen width so two can fit */
table {
width: 100%;
margin-bottom: 20px
}
/* responsive breakpoint – at 1000px screen, the tables no longer fit side by side, so they auto-fit top-to-bottom, so make them each full width */
#media screen and (max-width: 1000px) {
#column {
width: 100%;
}
#media only screen and (max-device-width: 768px) {
body, html {
width: 100%;
margin: 0;
font-size: 14px;
}
header {
position: initial;
height: auto;
}
aside {
width: 100%;
position: initial;
min-height: initial;
}
section {
position: initial;
}
select {
width: 100%;
height: auto;
padding: 8px;
font-size: inherit;
}
.height-112px {
height: auto;
}
#logo-box {
float: none;
margin: 0px;
width: 100%
}
#logo-img {
margin: 10px 10px 5px 10px;
}
#mobile-menu-icon,
#mobile-profile-icon {
display: block;
float: right;
height: 45px;
width: 45px;
margin: 12px 12px 5px 0px;
}
#top-nav {
position: initial;
display: none;
clear: both;
border-bottom: 1px solid #bdcada;
background-color: inherit;
width: 100%;
min-height: inherit;
}
.top-nav-links li {
display: block;
width: 100%;
font-size: 16px;
line-height: 36px;
}
.top-nav-links li:first-child {
padding-top: 10px;
}
.top-nav-links li:last-child {
padding-bottom: 10px;
}
.top-nav-links a {
color: #000;
}
.active-top a {
color: #1067a6;
}
#details-box {
display: none;
padding: 20px;
}
.details-1,
.details-2,
.details-3,
.logout {
font-size: inherit;
}
#property-box {
padding: 20px;
}
.blue-nav-title {
font-family: 'Montserrat', Arial;
font-weight: bold;
font-size: inherit;
color: #1072ad;
text-transform: uppercase;
}
.list-title {
font-size: inherit;
}
.list-title:after {
content: "+";
font-weight: bold;
font-size: 18px;
float: right;
}
.opened:after {
content: "-";
font-weight: bold;
font-size: 18px;
float: right;
}
.nav-links {
display: none;
}
.nav-links li {
font-size: inherit;
}
.nav-links li:before {
content: "â–º ";
font-size: 11px;
}
#content {
margin: 0;
padding: 15px;
}
table {
font-size: inherit;
}
table tr.odd {
background: #eeeeee;
}
table th {
font-weight: normal;
text-align: left;
}
#login {
width: 100%;
padding: 20px;
max-width: 400px;
margin: 0 auto;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
font-size: inherit;
}
.input {
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
font-size: inherit;
}
}
#media only screen and (min-device-width: 200px) and (max-device-width: 319px) {
#mobile-menu-icon, #mobile-profile-icon {
display: block;
float: right;
height: 40px;
width: 40px;
margin: 13px 10px 5px 0px;
}
}
#media only screen and (min-device-width: 425px) and (max-device-width: 600px) {
body, html {
width: 100%;
margin: 0;
font-size: 15px;
}
}
#media only screen and (min-device-width: 600px) and (max-device-width: 768px) {
body, html {
width: 100%;
margin: 0;
font-size: 16px;
}
}
body{
background:black}
<li>
<FORM class="searchform" NAME="Search" ACTION="./index.cfm?P=128" METHOD=POST>
<INPUT type="text" name=search value="" STYLE="color: #676767; background-color: #282828; line-height: 18px" size="10" maxlength="40" Placeholder="search">
<INPUT class="search_button" TYPE=SUBMIT NAME="SubmitButton1" VALUE="Search" ID="SubmitButton1">
</FORM>
</li>

Floating and positioning in CSS

I've been working on this for a while trying to figure out floating and margins, but I cant seem to get it to work correctly. I think I've done most of everything that the book says to do in this picture, this is what I'm trying to make it look like
I think I might be floating things wrong, everything is just stacking on top of each other on the left side. Here is my fiddle: http://jsfiddle.net/d2u9qLxv/
I've been messing around with the floating and just can't seem to get the hang of it.
Here's my css:
header, footer, nav, div, p, body {
font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;
font-size: 1em;
}
header {
background-color: rgb(63, 159, 217);
height: 3em;
}
header .brand {
float: left;
font-family: Vendana, Arial, sans-serif;
padding: 8px 20px 12px;
margin-left: 3em;
font-size: 1.5em;
font-weight: bold;
line-height: 1;
color: #f5f5f5;
text-decoration: none;
}
header nav {
margin: 0.70em 1em 0 0;
}
header ul {
float: left;
margin:0;
padding:0;
}
header li {
padding: 0 1em;
}
header li a:link {
color: #f5f5f5;
text-decoration: none;
}
/* Main structure */
div#container {
}
#main {
margin: 0 20em 0 16em;
}
aside {
}
#rail {
}
/* other common classes */
.well, .alert {
margin-bottom: 2em;
padding: 1em;
}
.well {
float: left;
position: absolute;
width: 15em;
background-color: #f5f5f5;
border: 1px solid #eee;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.well h3 {
float: right;
position: absolute;
width: 19em;
background-color: #b6d1f2;
padding: 1em;
}
.alert {
float: left;
position: absolute;
width: 15em;
background-color: #edebe1;
border-color: #e0d9cb;
color: #817b58;
}
.breadcrumb {
padding: 0.5em 1em;
list-style: none;
background-color: #fbfbfb;
}
/* main styles */
#main {
padding: 0.5em 0.75em;
}
#main h2 {
padding-top: 1em;
font-size: 1.5em;
}
#main h4 {
padding-top: 1.5em;
font-size: 1.2em;
}
#main th {
text-align: left;
}
#main table {
}
#main #yourCompany {
margin-bottom: 1.5em;
font-size: 0.8em;
}
#main #client {
font-size: 0.8em;
}
#main hr {
clear: both;
}
.bigButton {
margin-top: 1em;
background-color: rgb(63, 159, 217);
text-align: center;
color: #f5f5f5;
text-decoration: none;
}
/* left rail styles */
#rail nav {
}
#rail nav ul {
list-style-type:none;
font-size: 1.1em;
}
#rail nav ul li {
margin-bottom: 0.3em;
}
/* right aside styles */
ul#changeList, ul#sellersList, ul#messageList {
background-color: white;
list-style-type:none;
}
ul#changeList li {
overflow: auto;
padding-top: 1em;
}
ul#changeList li p{
padding-top: 0.5em;
}
ul#changeList li span {
min-width: 1.75em;
text-align: right;
font-size: 2em;
padding: 0 1em 0 0;
color: #616466;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
ul#sellersList li, ul#messageList li {
overflow: auto;
padding: 1em 0.25em 0 0;
font-size: 0.75em;
}
ul#sellersList img{
}
ul#sellersList p {
padding-top: 1.5em;
}
ul#messageList img {
padding-right: 0.5em;
}
#messageList li p {
font-size: 0.9em;
padding: 0.3em 0.25em;
}
Try something like this DEMO
header, footer, nav, div, p, body {
font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;
font-size: 1em;
}
header {
background-color: rgb(63, 159, 217);
height: 3em;
}
header .brand {
float: left;
font-family: Vendana, Arial, sans-serif;
padding: 8px 20px 12px;
margin-left: 3em;
font-size: 1.5em;
font-weight: bold;
line-height: 1.2em;
color: #f5f5f5;
text-decoration: none;
}
header nav {
margin: 0.70em 1em 0 0;
}
header ul {
float: left;
margin:0;
padding:0;
}
header li {
list-style:none;
padding: 0 1em;
float:left;
line-height: 3em;
}
header li a:link {
color: #f5f5f5;
text-decoration: none;
}
/* Main structure */
div#container {
}
#main {
margin: 0 20em 0 16em;
}
aside {
}
#rail {
}
/* other common classes */
.well, .alert {
margin-bottom: 2em;
padding: 1em;
}
.well {
float: left;
position: absolute;
width: 15em;
background-color: #f5f5f5;
border: 1px solid #eee;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.well h3 {
float: right;
position: absolute;
width: 19em;
background-color: #b6d1f2;
padding: 1em;
}
.alert {
float: left;
position: absolute;
width: 15em;
background-color: #edebe1;
border-color: #e0d9cb;
color: #817b58;
}
.breadcrumb {
padding: 0.5em 1em;
list-style: none;
background-color: #fbfbfb;
}
/* main styles */
#main {
padding: 0.5em 0.75em;
width: 60%;
}
#main h2 {
padding-top: 1em;
font-size: 1.5em;
}
#main h4 {
padding-top: 1.5em;
font-size: 1.2em;
}
#main th {
text-align: left;
}
#main table {
}
#main #yourCompany {
float:left;
margin-bottom: 1.5em;
font-size: 0.8em;
}
#main #client {
float:right;
font-size: 0.8em;
}
#main hr {
clear: both;
}
.bigButton {
margin-top: 1em;
background-color: rgb(63, 159, 217);
text-align: center;
color: #f5f5f5;
text-decoration: none;
}
/* left rail styles */
#rail {
width:20%
}
#rail nav {
}
#rail nav ul {
list-style-type:none;
font-size: 1.1em;
}
#rail nav ul li {
margin-bottom: 0.3em;
}
/* right aside styles */
ul#changeList, ul#sellersList, ul#messageList {
background-color: white;
list-style-type:none;
}
ul#changeList li {
overflow: auto;
padding-top: 1em;
}
ul#changeList li p{
padding-top: 0.5em;
}
ul#changeList li span {
min-width: 1.75em;
text-align: right;
font-size: 2em;
padding: 0 1em 0 0;
color: #616466;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
ul#sellersList li, ul#messageList li {
overflow: auto;
padding: 1em 0.25em 0 0;
font-size: 0.75em;
}
ul#sellersList img{
}
ul#sellersList p {
padding-top: 1.5em;
}
ul#messageList img {
padding-right: 0.5em;
}
#messageList li p {
font-size: 0.9em;
padding: 0.3em 0.25em;
}
aside{width:20%}
table img{
width: 150px;
height: 150px;
background: #333;
}
The menu options are showing vertically instead of floating leftwards because you've put the float: left onto the ul element; it should be on the li list elements themselves, so they all float left with respect to each other.
However, the more usual way of doing menus, which avoids the vagaries of floating, is to make the list elements to be inline elements (they are block elements by default to achieve the vertical nature of lists. So use:
li { display: inline; }
You will also need:
ul { list-style-type: none; }
to get rid of the bullet points.

HTML page randomly showing gigantic fonts

I have a Wordpress website.
Upon visitng the pages for the first time I randomly sometimes get gigantic fontsizes as show in this image. In such cases, pressing F5 and relading the page fixes the problem as show in this second image.
Has anybody got any idea?
Please find below my css:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{
background: transparent;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
font-family: 'Cardo', "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
html /****/
{
font-size: 62.5;
}
#comments
{
}
.comment-content p
{
margin-bottom: 15px;
}
body
{
line-height: 1;
}
h1, h2, h3, h4, h5, h6
{
clear: both;
font-weight: bold;
}
ol, ul
{
list-style: none;
}
blockquote
{
quotes: none;
}
blockquote:before, blockquote:after
{
content: '';
content: none;
}
del
{
text-decoration: line-through;
}
/*tables still need 'cellspacing="0"' in the markup*/
table
{
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 10px;
}
table td, table th
{
padding: 5px;
}
a img
{
border: none;
}
a, a:visited {
outline: 0;
}
/*=Fonts
--------------------------------------------------------------*/
body, input, textarea, .page-title span, .pingback a.url
{
font-family: 'Cardo', "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
h3#comments-title, h3#reply-title, #access .menu, #access div.menu ul, #cancel-comment-reply-link, .form-allowed-tags, #site-info, #site-title, #wp-calendar, .comment-meta, .comment-body tr th, .comment-body thead th, .entry-content label, .entry-content tr th, .entry-content thead th, .entry-meta, .entry-title, .entry-utility, #respond label, .navigation, .page-title, .pingback p, .reply, .widget-title, .wp-caption-text
{
font-family: 'Cardo', "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
input[type=submit]
{
font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
pre
{
font-family: "Courier 10 Pitch", Courier, monospace;
}
code
{
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
#site-title a
{
font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
}
#colleft #access a
{
font-family: Geneva, Tahoma, Verdana, sans-serif;
}
.widget-title
{
font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
}
.entry-title
{
font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
}
.entry-content
{
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
/*
=Typography
--------------------------------------------------------------*/
.widget-area, #commentform
{
font-size: 14px;
font-size: 1.4rem;
}
.entry-content
{
display: inline-block;
/*color: #BBB;*/
font-size: 14px;
font-size: 1.3rem;
line-height: 26px;
line-height: 1.6rem;
/*font-family:'Cardo', "Century Gothic", CenturyGothic, AppleGothic, sans-serif;*/
margin-bottom: 15px;
}
.entry-content:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac */
* html .entry-content
{height: 1%;}
.entry-content
{display: block;}
/* End hide from IE-mac */
body
{
color: white;/*#CCC;*/
}
#site-title a
{
color: #FFF;
text-decoration: none;
font-size: 20px;
font-size: 2rem;
word-wrap: break-word;
}
#colleft #access a
{
text-transform: uppercase;
font-size: 12px;
font-size: 1.0rem;
font-weight: 600;
color: #FFF;
line-height:1.2rem;
}
#colophon a, #colophon a:visited
{
color: #CCC;
font-size: 14px;
font-size: 1.4rem;
}
#colophon
{
font-family: 'Cardo', serif, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-size: 14px;
font-size: 1.4em;
}
.entry-title
{
font-size: 24px;
font-size: 2.3rem;
color: #EEE;
}
.widget-title, #reply-title
{
color: #777;
font-size: 14px;
font-weight: bold;
}
.form-allowed-tags
{
font-size: 12px;
}
.page-title
{
font-size: 19px;
font-size: 1.9rem;
font-weight: bold;
}
#credits, #credits a {
font-size:12px;
font-size:1.2rem;
font-weight: bold;
}
#site-generator {
}
/*Global styles
----------------------------------------------------------------
Text elements*/
p
{
margin-bottom: 1.625em;
}
ul, ol
{
margin: 0 0 1.625em 2.5em;
}
ul
{
list-style: square;
}
ol
{
list-style-type: decimal;
}
ol ol
{
list-style: upper-alpha;
}
ol ol ol
{
list-style: lower-roman;
}
ol ol ol ol
{
list-style: lower-alpha;
}
ul ul, ol ol, ul ol, ol ul
{
margin-bottom: 0;
}
dl
{
margin: 0 1.625em;
}
dt
{
font-weight: bold;
}
dd
{
margin-bottom: 1.625em;
}
strong
{
font-weight: bold;
}
cite, em, i
{
font-style: italic;
}
blockquote
{
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-style: italic;
font-weight: normal;
margin: 0 3em;
}
blockquote em, blockquote i, blockquote cite
{
font-style: normal;
}
blockquote cite
{
color: #666;
font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
letter-spacing: 0.05em;
text-transform: uppercase;
}
pre
{
color: #333;
background: #BBB;
font: 13px "Courier 10 Pitch", Courier, monospace;
line-height: 1.5;
margin-bottom: 1.625em;
overflow: auto;
padding: 0.75em 1.625em;
}
code, kbd
{
font: 13px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
abbr, acronym, dfn
{
border-bottom: 1px dotted #666;
cursor: help;
}
address
{
display: block;
margin: 0 0 1.625em;
}
ins
{
background: #FFF9C0;
text-decoration: none;
}
sup, sub
{
font-size: 10px;
font-size: 1.0rem;
height: 0;
line-height: 1;
position: relative;
vertical-align: baseline;
}
sup
{
bottom: 1ex;
}
sub
{
top: 0.5ex;
}
/*Forms*/
input[type=text], input[type=password], textarea
{
background: #EEE;
-moz-box-shadow: inset 0 1px 1px #bbb;
-webkit-box-shadow: inset 0 1px 1px #bbb);
box-shadow: inset 0 1px 1px #BBB;
border: 1px solid #DDD;
color: #888;
}
input[type=text]:focus, textarea:focus
{
color: #373737;
}
textarea
{
padding-left: 3px;
width: 98%;
}
input[type=text]
{
padding: 3px;
}
input#s
{
-moz-border-radius: 2px;
border-radius: 2px;
font-size: 14px;
height: 22px;
line-height: 1.2em;
padding: 4px 10px 4px 28px;
}
input#searchsubmit
{
display: none;
}
a, a:visited
{
color: #FF6347;
}
/*=General Styles
--------------------------------------------------------------*/
.entry-header
{
width: 100%;
display: inline-block;
margin-bottom: 15px;
}
.entry-title
{
border-bottom: 1px solid grey;/*#222;*/
padding-bottom: 10px;
}
#respond p
{
margin-top: 10px;
}
#respond input, #comments #respond textarea
{
margin-top: 5px;
}
#respond
{
color: #444444;
}
.clear
{
clear: both;
}
#site-generator
{
padding-left: 60px;
}
#main
{
display:inline-block;
margin: 40px;
}
/*
#main:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}*/
/* Hides from IE-mac */
* html #main
{height: 1%;}
#main
{display: block;}
/* End hide from IE-mac */
#image-navigation
{
margin-top: 5px;
}
.page-title
{
margin-bottom: 10px;
}
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6
{
margin-bottom: 20px;
}
.entry-content img
{
outline: 2px solid white;
}
.archive .entry-title
{
margin-top: 20px;
}
.attachment .entry-caption
{
margin-top:10px;
}
#comments-title
{
font-size: 16px;
margin-bottom: 25px;
}
.comment-content
{
font-size: 14px;
line-height: 18px;
color: #AAA;
}
#comments
{
clear: both;
}
#comments .navigation
{
padding: 0 0 18px;
}
h3#comments-title, h3#reply-title
{
color: #999;
font-size: 20px;
font-weight: bold;
margin-bottom: 0;
}
h3#comments-title
{
padding: 24px 0;
}
.commentlist
{
list-style: none;
margin: 0;
}
.commentlist li.comment
{
border-bottom: 1px solid #111;
line-height: 24px;
margin: 0 0 24px;
padding: 0 0 0 65px;
position: relative;
}
.commentlist li:last-child
{
border-bottom: none;
margin-bottom: 0;
}
#comments .comment-body ul, #comments .comment-body ol
{
margin-bottom: 18px;
}
#comments .comment-body p:last-child
{
margin-bottom: 6px;
}
#comments .comment-body blockquote p:last-child
{
margin-bottom: 24px;
}
.commentlist ol
{
list-style: decimal;
}
.commentlist .avatar
{
position: absolute;
top: 4px;
left: 0;
}
.comment-author
{
}
.comment-author cite
{
color: #CCC;
font-style: normal;
font-weight: bold;
}
.comment-author .says
{
font-style: italic;
}
.comment-meta
{
font-size: 12px;
margin: 0 0 13px;
}
.comment-meta a:link, .comment-meta a:visited
{
color: #888;
text-decoration: none;
}
.comment-meta a:active, .comment-meta a:hover
{
color: #FF4B33;
}
.commentlist .even
{
}
.commentlist .bypostauthor
{
}
.reply
{
font-size: 12px;
padding: 0 0 24px;
}
.reply a, a.comment-edit-link
{
color: #888;
}
.reply a:hover, a.comment-edit-link:hover
{
color: #FF4B33;
}
.commentlist .children
{
list-style: none;
margin: 0;
}
.commentlist .children li
{
border: none;
margin: 0;
}
.nopassword, .nocomments
{
display: none;
}
#comments .pingback
{
border-bottom: 1px solid #E7E7E7;
margin-bottom: 18px;
padding-bottom: 18px;
}
.commentlist li.comment + li.pingback
{
margin-top: -6px;
}
#comments .pingback p
{
color: #888;
display: block;
font-size: 12px;
line-height: 18px;
margin: 0;
}
#comments .pingback .url
{
font-size: 13px;
font-style: italic;
}
.entry-meta a
{
color: #EEE;
}
/*=Structure
--------------------------------------------------------------*/
#commentform
{
padding: 10px;
}
#wrapper
{
margin: 0 auto;
width: 1200px;
height: 100%;
}
#colleft
{
width: 230px;
float: left;
margin-right: 50px;
margin-top: 20px;
border-top: 0;
background:rgba(70,70,70,0.90);
border-bottom:1px solid rgba(57,57,57,0.6);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#99464646',endColorstr='#99464646',GradientType=0);
}
#branding h1,#branding h2
{
text-align: center;
text-indent: -9999px;
margin:0;
paading:0;
}
#logo
{
margin-top:0;
height:144px;
background:url('images/Locandina_Logo.jpg') no-repeat center;
background-position:50% 0;
}
#wrapper #colleft a img {
display:block;
margin:auto;
width:100%;
}
.home #page
{
display: none;
}
#page
{
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.4);
border: none;
display: block;
width: 730px;
margin-top: 20px;
float: left;
height:auto;
background:rgba(70,70,70,0.90);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#99464646',endColorstr='#99464646',GradientType=0);
overflow:hidden;
}
#primary
{
/*float: left;*/
width: 80%;
}
#page #main .full-width {
width:100%;
}
#content
{
margin-right:40px;
}
#main .widget-area
{
float: right;
overflow: hidden;
width: 0px;
}
.widget-area
{
color: #999;
}
#colophon
{
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.4);
border-top: 1px solid #222;
clear: both;
display: block;
bottom: 0;
left: 0;
height: 15px;
margin-top: 30px;
position: relative;
}
.home #colophon
{
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.4);
border-top: 1px solid #222;
clear: both;
display: block;
width: 100%;
bottom: 0;
right: 0;
left: 0;
height: 15px;
position: fixed;
}
#content .post
{ display: block;
margin-bottom: 25px;
}
.post .entry-title a, .post .entry-title a:visited
{
text-decoration: none;
color: #EEE;
word-wrap: break-word;
}
.page-template-template-blog-php .page-title {
margin-bottom:20px;
}
/*Increase the size of the content area for templates without sidebars*/
.full-width #content, .image-attachment #content, .error404 #content
{
margin: 0;
}
/*Text meant only for screen readers*/
.screen-reader-text, .assistive-text
{
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
/*IE6, IE7*/
clip: rect(1px, 1px, 1px, 1px);
}
/*Alignment*/
.alignleft
{
display: inline;
float: left;
}
.alignright
{
display: inline;
float: right;
}
.aligncenter
{
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
/*=Header
--------------------------------------------------------------*/
#site-title
{ text-align: center;
font-size: 2em;
font-weight: bold;
margin: 0.67em 0;
padding:0 5px;
}
#site-description
{
text-align: center;
color: #CCCCCC;
font-size: 12px;
font-weight: normal;
margin: 0 0 1em;
padding:0 5px;
}
/*=Menu
--------------------------------------------------------------*/
#access
{
display: block;
margin: 10px auto;
width: 80%;
}
#access ul
{
list-style: none;
margin: 0;
padding-left: 0;
}
#access li
{
position: relative;
}
#access li a
{
padding: 10px;
}
#access a
{
display: block;
line-height: 15px;
padding: 0 1em;
text-decoration: none;
}
#access ul ul
{
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
position: absolute;
top: 0;
left: 100%;
z-index: 99999;
}
#access ul ul ul
{
left: 100%;
top: 0;
}
#access ul ul a
{
width: 10em;
height: auto;
}
#access li:hover > a, #access ul ul :hover > a
{
background: #DEDEDE;
color: #555 !important;
}
#access ul ul a:hover
{
color: #555 !important;
}
#access ul li:hover > ul
{
display: block;
color: #555;
}
#access .menu li a:hover
{
color: #555;
}
#access .children li
{
background-color: #999999 !important;
}
#access .sub-menu li
{
background-color: #999999 !important;
}
.menu
{
text-align: center;
}
.menu li
{
border-top: 1px solid grey;/* #222;*/
}
.menu .sub-menu li
{
border-top: 1px solid #888;
}
.menu .children li
{
border-top: 1px solid #888;
}
.menu li:first-child
{
border: 0;
}
/*=Content
--------------------------------------------------------------*/
.sticky
{
}
.entry-meta
{
color: #ccc;
margin-top: 10px;
clear: both;
display: block;
font-size: 12px;
font-weight:bold;
}
.single-author .entry-meta .byline
{
display: none;
}
#content nav
{
padding-bottom: 5px;
display: block;
overflow: hidden;
font-size: 11px;
font-size: 1.1rem;
}
#content nav .nav-previous
{
float: left;
width: 50%;
}
#content nav .nav-next
{
float: right;
text-align: right;
width: 50%;
}
#content #nav-above
{
display: none;
}
.paged #content #nav-above, .single #content #nav-above
{
display: block;
}
#nav-below
{
margin: 1em 0 0;
}
.page-link
{
clear: both;
margin: 0 0 1em;
}
.page .edit-link
{
clear: both;
}
/*404 page*/
.error404 .widget
{
float: left;
width: 33%;
}
.error404 .widget .widgettitle, .error404 .widget ul
{
margin-right: 1em;
}
.error404 .widget_tag_cloud
{
clear: both;
float: none;
width: 100%;
}
/*Notices*/
.post .notice, .error404 #searchform
{
background: #EEE;
display: block;
padding: 1em;
}
/*Image Attachments*/
#image-navigation {
margin: 10px 0 0 10px;
}
.image-attachment div.entry-meta
{
float: left;
}
.image-attachment nav
{
float: right;
margin: 0 0 1em;
}
.image-attachment .entry-content
{
clear: both;
}
.image-attachment .entry-content .entry-attachment
{
margin: 0 0 1em;
text-align: center;
margin-top: 6px;
}
.image-attachment .entry-content .attachment
{
display: block;
margin: 0 auto;
text-align: center;
}
/*Aside Posts*/
.format-aside .entry-header
{
display: none;
}
.single .format-aside .entry-header
{
display: block;
}
.format-aside .entry-content, .format-aside .entry-summary
{
padding-top: 1em;
}
.single .format-aside .entry-content, .single .format-aside .entry-summary
{
padding-top: 0;
}
/*Gallery Posts*/
.format-gallery .gallery-thumb
{
float: left;
margin: 0 1em 0 0;
}
/*Image Posts*/
.format-image .entry-header
{
display: none;
}
.single .format-image .entry-header
{
display: block;
}
.format-image .entry-content, .format-image .entry-summary
{
padding-top: 1em;
}
.single .format-image .entry-content, .single .format-image .entry-summary
{
padding-top: 0;
}
/*=Images
--------------------------------------------------------------*/
img
{
margin: 10px 0;
}
#supersized img
{
margin: 0;
}
a img
{
border: none;
}
p img
{
}
/*
Resize images to fit the main content area.
- Applies only to images uploaded via WordPress by targeting size-* classes.
- Other images will be left alone. Use "size-auto" class to apply to other images.
*/
img.size-auto, img.size-full, img.size-large, img.size-medium, .attachment img, .widget-area img, .wp-caption
{
max-width: 100%;
/*When images are too wide for containing element, force them to fit.*/
height: auto;
/*Override height to match resized width for correct aspect ratio.*/
}
img.alignleft
{
margin-right: 1em;
}
img.alignright
{
margin-left: 1em;
}
.wp-caption
{
text-align: center;
}
.wp-caption img
{
}
.wp-caption .wp-caption-text
{
margin: 0.5em;
}
.gallery-caption
{
}
.wp-smiley
{
margin: 0;
}
/*=Forms
--------------------------------------------------------------*/
button, #submit {
background: #222;
border: 1px solid #666;
color: white;
cursor: pointer;
font-family: Georgia, "Times New Roman", Times, serif;
padding: 5px 10px;
width: auto;
color:#aaa;
}
#searchform label
{
display: none;
}
#searchform {
padding:10px;
}
#searchform input#s
{
width: 60%;
}
input[type=text], input#s
{
margin: 0 1em 0 0;
width: 60%;
}
textarea
{
width: 80%;
}
/*Class for labelling required form items*/
.required
{
color: #CC0033;
}
/*=Comments
--------------------------------------------------------------*/
#comments
{
margin-top: 30px;
}
article.comment
{
display: block;
}
#respond input[type=text]
{
display: block;
width: 60%;
}
#respond textarea
{
display: block;
margin: 0 0 1em;
width: 80%;
}
#respond .form-allowed-tags
{
clear: both;
width: 80%;
}
#respond .form-allowed-tags code
{
display: block;
}
/*=Widgets
--------------------------------------------------------------*/
.widget
{
display: block;
margin-top: 20px;
}
.widget ul
{
margin: 5px 10px 10px;
padding: 10px;
}
.widget ul li
{
margin-top: 5px;
padding-top: 5px;
border-top: 1px solid #222;
}
.widget ul li a, .widget ul li a:visited
{
text-decoration: none;
color: #999;
}
.widget-area .widget_search
{
overflow: hidden;
}
.widget-area .widget_search input
{
float: left;
}
/*=Footer
--------------------------------------------------------------*/
#colophon
{
padding: 10px;
background: #000000;
}
/*Gallery
---------------------------------------------------------------*/
#content .gallery .gallery-item img
{
border:0;
width: 350px;
height: 175px;
padding: 0;
}
#content .gallery .gallery-item {
width:100%;
margin:0;
text-align:left;
}
#main #content .gallery-caption
{
margin: 0 auto;
font-size: 12px;
}
#main .image-attachment
{
width: 100%;
}
.entry-attachment img
{
width:650px;
padding: 0;
margin: 0;
}
.attachment-thumbnail {
width:350px;
height:175px;
margin-left: 20px;
margin-bottom: 20px;
}
Maybe you are zoomed in. Check this by pressing Ctrl+0.
I have fixed the problem. I was using rem based font sizes. However for some strange reason I was getting gigantic font size on size occations, some other times it was working as expected.
Reverting to tradition px sizes, did do the trick. I know it is not the best solution, but I got the job done.

web responsive design using tapestry

I want to build a web responsive website with tapestry, I add the meta data in the head section of the .tml file and used the css for the responsive design. However it doesn't work at all. I tested with an elastic youtube video, which should match the width of the page. I post here the .tml file and the css.
The .tml file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"
xmlns:p="tapestry:parameter">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link href="${context:layout/normalize.css}" rel="stylesheet" type="text/css"/>
<title>${title}</title>
</head>
<body>
<!-- start header -->
<div class="header">
<div class="logo">
<h1>
<t:pagelink page="index">com.example:tutorial1</t:pagelink>
version ${appVersion}
</h1>
</div>
<div class="menu">
<ul>
<li t:type="loop" source="pageNames" value="pageName" class="prop:classForPageName">
<t:pagelink page="prop:pageName">${pageName}</t:pagelink>
</li>
</ul>
</div>
<div class="video-container">
<iframe width="560" height="315" src="http://www.youtube.com/embed/R800WcsFj0U" frameborder="0"></iframe>
</div>
</div>
<!-- end header -->
<!-- start page -->
<div class="page">
<!-- start sidebar -->
<div class="sidebar">
<ul>
<li class="search" style="background: none;">
</li>
<li>
<t:alerts/>
</li>
<li t:type="if" test="sidebar">
<h2>${sidebarTitle}</h2>
<div class="sidebar-content">
<t:delegate to="sidebar"/>
</div>
</li>
</ul>
</div>
<!-- end sidebar -->
<!-- start content -->
<div class="content">
<div class="post">
<div class="title">
<h2>${title}</h2>
</div>
<div class="entry">
<t:body/>
</div>
</div>
</div>
<!-- end content -->
<br style="clear: both;"/>
</div>
<!-- end page -->
<!-- start footer -->
<div class="footer">
<p class="legal">
©2012 com.example. All Rights Reserved.
•
Design by
Free CSS Templates
•
Icons by
FAMFAMFAM.
</p>
</div>
<!-- end footer -->
</body>
</html>
The css file:
body {
margin: 0;
padding: 0;
background: #FFFFFF url(images/img01.jpg) repeat-x;
text-align: justify;
font: 15px Arial, Helvetica, sans-serif;
color: #626262;
}
form {
margin: 0;
padding: 0;
}
input {
padding: 5px;
background: #FEFEFE url(images/img13.gif) repeat-x;
border: 1px solid #626262;
font: normal 1em Arial, Helvetica, sans-serif;
}
h1, h1 a, h2, h2 a, h3, h3 a {
margin: 0;
text-decoration: none;
font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #444444;
}
h1 {
letter-spacing: -1px;
font-size: 2.2em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h2 {
letter-spacing: -1px;
font-size: 2em;
}
h3 {
font-size: 1em;
}
p, ol, ul {
margin-bottom: 2em;
line-height: 200%;
}
blockquote {
margin: 0 0 0 1.5em;
padding-left: 1em;
border-left: 5px solid #DDDDDD;
}
a {
color: #1692B8;
}
a:hover {
text-decoration: none;
}
/* Header */
div.header {
height: 42px;
}
div.logo h1, div.logo p {
float: left;
text-transform: lowercase;
}
div.logo h1 {
padding: 0px 0 0 40px;
}
div.logo p {
margin: 0;
padding: 14px 0 0 4px;
line-height: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
div.logo a {
text-decoration: none;
color: #D0C7A6;
}
div.menu {
float: right;
}
div.menu ul {
margin: 0;
padding: 0;
list-style: none;
}
div.menu li {
display: block;
float: left;
height: 42px;
}
div.menu a {
display: block;
padding: 8px 20px 0px 20px;
text-decoration: none;
text-align: center;
text-transform: lowercase;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 14px;
color: #CEC5A4;
}
div.menu .last {
margin-right: 20px;
}
div.menu a:hover {
color: #FFFFFF;
}
div.menu .current_page_item A {
text-decoration: underline;
}
div.menu .current_page_item a {
}
/* Page */
div.page {
padding: 40px 40px 0 40px;
}
/* Content */
div.content {
margin-right: 340px;
}
.post {
margin-bottom: 10px;
}
.post .title {
border-bottom: 1px #999999 dashed;
font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
}
.post .title h2 {
padding: 30px 30px 0 0px;
text-transform: lowercase;
font-weight: normal;
font-size: 2.2em;
}
.post .title p {
margin: 0;
padding: 0 0 10px 0px;
line-height: normal;
color: #BABABA;
}
.post .title p a {
color: #BABABA;
}
.post .entry {
padding: 20px 0px 20px 0px;
}
.post .links {
margin: 0;
padding: 0 30px 30px 0px;
}
.post .links a {
display: block;
float: left;
margin-right: 10px;
margin-bottom: 5px;
text-align: center;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
}
.post .links a:hover {
}
.post .links .more {
width: 128px;
height: 30px;
background: url(images/img03.jpg) no-repeat left center;
}
.post .links .comments {
width: 152px;
height: 30px;
background: url(images/img04.jpg) no-repeat left center;
}
/* Sidebar */
div.sidebar {
float: right;
width: 300px;
margin-top: 30px;
}
div.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
div.sidebar li {
margin-bottom: 10px;
background: url(images/img10.gif) no-repeat left bottom;
}
div.sidebar li ul {
padding: 0 30px 40px 30px;
}
div.sidebar li li {
margin: 0;
padding-left: 20px;
}
div.sidebar h2 {
padding: 30px 30px 5px 10px;
background: url(images/img09.gif) no-repeat;
text-transform: lowercase;
font-weight: normal;
font-size: 1.6em;
color: #302D26;
}
div.sidebar DIV.sidebar-content {
width: 265px;
margin-left: 10px;
padding-bottom: 1px;
}
div.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
div.video-container iframe,
div.video-container object,
div.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Search */
li.search {
padding: 20px 30px 40px 30px;
}
li.search input {
padding: 0;
width: 70px;
height: 29px;
background: #DFDFDF url(images/img14.gif) repeat-x;
font-weight: bold;
}
li.search #s {
padding: 5px;
width: 150px;
height: auto;
background: #FEFEFE url(images/img13.gif) repeat-x;
border: 1px solid #626262;
font: normal 1em Arial, Helvetica, sans-serif;
}
li.search br {
display: none;
}
/* Categories */
div.sidebar div.categories li {
background: url(images/img12.gif) no-repeat left center;
}
/* Calendar */
div.calendar_wrap {
padding: 0 30px 40px 30px;
}
div.calendar table {
width: 100%;
text-align: center;
}
div.calendar thead {
background: #F1F1F1;
}
div.calendar tbody td {
border: 1px solid #F1F1F1;
}
div.calendar #prev {
text-align: left;
}
div.calendar #next {
text-align: right;
}
div.calendar tfoot a {
text-decoration: none;
font-weight: bold;
}
div.calendar #today {
background: #FFF3A7;
border: 1px solid #EB1400;
font-weight: bold;
color: #EB1400
}
/* Footer */
div.footer {
padding: 70px 0 50px 0;
background: #757575 url(images/img08.gif) repeat-x;
}
div.footer p {
margin-bottom: 1em;
text-align: center;
line-height: normal;
font-size: .9em;
color: #BABABA;
}
div.footer a {
padding: 0 20px;
text-decoration: none;
color: #DDDDDD;
}
div.footer a:hover {
color: #FFFFFF;
}
div.footer .rss {
background: url(images/img18.gif) no-repeat left center;
}
div.footer .xhtml {
background: url(images/img19.gif) no-repeat left center;
}
div.footer .css {
background/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
div.footer .legal a {
padding: 0;
}
/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
/*Smartphone*/
#media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
Thank you very much.
You are missing a closing brace. It goes between the 2nd and 3rd line below.
div.footer .css {
background/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
As Lee Meador already pointed out you are missing the closing braces for your footer declaration, also the background markup is incomplete. it should be something like this (deduced from your other markup):
div.footer .css {
background: url(images/img20.gif) no-repeat left center;
}
#media .... etc.
Instead of rolling your own, I would suggest looking at an existing library that already is responsive, and then customizing it, so save yourself some time instead of re-inventing the wheel.
Bootstrap is one such excellent library. You can also integrate it easily into Tapestry using the tapestry-bootstrap integration project. I have used this combo on multiple responsive applications, some exclusively for mobiles, and have been quite successful.