this is a follow-up question to the one posted here. i am trying to get my fonts to show up[ in my laravel website. i tried changing things so SASS will import my fonts, but they're still not showing up on my website. I went to check weaqther the font downloaded in Chrome devtools, but Chrome said the font loaded a 404 error. i checked the link, and the font downloads. Very strange. How do i get my fonts to show up/
Here is my SASS file:
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
#mixin fontFace($family,$src,$weight: normal,$style: normal) {
#font-face {
font-family: $family;
src: url('#{$src}'); // IE9 compat
font-style: $style;
font-weight: $weight;
}
}
#include fontFace('Nexabold', 'public/build/fonts/nexaBold.otf')
body {
margin: 0;
background-color: #ecf0f1;
font-family: NexaBold;
}
.mainheader {
height: 75px;
font-family: NexaBold;
font-size: 28px;
line-height: 75px;
text-align: center;
vertical-align: middle;
background-color: #dce0e1; }
.menu {
height: 40px; }
.subcontainter-title{float:left;}
.subcontainer-left {
height: 75px;
float: left;
width:50%;
}
.subcontainer {
height: 75px;
margin: auto; }
.subcontainer-right {
height: 75px;
width: 50%;
float: right; }
.subcontainer-button {
height: 90px;
width: 105px;
float: right;
padding-left: 12px;
padding-right: 12px;
text-align: center;
vertical-align: middle;
line-height: 75px;
font-family: OpenSans;
font-size: 14px; }
.subcontainer-left .subcontainer-button{float:left;}
.subcontainer-button a {
text-decoration: none;
color: black; }
.subcontainer-button a:visited {
text-decoration: none;
color: black; }
.subcontainer-button a:active {
color: black; }
.subcontainer-button a:hover {
border-bottom: 3px solid gray;
cursor: pointer; }
.subcontainer-title {
height: 75px;
float: left;
padding-left: 12px;
padding-right: 12px;
text-align: center;
vertical-align: middle;
line-height: 75px;
font-family: OpenSans;
font-size: 14px; }
.bt-active a {
border-bottom: 3px solid gold; }
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.maincontainer {
height: 700px; }
.textheader {
height: 180px;
text-align: center;
vertical-align: middle;
line-height: 180px;
font-family: NexaLight;
font-size: 48px; }
.ongoing-header {
width: 700px;
margin: auto;
height: 70px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
background-color: #bcc0c1; }
.subheader {
height: 70px;
width: 260px;
font-family: OpenSans;
font-weight: bold;
font-size: 22px;
text-align: center;
line-height: 70px;
vertical-align: middle;
float: left; }
.subheader-menu {
height: 36px;
background-color: #ccd0d1; }
.button {
height: 36px;
width: auto;
margin: auto;
padding-left: 12px;
padding-right: 12px;
text-align: center;
vertical-align: middle;
line-height: 36px;
font-family: OpenSans;
cursor: pointer;
border-radius: 4px;
transition: 0.3s; }
.button:hover {
background-color: #ecf0f1; }
.subheader-right {
float: right;
padding-top: 16px;
width: 260px;
margin: auto;
margin-right: 24px; }
.ongoing-container {
width: 700px;
margin: auto; }
.ongoing-game {
height: 40px;
line-height: 40px;
vertical-align: middle;
text-align: center;
cursor: pointer;
font-family: OpenSans;
transition: 0.3s; }
.ongoing-game:nth-child(even):hover {
background-color: #f3f9fa; }
.ongoing-game:nth-child(odd):hover {
background-color: #f3f9fa; }
.ongoing-game:nth-child(even) {
background-color: #d3d9da; }
.ongoing-game:nth-child(odd) {
background-color: #dce0e1; }
.iconholder {
height: 20px;
width: 20px;
float: left;
margin-top: 4px;
margin-right: 4px; }
#username {
float: left;
height: 40px;
width: 220px;
text-align: left;
padding-left: 24px; }
#btcamount {
float: left;
height: 40px;
width: 220px;
text-align: right;
padding-right: 24px; }
#ongoing {
height: 40px;
width: 212px;
float: left; }
.bitcoinlogo {
height: 15px; }
.helpcontainer {
height: 600px;
width: 500px;
margin: auto;
font-family: OpenSans; }
.helpform {
margin-top: 20px;
height: 400px;
font-size: 12px; }
.helpform textarea {
resize: none;
font-family: OpenSans; }
#issuetext {
height: 100px;
width: 480px; }
#emailtext {
height: 18px;
width: 220px;
font-family: OpenSans; }
.submitbutton {
height: 40px;
width: 180px;
float: none;
margin: auto;
margin-top: 20px;
border: 1px solid gray;
background-color: white;
text-align: center;
vertical-align: middle;
line-height: 40px;
font-size: 14px;
cursor: pointer;
border-radius: 3px;
transition: 0.2s background-color; }
.submitbutton:hover {
background-color: lightgrey; }
I have created a div that loads hrefs using jquery .load function.
When you mouseenter over an href it loads another popup div using .load.
Everything appears normal when 1 div (with the dates) is loaded see pic(show1) enter image description here
But when I load a second div of dates the popup gets all distorded see pic(show2)enter image description here
Any ideas why this is happening?
Thanks.
This is the code that loads the divs with the hrefs:
<script>
$(document).ready(function(){
$("#left1");
});
</script>
<script>
$(document).ready(function(){
$("#center1");
});
</script>
<script>
$(document).ready(function(){
$("#center2");
});
</script>
<script>
$(document).ready(function(){
$("#center3").load("2016_select_paycheck_to_view.php");
});
</script>
<script>
$(document).ready(function(){
$("#center4").load("2015_select_paycheck_to_view.php");
});
</script>
#center3 {
border-top: 1px solid green;
border-bottom : 1px solid green;
border-left : 0px solid green;
border-right : 1px solid green;
background-color: #FDF5E6;
display: inline-table;
width: 190px;
height: 480px;
}
m3
{
font-family: calibri;
color: black;
font-size: 1em;
text-align: left;
border-top: 2px solid #4d4d4d;
border-left: 2px solid #4d4d4d;
border-right: 0px solid #4d4d4d;
position: relative;
top: 0px;
left: 0px;
padding: 0.2em;
margin-bottom: 0px;
margin-left: 0px;
width: 78px;
line-height: 0.8em;
}
m3t
{
font-family: arial black;
color: white;
font-size: 1em;
text-align: center;
border-top: 3px solid #8A0800;
border-left: 1px solid #8A0800;
border-right: 1px solid #8A0800;
border-bottom: 3px solid #8A0800;
position: relative;
left: 2px;
padding-top: 0.4em;
padding-bottom: 0.4em;
padding-left: 0.1em;
margin-bottom: 0px;
width: 79px;
line-height: 85%;
background-color: #8A0800;
}
m3b
{
font-family: arial black;
color: white;
font-size: 1em;
text-align: center;
border-top: 3.3px solid #8A0800;
border-left: 1px solid #8A0800;
border-right: 1px solid #8A0800;
border-bottom: 3.3px solid #8A0800;
position: relative;
left: 2px;
padding-top: 0.4em;
padding-bottom: 0.4em;
padding-left: 0.1em;
margin-top: 0.8px;
width: 79px;
line-height: 85%;
background-color: #8A0800;
}
#center4 {
border-top: 1px solid green;
border-bottom : 1px solid green;
border-left : 0px solid green;
border-right : 1px solid green;
background-color: #FDF5E6;
width: 190px;
height: 480px;
}
m4
{
font-family: calibri;
color: black;
font-size: 1em;
text-align: left;
border-top: 2px solid #4d4d4d;
border-left: 2px solid #4d4d4d;
border-right: 0px solid #4d4d4d;
display: block;
float: left;
clear: both;
position: relative;
top: 0px;
left: 0px;
padding: 0.2em;
margin-bottom: 0px;
margin-left: 0px;
width: 78px;
line-height: 0.8em;
}
m4t
{
font-family: arial black;
color: white;
font-size: 1em;
text-align: center;
border-top: 3px solid #8A0800;
border-left: 1px solid #8A0800;
border-right: 1px solid #8A0800;
border-bottom: 3px solid #8A0800;
display: block;
float: left;
clear: both;
position: relative;
left: 2px;
padding-top: 0.4em;
padding-bottom: 0.4em;
padding-left: 0.1em;
margin-bottom: 0px;
width: 79px;
line-height: 85%;
background-color: #8A0800;
}
m4b
{
font-family: arial black;
color: white;
font-size: 1em;
text-align: center;
border-top: 3.3px solid #8A0800;
border-left: 1px solid #8A0800;
border-right: 1px solid #8A0800;
border-bottom: 3.3px solid #8A0800;
display: block;
float: left;
clear: both;
position: relative;
left: 2px;
padding-top: 0.4em;
padding-bottom: 0.4em;
padding-left: 0.1em;
margin-top: 0.8px;
width: 79px;
line-height: 85%;
background-color: #8A0800;
}
<div id="firstwrapper">
<div id="left1"> 2019 </div>
<div id="center1"> 2018 </div>
<div id="center2"> 2017 </div>
<div id="center3"> 2016 </div>
<div id="center4"> 2015 </div>
</div>
This is the code that loads the popup divs:
$(function() {
$("a#trigger").mouseenter(function () {
$("div#pop-up").clearQueue();
$("div#pop-up").show();
});
$("a#trigger").mouseleave(function () {
$("div#pop-up").delay(60).slideUp();
});
$("div#pop-up").mouseenter(function () {
$(this).clearQueue();
});
$("div#pop-up").mouseleave(function () {
$(this).delay(200).slideUp();
});
$("a#trigger").mousemove(function(){
var x = $("#center3").offset();
if(x.top > 400, x.left > 9) {
var moveDown = 200;
var moveLeft = -200;
$("div#pop-up").css('top', x.top + moveDown).css('left', x.left + moveLeft);
} else if(x.top > 600, x.left > 40) {
var moveDown = 200;
var moveLeft = -200;
$("div#pop-up").css('top', x.top + moveDown).css('left', x.left + moveLeft);
} else {
var moveDown = 200;
var moveLeft = -200;
$("div#pop-up").css('top', x.top + moveDown).css('left', x.left + moveLeft);
}
});
<style type="text/css">
#secondwrapper {
border: 0px dashed red; /* black */
background: transparent;
position: relative;
left: 0px;
top: 0px;
z-index: 20;
width: 190px;
height: 480px;
}
#middle1 {
border: 1px dashed teal;
width: 190px;
height: 480px;
display: block;
clear: both;
float: left;
position: absolute;
left: 0px;
top: 0px;
margin-top: 0px;
margin-bottom: 20px;
background-color: #FDF5E6;
}
m1year
{
font-family: arial;
color: black;
font-weight: 700;
font-size: 0.9em;
text-align: left;
border: 1px dotted red;
display: block;
float: left;
clear: both;
position: relative;
top: 0px;
left: 0px;
padding: 0.3em;
width: 50px;
height: 8px;
line-height: 0.7em;
background-color: transparent;
}
m1
{
font-family: calibri;
color: #8c0000;
font-size: 1em;
text-align: left;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
display: block;
float: left;
clear: both;
position: relative;
top: 0px;
left: 0px;
padding: 0.36em;
margin-bottom: 0em;
margin-left: 10px;
width: 155px;
height: 5px;
line-height: 4.3px;
background-color: white;
}
a:link {
text-decoration: none;
color: #8c0000;
}
a:visited {
color: #8c0000;
} /* visited link */
a:hover {
color: red;
} /* mouse over link */
div#pop-up {
display: none;
position: absolute;
left: 100px;
z-index: 30;
width: 550px;
height: 600px;
background: transparent;
color: #000000;
border: 0px dashed #ff6600; /* ORANGE */
}
</style>
<script>
$(document).ready(function(){
$("#pop-up").load("2016_dump_expenses_sums_PER_PAYCHECK_DYNAMIC.php? THURSDAY=<?PHP echo ($array0); ?>&WEDNESDAY=<?PHP echo ($array13); ?>&pay=<?PHP echo (958); ?>" ); });
</script>
<div id="secondwrapper">
<div id="middle1"
<m1year> 2016 </m1year>
<m1>
<A HREF="2016_dump_expenses_sums_PER_PAYCHECK_DYNAMIC.php?THURSDAY=<?PHP echo ($array0); ?>&WEDNESDAY=<?PHP echo ($array13); ?>&pay=<?PHP echo (958); ?> "
TARGET="mainFrame" id="trigger">
<?PHP
print ("$newMonth1");
print (" ");
print ("$newDay1");
print (" ");
print ("-");
print (" ");
print ("$newMonth1a");
print (" ");
print ("$newDay1a");
?>
</A></m1>
</div>
</div>
<div id="pop-up"> </div>
<div id="pop-up2"> </div>
<div id="pop-up3"> </div>
<div id="pop-up4"> </div>
Ok I think I fixed it. It was my css I removed some divs and it appears to be working ok now.
Please, show us the markup and css you're using: it looks like something inherent to css issue.
I've been designing my site re-learning CSS after taking a long time, and have been essentially creating a website (integrated with WordPress) by basically doing as little as possible with the HTML/PHP, and trying to design it all from the CSS and available CLASS and IDs setup for me by a template theme. (Blankslate Theme)
This entire time it's been coming along fine in Chrome. I decided before I got too far to check it out on Firefox. Firefox decides everything should be squished to the LEFT, while in Chrome the site looks perfectly centered and matches things I try to do in the CSS.
I tried to align both the WRAPPER, Body, and even HTML to center the entire page, but Firefox refuses to do so. My fixed sidebar on the right is suppose to be spaced away from the main content, which it is in Chrome (unless you increase the size of the entire page, then it overlaps.) In Firefox, it doesn't even try to go as far right as possible, it just squishes in with everything else.
I've also wanted to use Ellipsis to cut off the text in the Sidebar if it's too long, however it refuses to work. It either cuts the text off, but does not substitute ellipsis, or runs off the page.
Below is the structure I'd like:
http://www.icesage.com/i/site2.png
Here is the CSS I'm using. As for the PHP/HTML structure you'll need to go to the actual website itself as there are too many to show here. (Again, it's WordPress, and uses the theme Blankslate as a starting point.)
body {
background-color: black;
background-repeat:no-repeat;
background-attachment:fixed;
background-size: 110%;
line-height: 20px;
text-size: 10px;
font-family: Verdana;
}
#site-title {
position:relative;
top:0px;
margin: 0 auto;
width: 10%;
display:none;
}
/* #header {
position:relative;
top:0px;
margin: 0 auto;
width: 40%;
} */
#footer {
position: relative;
float: right;
bottom: 0;
margin: 2% auto;
right: 25%;
width: 50%;
height: 10px; /* Height of the footer */
background-color:rgba(0,0,0,0.7);
border-radius: 10px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
text-align: center:
padding-top: 5px;
padding-bottom: 9px;
padding-right: 5px;
padding-left: 5px;
display: inline
}
#copyright {
text-align: center;
}
/* Top Navigation */
#menu {
margin: 0 auto;
}
#menu a {
float: left;
color: white;
display: block;
height: 40px;
line-height: 40px;
text-decoration: none;
text-align: center;
margin-right: 10px;
border-left-style: solid;
border-width: 1px;
border-color: #1c6191;
background-color:rgba(0,0,0,0.9);
border-radius: 10px;
box-shadow: 4px 0px 2px 3px #1c6191;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 15px;
padding-left: 15px;
}
#menu a:hover {
background-color: blue;
}
.entry-title {
font-size: large;
width:60%;
text-shadow: 2px 0.5px #1c6191;
background-color:rgba(0,0,0,0.7);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px;
padding-left: 5px;
margin: 2px
}
/* h1 .entry-title {
display: none;
font-size: 50px;
}
h2 .entry-title {
display:none;
font-size: 50px;
}
h3 .entry-title {
font-size: 50px;
text-shadow: 2px 0.5px #1c6191;
}
h3 .widget-title {
font-size: 50px;
text-shadow: 2px 0.5px #1c6191;
}
*/
.cat-links {
display:none;
}
/* Main Content Post (Entry) */
.post {
width: 70%;
background-color:rgba(0,0,0,0.9);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin: 30px;
margin-left: 5px;
}
img.alignright {float:right; margin:20px 10 10em 10em; background-color: royalblue; border: 1px;}
img.alignleft {float:left; margin:20px 10em 2em 2em;}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
.alignright {float:right; text-align:center; padding-left: 20px;}
.alignleft {float:left; }
.aligncenter {display: block; margin-left: auto; margin-right: auto}
.wp-caption-text {
font-size: small;
font-style:italic;
text-align:center;
}
.post-edit-link {
float: left;
color: white;
position: relative;
display: block;
height: 40px;
line-height: 40px;
text-decoration: none;
text-align: center;
margin-right: 10px;
border-left-style: solid;
border-width: 1px;
border-color: #1c6191;
background-color:rgba(0,0,0,0.9);
border-radius: 10px;
box-shadow: 4px 0px 2px 3px #1c6191;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 15px;
padding-left: 15px;
}
.post-edit-link:hover {
background-color: blue;
}
.comments-link {
float: right;
color: white;
display: block;
position: relative;
height: 40px;
line-height: 40px;
text-decoration: none;
text-align: center;
margin-right: 10px;
border-left-style: solid;
border-width: 1px;
border-color: #1c6191;
background-color:rgba(0,0,0,0.9);
border-radius: 10px;
box-shadow: 4px 0px 2px 3px #1c6191;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 15px;
padding-left: 15px;
}
.comments-link:hover {
background-color: blue;
}
.type-page {
width: 70%;
float: left;
background-color:rgba(0,0,0,0.9);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin: 40px
overflow: auto;
}
.nav-previous {
display: none;
}
.comments {
width: 70%;
float: left;
background-color:rgba(0,0,0,0.9);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin: 20px
}
.comment {
width: 70%;
float: left;
background-color:rgba(0,0,0,0.9);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin: 20px
}
#header {
width: 60%;
margin: 0 auto;
background-color:rgba(0,0,0,0.7);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin-bottom: 40px;
}
#titlebanner {
margin: 0 auto;
}
.meta-sep {
display: none;
}
html {
zoom: .8;
-moz-transform: scale(0.8);
-moz-transform-origin: 0 0;
margin: 20px auto;
}
.comment-respond {
color: white;
width: 60%;
float: left;
background-color:rgba(0,0,0,0.7);
border-radius: 20px;
margin: 0 auto;
box-shadow: 5px 0px 4px 0px #1c6191;
font-color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
}
.entry-date {
color: royalblue;
}
#wrapper {
-moz-margin-start: -40px auto;
margin-right: 0 auto;
}
/* Sidebar */
.widget-area {
position: fixed;
top: 225px;
z-index: 1;
right: 0.5%;
text-shadow: 2px 2px #1c6191;
width: 300px;
float:left;
border-left-style: solid;
border-width: 1px;
border-color: #1c6191;
background-color:rgba(0,0,0,0.9);
border-radius: 10px;
box-shadow: 4px 0px 2px 3px #1c6191;
color: white;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0px;
padding-left: 0px;
margin-right: inherit;
}
.xoxo {
display:block;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 2px;
padding-left: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: clip
text-overflow: ellipsis
text-overflow: "…"
}
#searchsubmit {
display:none;
}
.searchform .screen-reader-text {
display:none;
}
.xoxo .screen-reader-text {
display:none;
}
.entry-content {
width: 90%;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 25px;
padding-left: 25px;
text-align:justify;
/* text-shadow: 2px 0.5px #1c6191; */
}
P {
color: white;
}
#search {
display:none
}
#site-description {
display:none
}
A {
text-decoration: none;
font-family:Verdana;
}
A:link {
text-decoration: none;
color:#04CCFD;
font-family:Verdana;
}
A:visited {
text-decoration: none;
color:#04CCFD;
font-family:Verdana;
}
A:active {text-decoration: none;
color:#04CCFD;
}
A:hover {
text-decoration: none;
color:white;
}
li .widget-container {
font-color: white;
}
/* Sub-Menu Test */
/* End Sub-Menu Test */
video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}
ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}
section{display:block}
.clear{clear:both}
.sticky{}
.bypostauthor{}
.wp-caption{}
.wp-caption-text{}
.gallery-caption{}
.alignright{}
.alignleft{}
.aligncenter{}
Website: http://www.icesage.com
Or you can take a look at "Blankslate."
Any help in figuring out what I'm doing wrong or pointing out some sloppy code would be appreciated, but the main question for this post is:
How can I contain everything in the wrapper properly and have the entire site centered, including the sidebar, in all browsers (especially Firefox) like how it appears in Chrome? (Additionally, some of the layout was done accidentally, like the Comment & TopNav buttons appearing slightly off the previous area. Which I want to keep, but I'm not sure how to properly keep it that way.)
I searched thoroughly and the answers provided keep telling me the appropriate CSS to use, and I keep using it to no avail. Other questions are simply left unanswered.
Any help would be appreciated!
The problem is coming from the way you used transform-origin for firefox browser. Look at the following class
html {
zoom: .8;
-moz-transform: scale(0.8);
-moz-transform-origin: 0 0;
margin: 20px auto;
}
As you mentioned "0 0" for origin property. The first value is the horizontal position, the second value is the vertical. So it aligned to left and top position. If you want horizontally center the page then you need to give "center, top" or "50%,0". Update your CSS like below.
html {
zoom: .8;
-moz-transform: scale(0.8);
-moz-transform-origin:50% 0;
margin: 20px auto;
}
Additional Question asked by OP in the comment box:
do you know why the sidebar is still condensed and overlapping the content on the left, when it doesn't do that in Chrome?
This issue came because the default behavior of chrome and firefox. Look at the following class.
.post {
width: 70%;
background-color:rgba(0,0,0,0.9);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin: 30px;
margin-left: 5px;
}
The default chrome property for box-sizing:border-box and firefox is box-sizing:content-box. This is causing the problem. Check what is the difference between these to here
So force firefox to use border-box property for box-sizing. Update the CSS like below.
.post {
width: 70%;
background-color:rgba(0,0,0,0.9);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin: 30px;
margin-left: 5px;
-moz-box-sizing:border-box;
}
The site looks in Chrome exactly as it looks in Firefox. Because of this here:
margin-right: 0 auto;
which is an invalid property for margin-right. You want
margin: 0 auto;
I have read some other answers but have still not been able to get the settings right.
The columsheader does not start scrolling up again.
Here is my php:
<div id="columnsHeader" class="affix" data-offset-top="800" data-offset-bottom="400" data-spy="affix">
Here is my css:
.itemList {
position: relative;
}
.extrafieldscolumnsHeader {
position: absolute;
top: -25px;
width: 818px;
color:white;
min-height: 28px;
padding-top: 5px;
padding-left:8px;
}
#columnsHeader.affix {
border-top: 40px solid #FFFFFF;
position: fixed;
top: 43px;
width: 818px;
}
#columnsHeader.affix-bottom {
position: absolute; /* Start scrolling again. */
top: auto; /* Override the top position above. */
bottom: 55px; /* It should stop near the bottom of its parent. */
}
Here is the temp url:
http://108.163.203.210/~goodwin/xjoomla/index.php?option=com_k2&view=itemlist&layout=category&task=category&id=12&Itemid=143
i think this may works for you and you just need to set margin-bottom of <BODY>respect to your footer...
HTML:
<footer>
<button class="filter">filter ▶</button>
<button class="wgit">wGit ▶</button>
</footer>
CSS:
body > footer {
width: 100%;
position: fixed;
background-color: #ffffff;
bottom: 0px;
right: 0px;
height: 40px;
border-top: 1px solid #000000;
}
body > footer > button{
font-size: 16px;
float: right;
margin:5px 15px 5px 10px;
width: 80px;
padding: 3px;
border: 1px solid #c3c3c3;
border-radius: 5px;
}
body > footer > button:hover{
color: #000000;
box-shadow: 0px 0px 10px #c3c3c3 inset;
}
.filter-child {
display: none;
background-color: #ffffff;
position: fixed;
right:15px;
bottom:50px;
padding:5px;
border: 1px dashed #c3c3c3;
border-radius: 10px;
}
.filter-child li{
list-style: none;
padding: 5px;
text-align: center;
background-color: #f3f3f3;
margin: 2px;
border: 1px solid #c3c3c3;
border-radius: 5px;
}
.filter-child li:hover{
box-shadow: 0px 0px 5px #3a3a3a inset;
}
.filter-child a{
color: #000000;
}
and you can follow this links also...
http://www.cssstickyfooter.com/
http://css-tricks.com/snippets/css/sticky-footer/
I am developing a site using a dynamic PHP header and seem to have gotten that part working. My issues came when trying to put the remaining content in the container div along with the header div. All other content is ignored and gets pushed to the left and down below the container. I want it to be INSIDE the container and center on the page like the header does.
Here is where I am with the site:
http://maniandcompany.com/test/test/Print.php
I have tried several things including overflow:hidden; to no avail.
Here is the HTML Page
<div id="container">
<div id="header">
<?php include 'header.php'; ?>
</div>
<div id="body">
<div class="text">
<h1>Title H1</h1>
<h3>H3 Copy</h3>
<h2>H2 Title</h2>
<p>body copy p</p>
<span class="more_pictures">more images:</span>
</div>
<div class="main_image"><img src="images/Corporate_Id_main1.jpg" />
</div>
</div>
<div style="clear: both;"></div>
</div>
Here is the CSS
/*Container*/
#container {
width:790px;
margin:auto;
overflow:hidden;
}
/*Body*/
#body {
width:790px;
margin-top:0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #484941;
overflow:hidden;
}
.main_image {
float:right;
width:527px;
height:350px;
margin-left:3px;
}
.text {
float:left;
font-family:Georgia, "Times New Roman", Times, serif;
width: 220px;
min-height: 350px;
margin-left:20px;
margin-right:20px;
}
.text h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color: #666;
text-transform: uppercase;
}
.text h2 {
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
color: #F60;
}
.text h3 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
font-style:italic;
color: #CCC;
padding-bottom: 20px;
}
.text p {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color: #999;
padding-bottom:10px;
}
.text .more_pictures {
font-size:9px;
font-style:italic;
color: #999;
}
/*header*/
#header {
width:790px;
height:140px;
}
#head {
width:790px;
}
/*logo*/
#logo {
float:left;
width: 260px;
height: 100px;
}
/*main navigation*/
#nav_main {
float:left;
font-size: 12px;
color: #000;
font-family: Georgia, "Times New Roman", Times, serif;
text-decoration: none;
font-style: italic;
width:240px;
height:20px;
text-align:center;
margin-left:20px;
margin-top:110px;
position:absolute;
z-index:2;
}
#nav_main .current {
float:left;
padding-right: 10px;
color: #F60;
text-decoration: none;
}
#nav_main .current a:link {
color: #F60;
text-decoration: none;
}
#nav_main .current a:visited, a:hover, a:active {
color: #F60;
text-decoration: none;
}
#nav_main .inactive {
padding-right: 10px;
float:left;
color: #000;
text-decoration: none;
}
#nav_main .inactive a:link{
color: #000;
text-decoration: none;
}
#nav_main .inactive a:visited {
color: #000;
text-decoration: none;
}
#nav_main .inactive a:hover, a:active {
color: #F60;
text-decoration: none;
}
/*NAV STYLES*/
#nav {
float:right;
height: 100px; /*height of our content box*/
width: 527; /*width of our content box*/
margin-left:3px;
}
#nav #greybox {
height: 20px;
width: 527px;
background: #CCC;
background-color: #ccc;
margin-bottom:5px;
}
#nav #greybox2 {
height: 20px;
width: 527px;
background: #CCC;
background-color: #ccc;
margin-top: 60px;
}
/*Thumbstrip*/
#nav #thumbStrip {
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color: #F60;
-webkit-backface-visibility: hidden;
float: left;
height: 70px;
width: 527px;
margin-bottom:5px;
}
#nav #thumbStrip .thumb {
float: left;
width: 50px;
height: 50px;
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
margin-left: 3px;
-moz-box-shadow: 0px 0px 0px #FFF;
-webkit-box-shadow: 0px 0px 0px #FFF;
box-shadow: 0px 0px 0px #FFF;
opacity:0.4;
filter:alpha(opacity=40);
}
#nav #thumbStrip .thumb:hover {
-moz-transform: scale(1.7);
-moz-transform-origin: center top;
-webkit-transform: scale(1.7);
-webkit-transform-origin: center top;
transform: scale(1.7);
transform-origin: center top;
background: #FFF;
-moz-box-shadow: 0px 1px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 1px 3px #FFF;
box-shadow: 0px 1px 1px 3px #FFF;
height: 60px;
overflow: visible;
opacity:1.0;
filter:alpha(opacity=100);
position: relative;
z-index:1;
}
#nav #thumbStrip .thumb .first {
margin-left: 0px;
}
#nav #thumbStrip .thumb p {
margin: 0;
line-height: 1;
text-align: center;
font-size: 60%;
color: inherit;
text-transform: uppercase;
}
#nav #thumbStrip .thumb img {
display: block;
margin-bottom: 2px;
cursor: pointer;
}
#nav #thumbStrip a:link, .thumbStrip a:visited {
font-size: 0.8em;
color: #F60;
}
#nav #thumbStrip a:hover, #thumbStrip a:active {
border: none;
color: #F60;
}
/*Thumbstrip First*/
#nav #thumbStrip .thumbfirst {
float: left;
width: 50px;
height: 50px;
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
margin-left: 0px;
-moz-box-shadow: 0px 0px 0px #FFF;
-webkit-box-shadow: 0px 0px 0px #FFF;
box-shadow: 0px 0px 0px #FFF;
opacity:0.4;
filter:alpha(opacity=40);
}
#nav #thumbStrip .thumbfirst:hover {
-moz-transform: scale(1.7);
-moz-transform-origin: center top;
-webkit-transform: scale(1.7);
-webkit-transform-origin: center top;
transform: scale(1.7);
transform-origin: center top;
background: #FFF;
-moz-box-shadow: 0px 1px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 1px 3px #FFF;
box-shadow: 0px 1px 1px 3px #FFF;
height: 60px;
overflow: visible;
opacity:1.0;
filter:alpha(opacity=100);
position: relative;
z-index:1;
}
#nav #thumbStrip .thumbfirst p {
margin: 0;
line-height: 1;
text-align: center;
font-size: 60%;
color: inherit;
text-transform: uppercase;
}
#nav #thumbStrip .thumbfirst img {
display: block;
margin-bottom: 2px;
cursor: pointer;
}
/*thumb active first*/
#nav #thumbStrip .thumbActiveFirst {
float: left;
width: 50px;
height: 50px;
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
color: #F60;
-moz-box-shadow: 0px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 3px #FFF;
box-shadow: 0px 1px 3px #FFF;
opacity:1.0;
filter:alpha(opacity=100);
}
#nav #thumbStrip .thumbActiveFirst:hover {
-moz-transform: scale(1.7);
-moz-transform-origin: center top;
-webkit-transform: scale(1.7);
-webkit-transform-origin: center top;
transform: scale(1.7);
transform-origin: center top;
background: #FFF;
-moz-box-shadow: 0px 1px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 1px 3px #FFF;
box-shadow: 0px 1px 1px 3px #FFF;
height: 60px;
overflow: visible;
opacity:1.0;
filter:alpha(opacity=100);
position: relative;
z-index:1;
}
#nav #thumbStrip .thumbActiveFirst p {
margin: 0;
line-height: 1;
text-align: center;
font-size: 60%;
color: inherit;
text-transform: uppercase;
}
#nav #thumbStrip .thumbActiveFirst img {
display: block;
margin-bottom: 2px;
cursor: pointer;
}
/*thumb active*/
#nav #thumbStrip .thumbActive {
float: left;
width: 50px;
height: 50px;
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
color: #F60;
margin-left: 3px;
-moz-box-shadow: 0px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 3px #FFF;
box-shadow: 0px 1px 3px #FFF;
opacity:1.0;
filter:alpha(opacity=100);
}
#nav #thumbStrip .thumbActive:hover {
-moz-transform: scale(1.7);
-moz-transform-origin: center top;
-webkit-transform: scale(1.7);
-webkit-transform-origin: center top;
transform: scale(1.7);
transform-origin: center top;
background: #FFF;
-moz-box-shadow: 0px 1px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 1px 3px #FFF;
box-shadow: 0px 1px 1px 3px #FFF;
height: 60px;
overflow: visible;
opacity:1.0;
filter:alpha(opacity=100);
position: relative;
z-index:1;
}
#nav #thumbStrip .thumbActive p {
margin: 0;
line-height: 1;
text-align: center;
font-size: 60%;
color: inherit;
text-transform: uppercase;
}
#nav #thumbStrip .thumbActive img {
display: block;
margin-bottom: 2px;
cursor: pointer;
}
#nav #thumbStrip a:link, #content .thumbStrip a:visited {
font-size: 0.8em;
color: #F60;
}
#nav #thumbStrip a:hover, #thumbStrip a:active {
border: none;
color: #fff;
}
#nav #thumbStrip .thumb .first {
margin-left: 0px;
}
Thanks in advance for your help.
line 119 on the source page has a div closing tag that is ending you 'body' div before your 'clear' div.
<div class="main_image"><img src="images/Corporate_Id_main1.jpg" />
</div>
</div> <-- erase this closing tag.
<div style="clear: both;"></div>
</div>
Not to mention you have 2 sets of opening and closing head and body tags. im not sure if you're including a php file with those and then repeating them in your other pages or what, but there are a lot of stray tags on that page.