I published a working version of my site to my wwwroot folder, but when I open the website some of the design is missing.
I looked in devTools (sources) in chrome and noticed that there are parts of my css that are missing, when I open the css manualy from the wwwroot folder I see that the parts are actualy there.
What might cause a selective css load?
The missing part of my css file:
#layer {
background: url(http://s14.directupload.net/images/111129/44ga9qid.png);
height: 550px;
background-repeat: repeat;
position: absolute;
z-index: 3;
width: 100%;
top: 0;
left: 0;
}
#slide {
position: relative;
z-index: 1;
}
.menufixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99999;
border-bottom: chocolate 8px solid;
background-color: rgb(0, 0, 0);
box-shadow: 0 0 10px black;
}
The whole css file as published to the wwwroot folder:
.menu_item {
color: #FFFFFF;
border-top: 4px solid #B6B5B5;
display: inline-block;
font-family: Arial;
font-variant: small-caps;
font-weight: normal;
padding: 5px 2px 0px 2px;
text-decoration: none;
/* font-weight: bold; */
letter-spacing: 2px;
margin: 5px;
}
#Top {
border-bottom: chocolate 8px solid;
/* margin-bottom: 3%; */
background-color: rgb(0, 0, 0);
box-shadow: 0 0 10px black;
}
a {
text-decoration: none;
color: #5E5E5E;
}
#Logo {
color: #5E5E5E;
font-family: 'Reenie Beanie', cursive;
display: inline-block;
margin-right: 3vw;
background: url(http://www.elinorart.com/Gallery/latest%20artworks/slides/93.jpg) no-repeat, #5E5E5E;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h1 {
font-size: 70px;
margin: 5% 0;
}
h1:hover {
color: chocolate;
}
a:hover, a div:hover {
color: chocolate;
}
#menu_bar {
display: inline-block;
}
#contact_text {
width: 50%;
margin-left: auto;
margin-right: auto;
padding-bottom: 10px;
/* font-weight: 600; */
font-size: 16px;
/* font-family: -webkit-pictograph; */
color: #5E5E5E;
/* letter-spacing: 0px; */
}
#bottom_left p {
padding: 0px 49px 0 64px;
}
#bottom_center p {
padding: 0px 62px 0 30px;
}
#contact_details {
padding-bottom: 10px;
color: #5E5E5E;
font-size: 16px;
}
#pageFooter {
font-size: 0.8em;
color: #5E5E5E;
text-align: center;
font-family: Arial;
margin-top: 10%;
}
li {
line-height: 24px;
font-family: Arial;
color: #1C1C1C;
font-size: 16px;
list-style-type: none;
}
.exhibit_name {
color: black;
}
#page {
text-align: center;
background-color: rgb(232, 232, 232);
}
.page_content {
font-family: Arial;
/*text-align: initial;*/
/* background-color: rgb(232, 232, 232); */
/* padding-top: 3%; */
}
p {
font-size: 16px;
font-family: Arial;
}
#media screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}
body.about_me {
background-color: green;
}
.borderClass {
border-color: chocolate;
}
#contactDiv {
display: inline-block;
}
td {
vertical-align: top;
}
.contact_field {
border-bottom-width: 1px;
border: 1px solid #5E5E5E;
border-radius: 4px;
font-size: 16px;
font-family: Arial, cursive;
width: 322px;
height: 24px;
}
.contact_field_desc {
font-size: 14px;
padding: 4px;
font-family: Arial;
text-align: left;
}
.send_form {
border-bottom-width: 1px;
border: 1px solid #5E5E5E;
border-radius: 4px;
padding: 5px 28px;
}
body {
margin: auto;
}
#Facebook {
/* width: 100%; */
/* text-align: center; */
/* margin-left: 40%; */
/* margin-top: 3%; */
display: inline-flex;
margin-top: 2%;
}
#fb-root {
/*float: left;*/
vertical-align: central;
margin-right: 10px;
}
#fb-root2 {
/*float: right;*/
vertical-align: central;
margin-left: 10px;
}
.fb_iframe_widget {
/* margin-right: 13px; */
/* float: left; */
padding-right: 10%;
}
.exhibitions {
width: 40%;
margin: 0 5%;
float: left;
/*text-align: left;*/
}
.wrapper {
display: inline-block;
width: 45%;
text-align: left;
}
.exhibitions_wrapper {
padding-right: 3%;
}
ul {
padding: 0px;
}
ul li ul li {
list-style-type: initial;
padding-bottom: 10px;
}
.exhibitions_year {
/* margin-left: -5%; */
font-family: 'Reenie Beanie', cursive;
font-size: 37px;
/* line-height: 1px; */
margin: 14px 0;
color: orange;
color: chocolate;
font-weight: 500;
letter-spacing: 4px;
}
.bottom_sections {
width: 25%;
/* height: 100%; */
vertical-align: top;
text-align: left;
display: inline-block;
/* padding: 2%; */
}
.bottom_content {
/* padding: 0 10%; */
text-align: center;
}
.buttom_text {
font-size: 13px;
line-height: 25px;
padding: 0 10%;
text-align: left;
}
#AboutMe p {
font-size: 13px;
line-height: 25px;
}
.contact_info {
display: inline-block;
width: 19%;
vertical-align: top;
padding-left: 30px;
}
#exhibitions_wrapper {
width: 70%;
}
#AboutMe .wrapper {
border-right: 1px solid lightgray;
padding-right: 30px;
}
h3 {
padding-top: 3%;
margin: 12px 0;
font-variant: small-caps;
font-size: 37px;
font-weight: normal;
color: dimgrey;
letter-spacing: 10px;
font-family: Arial;
}
h4 {
font-size: 24px;
color: dimgrey;
font-variant: small-caps;
font-weight: normal;
}
h5 {
margin-top: 30px;
/* padding: 15px; */
border-bottom: 1px solid black;
font-size: 24px;
color: dimgrey;
font-variant: small-caps;
font-weight: normal;
text-align: center;
}
h2 {
/* padding: 0; */
margin-top: 12px;
font-variant: small-caps;
font-size: 32px;
font-weight: normal;
color: dimgrey;
letter-spacing: 10px;
font-family: Arial;
}
#AboutMe .contact_field {
width: 187px;
}
input {
margin-bottom: 15px;
}
.gallery_homepage {
height: 550px;
position: absolute;
z-index: 2;
top: 0;
left: 0;
}
.gallery_homepage div {
height: 550px;
}
#layer {
background: url(http://s14.directupload.net/images/111129/44ga9qid.png);
height: 550px;
background-repeat: repeat;
position: absolute;
z-index: 3;
width: 100%;
top: 0;
left: 0;
}
#slide {
position: relative;
z-index: 1;
}
.menufixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99999;
border-bottom: chocolate 8px solid;
background-color: rgb(0, 0, 0);
box-shadow: 0 0 10px black;
}
Thanks!
There can be many reasons for it:
Your CSS rule might be overridden by inline style
It may be overridden by other preceding rule (in the later lines) in the same CSS file
You might be over ridding the css using ' !important' (this can be seen in dev tools)
You might have an error in your CSS file such as wrong syntax or missing ';' after rule or missing '{' or '}' at the beginning or end block of rules
Last but not least you might not be including the (correct) CSS file properly in the html
Hope this helps.
I just had a similiar problem: I updated a HTML and a CSS file and uploaded it to the server. When reloading in the browser, the updates in the HTML file showed but those in the CSS didn't. That was because of the way the browser (in my case Chrome) is caching. When opening in an Inkognito-Tab or deleting the cache it did work.
I'm busy building a site on my local server, and I'm using Firefox to test it. Now, it's reached a Milestone, and so I have to check that it works in every browser. Unfortunately, Webkit-based browsers seem to be having a problem rendering my fonts in certain places, even where their styles match. Here's an image to demonstrate:
See how the button loads Arial instead of the paragraph's font (Source Sans Pro)? Even worse, what happened to the padding? It's supposed to look like this (at least, Firefox shows it like this):
Now, that paragraph and that button inherit the font styles from the parent container, and do not specify styles of their own. Firefox shows it correctly, but any Webkit-based browser does not. The console does not show a thing, and I have verified that all the font files are loading. (I provide two formats: SVG and WOFF; the latter is always loaded in the browsers I test with - I may as well remove the SVG anyway.)
This is the CSS #font-face declaration:
#font-face {
font-family: 'SourceSansPro';
src: url('#{sourceSansProFontPath}/woffRegular') format('woff'),
url('#{sourceSansProFontPath}/svgRegular#source_sans_proregular') format('svg');
font-weight: 400;
font-style: normal;
}
And this is the HTML block:
<div class="grid4 uniformFund">
<img class="blockImage" src="//www1-resources.aaa-kee.co.za.dev/png/funds/uniform-fund/logo.png" width="228" height="40" alt="The Uniform Fund - Logo">
<p>In South Africa, a uniform is required for attendance at most schools - without one a child may not be able to attend school.<br><br>As it is, thousands of children across the country do not have the privilege of having one at their disposal.</p>
<a class="readMoreButton" href="/fund/uniform-fund">Read more →</a>
</div>
Any ideas why this happens?
UPDATE
Also, I don't think it has anything to do with element types. In the below example, you'll see that Firefox loads the two buttons properly, but Chrome does not (it only loads the first one correctly).
UPDATE - LESS FILES
Here are my LESS files:
1. main.less
html {
background-color: #fff;
color: #paragraphColor;
cursor: default;
.paragraphFont;
height: 100%;
text-rendering: optimizeLegibility;
}
body {
border-top: 5px solid #2a2a2a;
}
a {
color: #baseColor;
text-decoration: none;
&[href]:hover {
text-decoration: underline;
}
}
a.commonButton, button.commonButton {
background-color: #baseColor;
border-radius: 4px;
border: 0;
color: #fff;
display: inline-block;
margin-bottom: 1px;
outline: 0;
padding: 11px 16px;
.transition(.1s background-color ease-out);
.boxShadow(0 1px 2px, fade(#000, 10%));
&:hover {
background-color: #lighterColor;
text-decoration: none;
}
&:hover:active {
background-color: #baseColor !important;
.boxShadow(inset 0 1px 2px, darken(#baseColor, 10%));
margin-top: 1px;
margin-bottom: 0;
}
}
.mouseDefault {
cursor: default;
}
header[role=siteNavigation] {
> div.backFade {
.gradientTopBottom(fade(desaturate(#baseColor, 30%), 17%), rgba(255,255,255,0));
display: none;
height: 800px;
position: absolute;
width: 100%;
z-index: 97;
}
.headerBlock {
margin: 27px auto;
blockquote.mainQuote {
color: #ff9e42;
font-size: 18px;
font-style: italic;
font-weight: 600;
line-height: 130%;
margin-top: 11px;
cite {
color: #d6d6d6;
}
}
.socialButtons {
padding: 20px 0 0 40px;
a {
background: #fff url("#{resPath}/png/social/buttonMap") no-repeat 0 0;
display: inline-block;
float: left;
margin: 0 2px;
height: 35px;
width: 35px;
text-indent: -9999px;
&.facebook {
background-position: 0 0;
&:hover {
background-position: 0 -35px;
}
}
&.googlePlus {
background-position: -35px 0;
&:hover {
background-position: -35px -35px;
}
}
&.twitter {
background-position: -70px 0;
&:hover {
background-position: -70px -35px;
}
}
&.rssFeeds {
background-position: -105px 0;
&:hover {
background-position: -105px -35px;
}
}
}
}
.siteLogo {
background: #fff url('#{resPath}/png/logo') no-repeat 0 0;
float: right;
height: 65px;
text-indent: -9999px;
width: 185px;
}
}
nav.siteMainMenu {
margin-bottom: 2px;
.line {
background-color: #f1f1f1;
height: 5px;
margin-top: 34px;
position: absolute;
width: 100%;
z-index: -1;
}
.menuPlaceHolder {
> ul > li {
background: #fff;
display: inline-block;
float: left;
overflow: hidden;
padding-right: 2px;
&:first-child {
padding-left: 2px
}
> div {
background-color: #fff;
border-radius: 0 5px 4px 4px;
border-top: 5px solid #baseColor;
display: none;
margin-top: -5px;
padding: 8px 0;
position: absolute;
z-index: 100;
.boxShadow(0 12px 15px; rgba(0,0,0,0.15));
ul {
display: inline-block;
float: left;
margin-left: -1px;
min-width: 200px;
&:first-child {
margin-left: 0;
}
li {
&.break {
border-bottom: 1px solid #eee;
height: 0px;
margin: 8px 0;
}
&.groupTitle {
border-bottom: 1px solid #eee;
color: #ccc;
font-size: 12px;
font-weight: 800;
margin-bottom: 8px;
padding: 14px 18px 8px;
text-transform: uppercase;
}
> a {
color: #808080;
display: block;
font-size: 12px;
font-weight: 600;
padding: 9px 19px;
text-transform: uppercase;
&[href]:hover, &.current {
background-color: #efefef;
.gradientTopBottom(#efefef, #f4f4f4);
.boxShadow(inset 0 1px 2px, #e4e4e4);
color: #baseColor;
text-decoration: none;
}
> span {
background-color: #ccc;
border-radius: 4px;
color: #777;
font-size: 11px;
font-weight: 600;
margin-left: 8px;
padding: 1px 5px 0;
&.new {
background-color: #ff9e42;
color: #fff;
font-weight: 900;
}
}
}
&.largeItem {
> a[href] {
color: #444;
font-size: 14px;
line-height: 1.3em;
max-width: 240px;
text-transform: none;
span.descriptor {
background: none;
display: block;
font-size: 12px;
font-weight: 400;
margin: 8px 0 0 0;
padding: 0;
}
&:hover {
color: #baseColor;
}
}
}
}
&.borderLeft {
border-left: 1px solid #eee;
}
&.borderRight {
border-right: 1px solid #eee;
}
}
}
> a {
border-bottom: 5px solid #e6e6e6;
color: #909090;
display: block;
font-size: 16px;
padding: 9px 18px;
position: relative;
text-transform: lowercase;
transition: .2s color ease-out;
}
&:hover > a[href],
> a[href]:hover,
> a.current {
.gradientTopBottom(#fff, lighten(#baseColor, 50%));
border-bottom: 5px solid #2e75b6;
color: #baseColor;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
}
}
> ul > li.donate {
> a {
color: #b2923f;
font-weight: 400;
}
&:hover > a[href],
> a[href]:hover,
> a.current {
.gradientTopBottom(#fff, lighten(#7a5f07, 65%));
border-bottom: 5px solid #7a5f07;
color: #7a5f07;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
}
> div {
border-top-color: #7a5f07;
}
}
> form#siteSearch {
border-bottom: 0;
display: inline-block;
float: right;
margin-top: 3px;
> input[type=text] {
border: 0;
display: inline-block;
float: left;
.inputFont;
line-height: 1em;
outline: 0;
padding: 5px 6px;
width: 140px;
margin: 0;
.transition(.4s width ease-out);
&:focus {
width: 193px;
}
}
> input[type=submit] {
background: #fff url("#{resPath}/png/search/submit") no-repeat 50% 50%;
border: 0;
cursor: pointer;
display: inline-block;
float: right;
margin: 0;
min-height: 27px;
min-width: 30px;
outline: 0;
padding: 6px;
&:hover {
background-color: #f1f1f1;
}
&:hover:active {
background-color: #e6e6e6;
background-position: 50% 60%;
.boxShadow(inset 0 1px 2px, #ccc);
}
}
}
}
}
}
main[role="documentContent"] {
#homeIntro {
padding: 30px 0;
background: #baseColor url("#{resPath}/png/elements/blue-pattern");
.boxShadow(inset 0 0 50px, #darkerColor);
.content p {
color: #fff;
font-size: 16px;
line-height: 1.4em;
}
.callToActionButtons {
> a.button {
background-color: #0061be;
color: #fff;
display: block;
font-size: 16px;
font-weight: 400;
margin-left: 10px;
padding: 14px 20px;
.transition(.2s background-color ease-out, .2s color ease-out);
&:first-child {
border-radius: 4px 4px 0 0;
}
&:last-child {
border-radius: 0 0 4px 4px;
}
&:hover {
background-color: #0056b2;
text-decoration: none;
}
&:hover:active {
.boxShadow(inset 0 1px 2px, fade(#000, 20%));
padding: 15px 20px 13px;
}
&.white {
background: #fff;
color: #0061be;
&:hover {
background: #b6e5ff;
}
}
}
}
}
#breadCrumbs {
background: #f7f7f7;
.gradientTopBottom(#f7f7f7, #fff);
color: #aaa;
padding: 20px 0 10px;
a[itemprop="url"] {
color: #lighterColor;
text-transform: uppercase;
font-size: 12px;
}
}
#pageContent {
margin: 40px auto;
.headerBlock {
margin-bottom: 30px;
.blockTitle {
background: #fff url("#{resPath}/png/elements/block-header-line") repeat-x 50% 50%;
h1 {
background-color: #fff;
display: inline-block;
font-size: 27px;
font-weight: 100;
padding: 0 20px 0 0;
}
}
}
.contentBlock {
line-height: 150%;
p {
margin-bottom: 14px;
&.introText {
font-size: 15px;
font-weight: 700;
}
}
ul.contentList, ol.contentList {
margin-left: 17px;
li {
padding: 0 0 10px 10px;
&:last-child {
padding-bottom: 0;
}
}
}
ul.contentList {
list-style-image: url("#{resPath}/png/elements/content-bullet");
}
h1, h2 {
color: #baseColor;
font-size: 17px;
margin: 27px 0 10px 0;
}
h1.pageTitle {
color: #baseColor;
font-size: 26px;
font-weight: 400;
padding: 0 0 30px;
margin: 0;
}
h2 {
font-size: 15px;
font-weight: 400;
}
img {
.userSelect(none);
&.blockImage {
display: block;
margin-bottom: 30px;
&.bordered {
border: 1px solid #ccc;
padding: 4px;
.boxShadow(0 1px 8px, #eee);
}
}
}
a {
&.readMoreButton {
border-radius: 2px;
border: 3px solid #ccc;
color: #484848;
display: inline-block;
margin: 10px 0 1px;
padding: 4px 16px;
text-transform: uppercase;
.transition(.2s background-color ease-out, .2s color ease-out);
.boxShadow(0 1px 2px, fade(#000, 10%));
&:hover {
background-color: #aaa;
border-color: #aaa;
color: #fff;
text-decoration: none;
}
&:hover:active {
.destroyBoxShadow();
margin: 11px 0 0;
}
}
}
.foodFund {
a.readMoreButton {
border-color: #foodFundColor;
&:hover {
background-color: #foodFundColor;
}
}
}
.activeEducationFund {
a.readMoreButton {
border-color: #activeEducationFundColor;
&:hover {
background-color: #activeEducationFundColor;
}
}
}
.uniformFund {
a.readMoreButton {
border-color: #uniformFundColor;
&:hover {
background-color: #uniformFundColor;
}
}
}
}
aside .asideBlock {
margin-bottom: 20px;
h1 {
background-color: #baseColor;
color: #fff;
font-size: 15px;
font-weight: 400;
padding: 7px 14px;
text-transform: uppercase;
}
a.donate {
border-radius: 4px;
border: 3px solid #baseColor;
color: #baseColor;
display: block;
font-size: 18px;
font-weight: 700;
padding: 10px 5px;
text-align: center;
.transition(.3s background-color ease-out, .3s color ease-out, .3s text-shadow ease-out);
&:hover {
background-color: lighten(#baseColor,10%);
color: #fff;
text-decoration: none;
text-shadow: 0 1px 2px darken(#baseColor, 2%);
}
&:hover:active {
.boxShadow(inset 0 1px 3px, darken(#baseColor, 2%));
padding: 11px 5px 9px;
text-shadow: 0 1px 1px darken(#baseColor, 2%);
}
}
ul {
list-style: none;
li a {
border-bottom: 1px solid #e6e6e6;
color: #444;
display: block;
padding: 5px 14px;
&:hover,
&.current {
background-color: #f1f1f1;
color: #baseColor;
text-decoration: none;
}
> span {
background-color: #ccc;
border-radius: 4px;
color: #777;
font-size: 11px;
font-weight: 600;
margin-left: 8px;
padding: 1px 5px 0;
text-transform: uppercase;
&.new {
background-color: #ff9e42;
color: #fff;
font-weight: 900;
}
}
}
}
}
}
#donatePartner {
font-size: 30px;
text-align: center;
padding: 40px 0;
border-top: 5px solid #eee;
&.e5c7b864a6ef {
border-top-color: #fdd00e;
a {
background: #fff url("#{resPath}/png/donate-partner/e5c7b864a6ef") no-repeat top center;
display: block;
height: 67px;
text-indent: -9999px;
}
}
}
#baseNavigation {
background: #2a2a2a url("#{resPath}/png/elements/dark-fabric");
margin-bottom: 1px;
padding: 40px 0;
div {
h1.blockTitle {
background: fade(#fff, 10%);
color: #fff;
font-weight: 400;
text-transform: uppercase;
padding: 8px 11px 7px;
margin-bottom: 2px;
}
a {
font-size: 13px;
color: #ccc;
span {
display: block;
&.image {
background: #2a2a2a url('#{resPath}/png/base-navigation/arrow') center center no-repeat;
display: block;
img {
.userSelect(none);
.transition(.3s opacity ease-out);
}
}
&.text {
display: block;
padding-top: 10px;
}
}
&:hover {
color: #fff;
text-decoration: none;
img {
opacity: 0.6;
}
}
}
}
}
}
footer[role="mainFooter"] {
#latestJournalEntry {
padding: 30px 0;
background: #baseColor url("#{resPath}/png/elements/blue-pattern");
&:hover .header h1 {
background-color: #fff;
}
.boxShadow(inset 0 0 50px, #darkerColor);
.header h1 {
border-radius: 4px;
background-color: fade(#fff, 70%);
padding: 16px 14px 13px;
color: #baseColor;
font-size: 15px;
font-weight: 200;
margin-right: 10px;
text-transform: uppercase;
.transition(.3s background-color ease-out);
span {
font-size: 38px;
font-weight: 800;
&.padder {
font-size: 16px;
font-weight: 200;
display: inline;
margin-left: 9px;
}
}
}
.content {
color: #fff;
h1 {
font-size: 24px;
font-weight: 200;
a {
color: #fff;
}
}
p {
color: lighten(#baseColor, 30%);
font-size: 14px;
font-weight: 400;
margin-top: 9px;
line-height: 1.4em;
&.credits {
border-top: 1px solid fade(#fff,15%);
color: lighten(#baseColor, 40%);
font-size: 11px;
padding-top: 5px;
font-weight: 400;
text-transform: uppercase;
a {
color: #fff;
}
}
}
}
}
#fatFooter {
background: #eee url("#{resPath}/png/elements/light-swirl");
padding: 30px 0;
margin: 1px 0;
h1.groupTitle {
color: #baseColor;
font-size: 16px;
font-weight: 400;
margin-bottom: 20px;
}
ul.links {
li {
font-size: 12px;
overflow: hidden;
a {
color: #4f4f4f;
display: block;
padding-bottom: 5px;
&:hover {
color: #baseColor;
}
}
}
}
.nextEvent {
a {
display: block;
line-height: 1.3em;
overflow: hidden;
span {
display: block;
&.date {
background-color: #baseColor;
border-radius: 4px 4px 0 0;
color: #fff;
font-weight: 200;
font-size: 22px;
padding: 10px;
.transition(.3s background-color ease-out; .3s color ease-out);
strong {
font-weight: 800;
}
}
&.eventName {
background-color: #fff;
border: 1px solid #baseColor;
border-radius: 0 0 4px 4px;
color: #444;
font-size: 14px;
font-weight: 400;
line-height: 1.7em;
padding: 5px 10px;
.transition(.3s color ease-out; .3s border-color ease-out);
span.eventType {
background-color: lighten(#baseColor, 50%);
border-radius: 0 10px 10px 0;
line-height: 1.7em;
margin-left: -10px;
margin-right: 5px;
margin-top: -10px;
color: #baseColor;
display: inline-block;
font-size: 10px;
padding: 0 6px 0 10px;
text-transform: uppercase;
}
}
}
&:hover{
text-decoration: none;
.transition(.3s box-shadow ease-out);
span.date {
background-color: #lighterColor;
}
span.eventName {
color: #baseColor;
border: 1px solid #lighterColor;
}
}
}
}
}
#baseFooter {
background: #2a2a2a url("#{resPath}/png/elements/dark-fabric");
font-size: 12px;
padding: 30px 0;
p.copyright {
color: #b9b9b9;
margin: 7px 0;
a {
color: #eee;
}
}
p.certification a {
color: #999;
}
a.foundryStamp {
background: #2a2a2a url("#{resPath}/png/foundry/footerStamp") no-repeat 0 0;
border-radius: 4px;
display: inline-block;
float: right;
height: 42px;
text-indent: -9999px;
width: 222px;
.transition(.8s background-position ease-out);
.boxShadow(inset 0 1px 4px, rgba(0,0,0,0.3));
&:hover {
background-position: 0 -42px;
}
}
}
}
2. gather.less (this file contains the font assignment definitions)
#resPath: "//www1-resources.aaa-kee.co.za.dev";
#sliderSkinPath: "#{resPath}/png/slider/skins";
#sliderSlidesPath: "#{resPath}/png/slider/slides";
#baseColor: #1f74c2;
#lighterColor: #448ddf;
#darkerColor: #005ba7;
#paragraphColor: #6e6e6e;
#foodFundColor: #98d733;
#activeEducationFundColor: #ff00af;
#uniformFundColor: #24adcd;
.font (#size, #lineHeight) {
font: ~"#{size}/#{lineHeight}" "SourceSansPro", Helvetica, Arial, Sans-Serif;
}
.paragraphFont () {
.font(14px, 150%);
}
.inputFont () {
.font(14px, 100%);
}
.boxShadow (#style, #c) {
-moz-box-shadow: #style #c;
-ms-box-shadow: #style #c;
-webkit-box-shadow: #style #c;
box-shadow: #style #c;
}
.boxShadowDouble (#style, #c, #style2, #c2) {
-moz-box-shadow: #style #c, #style2 #c2;
-ms-box-shadow: #style #c, #style2 #c2;
-webkit-box-shadow: #style #c, #style2 #c2;
box-shadow: #style #c, #style2 #c2;
}
.destroyBoxShadow () {
-moz-box-shadow: none;
-ms-box-shadow: none;
-ms-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.transition (#value1,#value2:X,...)
{
#value: ~`"#{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
-moz-transition: #value;
-ms-transition: #value;
-o-transition: #value;
-webkit-transition: #value;
transition: #value;
}
.animation (#name; #speed: .5s) {
-moz-animation-duration: #speed;
-moz-animation-name: #name;
-ms-animation-name: #name;
-ms-animation-duration: #speed;
-o-animation-duration: #speed;
-o-animation-name: #name;
-webkit-animation-duration: #speed;
-webkit-animation-name: #name;
animation-duration: #speed;
animation-name: #name;
}
.gradientTopBottom (#top; #bottom) {
background-color: #bottom;
background: -moz-linear-gradient(top, #top 0%, #bottom 100%);
background: -ms-linear-gradient(top, #top 0%, #bottom 100%);
background: -o-linear-gradient(top, #top 0%, #bottom 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #top), color-stop(100%, #bottom));
background: -webkit-linear-gradient(top, #top 0%, #bottom 100%);
background: linear-gradient(to bottom, #top 0%, #bottom 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{top}', endColorstr='#{bottom}',GradientType=0 );
}
.gradientRadial (#in; #out) {
background: -moz-radial-gradient(center, ellipse cover, #in 0%, #out 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%, #out));
background: -webkit-radial-gradient(center, ellipse cover, #in 0%, #out 100%);
background: -o-radial-gradient(center, ellipse cover, #in 0%, #out 100%);
background: -ms-radial-gradient(center, ellipse cover, #in 0%, #out 100%);
background: radial-gradient(ellipse at center, #in 0%, #out 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{in}', endColorstr='#{out}',GradientType=1 );
}
.userSelect (#value: none) {
-moz-user-select: #value;
-webkit-user-select: #value;
user-select: #value;
}
#import "reset.less";
#import "grid.less";
#import "slider/main.less";
#import "slider/skins/white.less";
#import "slider/slides/active-education.less";
#import "slider/slides/excursion-fund.less";
#import "slider/slides/food-fund.less";
#import "fonts/source-sans-pro.less";
#import "main.less";
3. #font-face definitions
#sourceSansProFontPath: "#{resPath}/fonts/source-sans-pro";
#font-face {
font-family: 'SourceSansPro';
src: url('#{sourceSansProFontPath}/woffBlackItalic') format('woff'),
url('#{sourceSansProFontPath}/svgBlackItalic#source_sans_problack_italic') format('svg');
font-weight: 900;
font-style: italic;
}
#font-face {
font-family: 'SourceSansPro';
src: url('#{sourceSansProFontPath}/woffBlack') format('woff'),
url('#{sourceSansProFontPath}/svgBlack#source_sans_problack') format('svg');
font-weight: 900;
font-style: normal;
}
#font-face {
font-family: 'SourceSansPro';
src: url('#{sourceSansProFontPath}/woffBoldItalic') format('woff'),
url('#{sourceSansProFontPath}/svgBoldItalic#source_sans_probold_italic') format('svg');
font-weight: 700;
font-style: italic;
}
#font-face {
font-family: 'SourceSansPro';
src: url('#{sourceSansProFontPath}/woffBold') format('woff'),
url('#{sourceSansProFontPath}/svgBold#source_sans_probold') format('svg');
font-weight: 700;
font-style: normal;
}
#font-face {
font-family: 'SourceSansPro';
src: url('#{sourceSansProFontPath}/woffExtraLightItalic') format('woff'),
url('#{sourceSansProFontPath}/svgExtraLightItalic#source_sans_proXLtIt') format('svg');
font-weight: 100;
font-style: italic;
}
#font-face {
font-family: 'SourceSansPro';
src: url('#{sourceSansProFontPath}/woffExtraLight') format('woff'),
url('#{sourceSansProFontPath}/svgExtraLight#source_sans_proextralight') format('svg');
font-weight: 100;
font-style: normal;
}
#font-face {
font-family: 'SourceSansPro';
src: url('#{sourceSansProFontPath}/woffItalic') format('woff'),
url('#{sourceSansProFontPath}/svgItalic#source_sans_proitalic') format('svg');
font-weight: 400;
font-style: italic;
}
#font-face {
font-family: 'SourceSansPro';
src: url('#{sourceSansProFontPath}/woffLightItalic') format('woff'),
url('#{sourceSansProFontPath}/svgLightItalic#source_sans_prolight_italic') format('svg');
font-weight: 200;
font-style: italic;
}
#font-face {
font-family: 'SourceSansPro';
src: url('#{sourceSansProFontPath}/woffLight') format('woff'),
url('#{sourceSansProFontPath}/svgLight#source_sans_prolight') format('svg');
font-weight: 200;
font-style: normal;
}
#font-face {
font-family: 'SourceSansPro';
src: url('#{sourceSansProFontPath}/woffRegular') format('woff'),
url('#{sourceSansProFontPath}/svgRegular#source_sans_proregular') format('svg');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'SourceSansPro';
src: url('#{sourceSansProFontPath}/woffSemiboldItalic') format('woff'),
url('#{sourceSansProFontPath}/svgSemiboldItalic#source_sans_proSBdIt') format('svg');
font-weight: 600;
font-style: italic;
}
#font-face {
font-family: 'SourceSansPro';
src: url('#{sourceSansProFontPath}/woffSemibold') format('woff'),
url('#{sourceSansProFontPath}/svgSemibold#source_sans_prosemibold') format('svg');
font-weight: 600;
font-style: normal;
}
Solution Found:
It seems there is a Webkit bug when one sets text-rendering: optimizeLegibility;. When I disabled it, everything worked just fine.
Now, this raises the question - why did it do that? And is is really a bug? To me, it is. Simply because of the nature of the displaying of the fonts on certain elements, but not others.
I have a page but when I resize the browser window the background color gets cut down. I want the color to expand to the full browser width. One of my divs is bigger than the other ones. What is the fix for this?
The CSS is below:
#charset "utf-8";
/* ==========================================================================
RESET STYLES
========================================================================== */
* {
margin: 0; padding: 0;
}
html,
button,
input,
select,
textarea {
color: #222;
}
body {
font-size: 1em;
line-height: 1.4;
}
img {
border: 0 none;
}
/* ==========================================================================
BASE STYLES
========================================================================== */
html {
height: 100%;
}
body {
font-family: Arial, Helvetica Sans-serif;
width: 100%;
height: 100%;
color: #595959;
}
.col-full {
width: 1014px;
margin: 0 auto;
}
h1, h2, h3, h4, h5, h6 {
font-family: Helvetica, Arial, Sans-serif;
}
/* ==========================================================================
HEADER STYLES
========================================================================== */
#header h1 {
margin-top: 26px;
float: left;
}
h1 a span {
display: none;
}
#login-form {
float: right;
margin: 25px 92px 12px 0;
}
#login-form input {
width: 150px;
height: 29px;
line-height: 29px;
border: 1px solid #a5a5a5;
color: #797979;
font-size: 14px;
padding-left: 8px;
margin-left: 3px;
}
#login-form #login-button {
width: 72px;
height: 30px;
background: url(../img/login-bg.png) top repeat-x;
border: 1px solid #494949;
cursor: pointer;
margin-left: 0;
font-weight: bold;
color: #FFF;
font-size: 13px;
padding-left: 0;
text-shadow: 1px 1px 1px #3f3f3f;
filter: dropshadow(color=#3f3f3f, offx=1, offy=1);
}
.form-buttons {
margin-left: 3px;
}
.form-buttons a {
text-decoration: none;
font-size: 12px;
color: #ef4926;
margin-right: 116px;
}
.nav {
clear: both;
width: 100%;
height: 47px;
background: #000;
}
.nav ul {
margin-top: 10px;
float: left;
}
.nav ul li {
float: left;
list-style: none;
margin-right: 53px;
}
.nav ul li a {
text-decoration: none;
font-family: Helvetica;
font-weight: bold;
color: #FFF;
/*font-size: 16px;*/
font-size: 15px;
}
.top-heading {
background: #363737;
height: 57px;
border-top: 1px solid #727272;
border-bottom: 1px solid #727272;
}
.top-heading h2 {
/*font-size: 28px;*/
font-size: 27px;
color: #FFF;
text-shadow: 1px 1px 2px #282929;
filter: dropshadow(color=#282929, offx=1, offy=1);
padding-top:8px;
}
#featured {
background: url(../img/featured-gd.png) repeat-x;
}
#featured .col-full {
background: url(../img/featured-bg.jpg) no-repeat;
}
.featured-content {
width: 454px;
float: left;
margin-right: 40px;
}
.featured-content h2 {
color: #FFF;
/*font-size: 38px;*/
font-size: 37px;
line-height: 1.15;
margin-top: 45px;
margin-bottom: 12px;
text-shadow: 1px 1px 2px #282929;
filter: dropshadow(color=#282929, offx=1, offy=1);
}
.featured-content p {
font-size: 15px;
color: #FFF;
line-height: 1.46;
}
.register-btn {
display: block;
width: 164px;
height: 39px;
text-decoration: none;
background: url(../img/register-btn.png) repeat-x;
text-align: center;
font-family: Helvetica;
font-weight: bold;
margin-top: 27px;
font-size: 22px;
color: #FFF;
padding-top: 4px;
-webkit-box-shadow: 0px 0px 1px 1px #2e2e2e;
box-shadow: 0px 0px 2px 2px #2e2e2e;
}
#featured img {
margin-top: 6px;
margin-bottom: 2px;
}
/* ==========================================================================
MAIN STYLES
========================================================================== */
#features {
background: #ff5423;
overflow: hidden;
}
#features h3 {
line-height: 1.15;
color: #FFF;
font-family: Helvetica;
padding-top: 24px;
margin-bottom: 13px;
/*font-size: 26px;*/
font-size: 25px;
}
.features-left {
width: 447px;
float: left;
margin-right: 62px;
}
.features-right {
width: 472px;
float: left;
}
.features-right ul {
margin-left: 15px;
}
.features-right ul li {
line-height: 1.76;
color: #ffc3b2;
font-size: 14px;
padding-left: 2px;
}
.features-right ul li span {
font-size: 17px;
color: #fefefe;
position: relative;
top: 2px;
}
.more-features {
display: block;
width: 144px;
height: 28px;
color: #fb3800;
font-family: Helvetica;
/*font-size: 17px;*/
font-size: 16px;
font-weight: bold;
text-align: center;
padding-top: 4px;
text-decoration: none;
background: url(../img/more-features.png) repeat-x;
margin-top: 38px;
margin-bottom: 23px;
}
#client-list {
border-top: 4px solid #a6a6a6;
border-bottom: 4px solid #c6c6c6;
padding-bottom: 7px;
}
#client-list .col-full {
width: 1080px;
}
#client-list h4 {
color: #4d4d4d;
/*font-size: 18px;*/
font-size: 17px;
margin-top: 39px;
}
#client-list .more-clients {
float: left;
text-decoration: none;
font-size: 15px;
color: #ff5423;
}
#client-list img {
margin-left: 90px;
margin-top: -44px;
}
#main {
clear: both;
background: url(../img/main-gd.png) repeat;
}
.col-446 {
width: 446px;
float: left;
margin-right: 55px;
}
.col-476 {
width: 476px;
float: left;
}
.col-476 p {
margin-right: 25px;
}
#main h3 {
font-family: Helvetica;
/*font-size: 28px;*/
font-size: 27px;
color: #535353;
line-height: 1.07;
margin-top: 30px;
margin-bottom: 14px;
}
#main p {
font-size: 14px;
line-height: 1.64;
margin-bottom: 21px;
}
.site-features {
margin-top: 32px;
float: left;
}
.site-features li {
list-style: none;
float: left;
margin-right: 35px;
}
li.sf-last {margin-right: 0;}
.site-features li a {
}
.join-box {
}
.join-btn {
}
.join-box p {
}
/* ==========================================================================
FOOTER STYLES
========================================================================== */
h4 a span {
display: none;
}
#footer {
clear: both;
}
I think the best way to solve this is to add a minimum width to your body. This way when the viewport is too narrow to show all your content, a horizontal scrollbar will allow the user to access the entire page. By the looks of your content, min-width: 1100px; would be just about right.
I'm trying to get the items on one of my pages to line up at the bottom. The realworld example is http://www.silverartcollector.com. You can see on the main page the content area, there are 2 product boxes that have different size images which will be common. I want the bottoms to align so it will look neater. I've tried doing vertical-align:bottom on my main class but it doesn't work, I'm presuming because of the float:left. However, after hours of testing, I can't figure it out. I appreciate any input/help.
Here is the page code:
<div class="float_r" id="content">
<h3>Recent Additions</h3><br>
<div class="product_box">
<img width="150" src="admin/uploads/ONE-7 O.JPG">
<h3>Huck Finn</h3>
<p class="product_price">One Mint</p>
<!--ONE-7<br/>-->
<a class="detail" href="productdetail.php?id=1">Details</a>
</div>
<div class="product_box">
<img width="150" src="admin/uploads/MLM-11 O.jpg">
<h3>Keep Me & Never Go Broke</h3>
<p class="product_price">Mother Lode Mint</p>
<!--MLM-11<br/>-->
<a class="detail" href="productdetail.php?id=20">Details</a>
</div>
</div>
And here is the stylesheet:
/*
Credit: http://www.templatemo.com
*/
body {
margin: 0;
padding: 0;
color: #999;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
line-height: 1.4em;
background-color: #2e2e2e;
background-repeat: repeat;
background-image: url(../images/templatemo_body.jpg)
}
a, a:link, a:visited {
color: #08aee3;
font-weight: normal;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a.more {
display: inline-block;
width: 80px;
height: 28px;
line-height: 28px;
text-align: center;
font-size: 10px;
font-weight: bold;
color: #21bdd0;
background: url(../images/more_but.jpg);
}
a.more:hover {
background: #333;
text-decoration: none;
}
p {
margin: 0 0 10px 0;
padding: 0;
}
img {
border: none;
}
blockquote {
border: 1px solid #ccc;
border-left: 5px solid #000;
padding: 19px;
margin: 20px 0 0 0;
}
cite a, cite a:link, cite a:visited {
font-size: 12px;
text-decoration: none;
font-style: normal;
}
cite span {
font-weight: 400;
color: #333;
}
.templatemo_list {
margin: 10px 0 10px 15px;
padding: 0;
list-style: none;
}
.templatemo_list li {
color:#636363;
margin: 0 0 5px 0;
padding: 0 0 0 15px;
background: url(../images/templatemo_list.png) no-repeat scroll 0 7px;
}
.templatemo_list li a {
color: #636363; font-weight: normal;
}
.templatemo_list li a:hover {
color: #000;
}
h1, h2, h3, h4, h5, h6, h7, h8{
color: #333;
font-weight: normal;
}
h1 {
font-size: 30px;
margin: 0 0 30px;
padding: 5px 0;
}
h2 {
font-size: 26px;
margin: 0 0 25px;
padding: 5px 0;
}
h3 {
font-size: 20px;
margin: 0 0 20px;
padding: 0;
}
h4 {
font-size: 16px;
margin: 0 0 15px;
padding: 0;
}
h5 {
font-size: 14px;
margin: 0 0 10px;
padding: 0;
}
h6 {
font-size: 12px;
margin: 0 0 5px;
padding: 0;
}
h7 {
font-size: 16px;
margin: 0 0 15px;
padding: 0;
line-height:150%
}
h8 {
line-height:150%;
font-size: 14px;
margin: 0 0 15px;
padding: 0;
color: white;
}
.cleaner { clear: both }
.h10 { height: 10px }
.h20 { height: 20px }
.h30 { height: 30px }
.h40 { height: 40px }
.h50 { height: 50px }
.float_l { float: left }
.float_r { float: right }
#templatemo_wrapper {
width: 960px;
margin: 0 auto;
padding: 0 10px 10px;
}
#templatemo_header {
width: 100%;
padding: 50px 0 10px;
}
#templatemo_menu {
width: 100%;
height: 77px;
margin-bottom: 3px;
background: url(../images/templatemo_menu.jpg) repeat-x
}
#templatemo_middle {
width: 100%;
height: 200px;
margin-bottom: 3px;
padding-bottom: 2px;
background: #fff url(../images/templatemo_middle.jpg) repeat-x bottom
}
#templatemo_main {
width: 100%;
margin-bottom: 10px;
}
#content {
width: 680px;
background: #ffffff;
border: 1px solid #fff;
padding: 15px;
}
#sidebar { width: 240px }
#templatemo_footer {
width: 960px;
text-align: center;
padding: 9px 0px;
background: #121212;
border: 1px solid #3a3a3a
}
#site_title {
float: left;
}
#site_title h1 {
margin: 0;
padding: 0;
}
#site_title h1 a {
display: block;
width: 300px;
height: 20px;
font-size: 12px;
text-indent: -10000px;
color: #999;
text-align: left;
background: url(../images/logo.gif) no-repeat top left;
}
#header_right {
float: right;
margin-top: 5px;
}
#header_right a {
color: #ccc;
}
#menu_second_bar {
padding: 5px 10px;
}
#top_shopping_cart {
float: left;
padding: 5px 0;
font-size: 11px;
}
#templatemo_search {
float: right;
}
#templatemo_search form {
margin: 0;
padding: 0;
}
#templatemo_search .txt_field {
float: left;
display: block;
margin-right: 5px;
height: 24px;
line-height: 24px;
width: 300px;
color: #999;
font-size: 12px;
padding: 0 5px;
font-variant: normal;
border: 1px solid #666;
background: #333;
}
#templatemo_search .sub_btn {
float: right;
display: block;
color: #fff;
height: 26px;
font-size: 11px;
font-weight: 700;
line-height: 26px;
cursor: pointer;
border: 1px solid #333;
background: #0ec4f7;
}
.sidebar_box {
position: relative;
background: #4c4a4a;
margin-bottom: 20px;
}
.sidebar_box h3 {
font-size: 14px;
font-weight: 700;
padding: 10px;
width: 220px;
height: 20px;
margin-bottom: 0;
background: url(../images/templatemo_sidebar_header.jpg) no-repeat; color: #999
}
.sidebar_box span.bottom {
position: absolute;
bottom: -26px;
left: 0;
width: 240px;
height: 26px;
background: url(../images/templatemo_sidebar_bottom.jpg)
}
#sidebar .sidebar_box .content {
padding: 10px 10px 0;
}
#sidebar .sidebar_list {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar .sidebar_list li {
display: block;
margin: 0;
padding: 3px 0;
border-top: 1px solid #595858;
border-bottom: 1px solid #343434;
}
#sidebar .sidebar_list li.first {
border-top: none;
}
#sidebar .sidebar_list li.last {
border-bottom: none;
}
#sidebar .sidebar_list li a {
color: #d6d3d3;
}
#sidebar .sidebar_list li a:hover {
color: #fff;
text-decoration: none;
}
.bs_box { clear: both; margin-bottom: 20px }
.bs_box img { float: left; margin-right: 10px; border: 4px solid #3d3d3d }
.bs_box h4 { margin-bottom: 0 }
.bs_box h4 a { font-size: 12px; color: #08aee3; font-weight: 700}
.bs_box .price { font-size: 12px; font-weight: 700; color: #fff }
.product_box {
float: left;
width: 225px;
text-align: center;
margin: 0 0px 0px 0;
}
.product_box img {
margin-bottom: 5px;
}
.product_box h3 {
font-size: 11px;
color: #000;
font-weight: 700;
margin-bottom: 10px;
}
.product_box .product_price {
color: #8fb410;
font-size: 14px;
font-weight: 700;
}
.product_box .add_to_card {
float:left;
display: block;
width: 140px;
height: 28px;
line-height: 28px;
text-align: center;
color: #fff;
background: url(../images/add_to_cart.jpg);
margin-left: 42.5px;
}
.product_box .detail {
float: left;
display: block;
width: 140px;
height: 28px;
line-height: 28px;
text-align: center;
background: url(../images/detail.jpg);
margin-left: 42.5px;
}
.checkout input {
border: 1px solid #ccc;
margin-bottom: 15px;
padding: 5px;
}
#contact_form {
padding: 0;
width: 312px;
margin-bottom: 40px;
}
#contact_form form {
margin: 0px;
padding: 0px;
}
#contact_form form .input_field {
width: 300px;
padding: 5px;
color: #222;
background: #fff;
border: 1px solid #dedede;
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
margin-top: 5px;
}
#contact_form form label {
display: block;
width: 100px;
margin-right: 12px;
font-size: 13px;
}
#contact_form form textarea {
width: 300px;
height: 200px;
padding: 5px;
color: #222;
background: #fff; border: 1px solid #dedede;
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
margin-top: 5px;
}
#contact_form form .submit_btn {
padding: 5px 12px;
background-color: #000;
border: 1px solid #fff;
color: #fff;
font-size:14px;
margin: 10px 0px;
}
.faq h3 { font-size: 14px; margin: 30px 0 5px }
.content_half {
width: 320px;
}
.content_13 {
width: 220px;
margin-right: 10px;
}
.no_margin_right {
margin-right: 0;
}
#templatemo_footer {
color: #707070;
}
#templatemo_footer a {
color: #999;
}
.question {
position:relative;
display: inline-block;
text-align:center;
left:-1em;
top:-5em;
padding: 10px 0px 0px 0px;
width: 174px;
height: 58px;
color:black;
font-weight:bold;
font-size: 13px;
line-height: 1.3em;
background: url('../admin/images/bubble.png') left top no-repeat;
opacity:0;
z-index:1;
}
.yes{
margin-top: .5em;
margin-right: .5em;
cursor: pointer;
display: inline-block;
width: 63px;
height: 21px;
color: #434d17;
text-shadow: 0px 1px 0px #fff;
background: url('../admin/images/buttony.png') left top no-repeat;
}
.cancel {
margin-top: .5em;
margin-right: .5em;
cursor: pointer;
display: inline-block;
width: 63px;
height: 21px;
color: #fff;
text-shadow: 0px 1px 0px #000;
background: url('../admin/images/buttonn.png') left top no-repeat;
}
.mint_box {
float: left;
width: 300px;
text-align: left;
margin: 0 10px 10px 0;
}
}
I think an inline-block approach would do what you want:
.product_box {
display: inline-block;
margin: 0;
text-align: center;
vertical-align: bottom;
width: 225px;
}
You could use relative positioning to move the div down, however, you would need to give the Keep Me & Never Go Broke div a unique id
add to div
id="whatever_u_want_to_call_it"
then style the id to have a relative position
#whatever_u_want_to_call_it{
position: relative;
bottom: -215px;
}
I'm new to this but here goes. I have been developing this website http://www.panelmaster.co.uk and i have managed to solve the majority of design problems but one!
If you take a look at the site in IE the right column seems to drop down and is not aligned with the right and centre column. This problem only occurs in IE as upon testing i found it was fine in firefox and safari.
I have provided below the CSS for the website.
I would appreciate if you guys can help me with the problem.
Thanks in advance. :)
==========================
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
color: #666;
background-image: url(images/templatemo_body_top.jpg);
background-color: #90857c;
background-repeat: repeat-x;
background-position: top;
text-align: left;
}
a:link, a:visited { color: #073475; text-decoration: none; font-weight: normal; }
a:active, a:hover { color: #073475; text-decoration: underline; }
h3 {
color: #1e7da9;
font-size: 16px;
font-weight: bold;
}
h2 {
color: #1e7da9;
font-size: 16px;
font-weight: bold;
}
h1 {
color: #696969;
font-size: 20px;
font-weight: bold;
}
p { margin: 0px; padding: 0px; }
img { margin: 0px; padding: 0px; border: none; }
.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.float_l { float: left; }
.float_r { float: right; }
.margin_r20 { margin-right: 20px; }
#templatemo_body_wrapper {
width: 100%;
background: url(images/templatemo_body_bottom.png) repeat-x bottom center;
}
#templatemo_wrapper {
width: 970px;
padding: 0 10px;
margin: 0 auto;
background: url(images/templatemo_wrapper_top.jpg) no-repeat top center;
}
/* header */
#templatemo_header {
clear: both;
width: 890px;
height: 60px;
padding: 20px 40px
}
#templatemo_header #site_title {
float: left;
padding-top: 15px;
}
#site_title a {
font-size: 24px;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
#site_title a:hover {
font-weight: bold;
text-decoration: none;
}
#site_title a span {
display: block;
margin-top: 5px;
font-size: 14px;
color: #fff;
font-weight: bold;
letter-spacing: 2px;
}
/* end of header */
/* menu */
#templatemo_menu {
clear: both;
width: 970px;
height: 80px;
background: url(images/templatemo_menubar.png) no-repeat;
}
#search_box {
width: 990px;
height: 35px;
text-align: right;
}
#search_box form {
margin: 0;
padding: 5px 40px;
}
#search_box #input_field {
height: 20px;
width: 300px;
color: #000000;
font-size: 12px;
font-variant: normal;
line-height: normal;
border: 1px solid #CCCCCC;
background: #FFFFFF;
}
#search_box #submit_btn {
height: 24px;
width: 100px;
cursor: pointer;
font-size: 12px;
text-align: center;
vertical-align: bottom;
white-space: pre;
outline: none;
color:#666666;
border: 1px solid #CCCCCC;
background: #FFFFFF;
}
#templatemo_menu ul {
width: 890px;
height: 35px;
margin: 0;
padding: 7px 40px;
list-style: none;
}
#templatemo_menu ul li {
padding: 0px;
margin: 0px;
display: inline;
}
#templatemo_menu ul li a {
float: left;
display: block;
margin-right: 40px;
font-size: 13px;
text-decoration: none;
color: #fff;
font-weight: normal;
outline: none;
}
#templatemo_menu ul li a:hover, #templatemo_menu ul .current {
color: #162127;
}
/* end of menu */
/* contetnt */
#templatemo_content_wrapper {
clear: both;
padding: 0px 0;
}
#templatemo_content {
float: left;
margin-left: 10px;
width: 550px;
}
#banner {
margin: 0 0 10px 0;
}
#templatemo_content #content_top {
width: 550px;
height: 20px;
background: url(images/templatemo_content_top.png) no-repeat;
}
#templatemo_content #content_bottom {
width: 550px;
height: 20px;
background: url(images/templatemo_content_bottom.png) no-repeat;
}
#templatemo_content #content_middle {
width: 510px;
padding: 5px 20px 0px 20px;
background: url(images/templatemo_content_middle.png) repeat-y;
}
#content_middle p {
text-align: justify;
}
.templatemo_sidebar_wrapper {
width: 200px;
}
.templatemo_sidebar {
width: 197px;
padding-right: 3px;
background: url(images/templatemo_sidebar_middle.png) repeat-y;
}
.templatemo_sidebar_top {
width: 200px;
height: 20px;
background: url(images/templatemo_sidebar_top.png) no-repeat;
}
.templatemo_sidebar_bottom {
width: 200px;
height: 20px;
background: url(images/templatemo_sidebar_bottom.png) no-repeat;
}
.templatemo_sidebar .sidebar_box {
clear: both;
padding-bottom: 20px;
}
.sidebar_box1 {
padding: 15px;
}
.sidebar_box h2 {
color: #2d84ad;
font-size: 16px;
padding-left: 25px;
font-weight: bold;
margin: 0 0 10px 10px;
background: url(images/templatemo_sidebar_h1.jpg) left center no-repeat;
}
.sidebar_box .sidebar_box_content {
padding: 15px;
background: url(images/templatemo_sidebar_box_top.png) top repeat-x;
}
.sidebar_box img {
border: 1px solid #999;
margin-bottom: 5px;
}
.sidebar_box .discount {
margin: 5px 0 0 0;
font-weight: bold;
}
.sidebar_box .discount span {
color: #C00;
}
.left_sidebar_box .discount a {
font-weight: bold;
color: #000;
}
.sidebar_box .categories_list {
margin: 0;
padding: 0;
list-style: none;
}
.categories_list li {
padding: 0;
margin: 0;
}
.categories_list li a {
display: block;
color: #201f1c;
padding: 5px 0 5px 20px;
background: url(images/list.png) center left no-repeat;
}
.categories_list li a:hover {
color: #439ac3;
text-decoration: none;
}
.news_box {
clear: both;
margin-bottom: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #999;
}
.news_box h4 {
padding: 2px 0;
margin: 0;
}
.news_box h4 a {
font-size: 12px;
font-weight: normal;
color: #1893f2;
}
#newsletter_box label {
display: block;
margin-bottom: 10px;
}
#newsletter_box .input_field {
height: 20px;
width: 155px;
padding: 0 5px;
margin-bottom: 10px;
color: #000000;
font-size: 12px;
font-variant: normal;
line-height: normal;
}
#newsletter_box .submit_btn {
float: right;
height: 30px;
width: 80px;
margin: 0px;
padding: 3px 0 15px 0;
cursor: pointer;
font-size: 12px;
text-align: center;
vertical-align: bottom;
white-space: pre;
outline: none;
}
.product_box {
float: left;
width: 223px;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #CCC;
text-align: center;
}
.product_box img {
margin-bottom: 10px;
}
.product_box h3 {
color: #2a2522;
font-size: 12px;
margin: 0 0 10px;
}
.product_box p {
margin-bottom: 10px;
}
.product_box p span {
color: #cf5902;
font-size: 14px;
font-weight: bold;
}
.product_box .detail {
float: right;
}
.product_box .addtocard {
float: left;
font-weight: bold;
padding-right: 20px;
background: url(images/templatemo_shopping_cart.png) bottom right no-repeat;
}
/* end of content */
/* footer */
#templatemo_footer_wrapper {
background: url(images/templatemo_footer.png) repeat-x;
}
#templatemo_footer {
width: 910px;
height: 85px;
padding: 50px 40px 30px 40px;
margin: 0 auto;
text-align: center;
color: #a9a098;
}
#templatemo_footer a {
color: #d7d1cc;
font-weight: normal;
}
#templatemo_footer a:hover {
text-decoration: none;
color: #FFFF33;
}
#templatemo_footer .footer_menu {
margin: 0 0 30px 0;
padding: 0px;
list-style: none;
}
.footer_menu li {
margin: 0px;
padding: 0 20px;
display: inline;
border-right: 1px solid #d7d1cc;
}
.footer_menu li a {
color: #d7d1cc;
}
.footer_menu .last_menu {
border: none;
}
/* end of footer */
/*twitter*/
#twitter_div {border-top: 0px;}
#twitter_div a {color: #0000ff !important;}
#twitter_update_list {margin-left: -1em !important; margin-bottom: 0px !important;}
#twitter_update_list li {list-style-type: none; padding-right: 5px; }
#twitter_update_list li a {color: #0000ff; padding-right: 5px;}
#twitter_div {border-bottom: 0px; padding-bottom: 10px; padding-top:6px; padding-right: 5px;}
#twitter_div a, #twitter_update_list li a {text-decoration: none !important;}
#twitter_div a:hover, #twitter_update_list li a:hover {text-decoration:underline !important;}
Try moving the DIV with the class "templatemo_sidebar_wrapper" inside the DIV with the class "templatemo_content_wrapper".
On another note, there is quite a bit wrong with your site. I'm not trying to frustrate you or put you down, but you really should invest a serious amount of time into learning web design. It took me about 1 minute and 45 seconds to load your site which has a footprint of almost 10MB. This is extremely unacceptable by any standard. I would highly recommend switching to www.squarespace.com or something similar. I can tell you right now that it would cost more money to have a web design company fix your site than it would to have them design one from the ground up.
In its current state, your website will likely hurt your business more than it will help. Good luck.
Edit: Move "templatemo_sidebar_wrapper float_r" inside "templatemo_content_wrapper" (I'm not sure this is going to work...you have a lot going on on this page). Your code currently looks like this:
<div id="templatemo_content_wrapper">
<div class="templatemo_sidebar_wrapper float_l"></div>
<div id="templatemo_content"></div>
<div id="content_bottom"></div>
</div>
<div class="templatemo_sidebar_wrapper float_r"></div>