So I am working on a website at the moment, and all the content is arranged in boxes around the page. The css looks like this:
section {
position: static;
bottom: 110px;
}
#topLeft, #topRight, #bottomLeft, #bottomRight, #below {
background-color: white;
padding-left: 10px;
padding-right: 10px;
box-shadow: rgba(0,0,0,0) 0px 2px 3px, inset rgba(0,0,0,0) 0px -1px 2px;
border-radius: 20px;
border: 1px solid #00BFFF;
}
#topLeft, #topRight {
padding-top: 10px;
}
#topLeft {
float: left;
margin-top: 200px;
width: 630px;
height: 310px;
}
#topRight {
float: right;
margin-top: 200px;
width: 300px;
height: 630px;
}
#middle {
clear: left;
position: absolute;
margin-top: 530px;
margin-left: 330px;
width: 320px;
height: 310px;
}
#bottomLeft {
clear: left;
float: left;
margin-top: 10px;
width: 300px;
height: 630px;
}
#bottomRight {
clear: right;
float: right;
margin-top: 10px;
width: 630px;
height: 310px;
}
img {
border-radius: 20px;
}
#topRight img {
margin-top: 25px;
}
#bottomLeft img {
margin-top: 20px;
}
And the footer goes below this, its css looks like this:
footer {
clear: left;
/*position: relative;*/
bottom: 0px;
padding-bottom: 20px;
margin-bottom: 20px;
padding-top: 40px;
height: 110px;
font: normal 12px 'Helvetica', sans-serif;
color: white;
text-align: center;
}
I want to add a new box below the others, but above the footer. Its css looks like this:
#below {
clear: both;
position: absolute;
float: left;
margin-top: 1170px;
width: 960px;
}
The problem is that this box overlaps the footer! And I just cannot work out how to fix this, any ideas?
#below { clear:both }
should be enough
Related
So I am trying to validate my website and keep getting a parse error for one of my media queries section of my style sheet. When I just copy and paste that section of code into the W3 CSS Validator it shows its fine but when the whole sheet is up it finds an error somewhere in there. Here is what I have:
/* CSS Document for:
Chris Quantrell: Illustration, Graphic and Web Design
By: Chris Quantrell
*/
.primaryContainer {
height: auto;
margin-left: auto;
margin-right: auto;
min-height: 100%;
background-image: url(../img/shattered_#2X.png);
background-attachment: scroll;
background-size: auto;
background-size: auto;
background-position: 0% 0%;
background-repeat: repeat repeat;
font-family: source-sans-pro, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 100;
font-size: 16px;
color: rgba(18, 18, 18, 1.00);
}
#logo_container {
float: none;
height: auto;
margin: 12px;
clear: none;
width: 1050px;
min-width: 0px;
margin-left: auto;
margin-right: auto;
}
#bear_logo {
float: left;
width: 100%;
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
clear: none;
color: rgb(0, 0, 0);
min-width: 0px;
}
#contact_info_stripe {
background-color: #E2231A;
width: 100%;
}
#contact_info_box {
float: none;
height: auto;
margin-left: auto;
margin-top: 0px;
clear: none;
width: 1050px;
margin-right: auto;
background-color: #E2231A;
padding: 10px;
color: white;
text-align: right;
font-size: 140%;
}
/* about me section */
#about_me_box {
float: none;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
clear: none;
width: 1050px;
min-height: 0px;
padding-left: 157px;
padding-right: 10px;
background-color: white;
background-image: url(../img/bear_aboutme.png);
background-size: 100%;
background-repeat: no-repeat;
}
#about_me_box p {
width: 575px;
height: auto;
margin-left: auto;
margin-top: 0px;
text-align: justify;
padding: 10px;
font-size: 110%;
}
/* Gallery Stuff */
#gallery_container {
float: none;
height: auto;
margin: 0px auto;
clear: none;
width: 1050px;
min-height: 0px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 100px;
background-color: white;
}
.gallery_cell {
width: 320px;
height: 320px;
float: left;
margin: 10px;
display: block;
border: thick #F00;
}
a:hover.gallery_cell {
border: 10px rgba(255, 0, 4, 1.00);
}
/* Button Stuff */
.button {
display: block;
height: 80px;
width: 275px;
background: #E2231A;
font-weight: 800;
font-size: 200%;
color: white;
text-align: center;
padding-top: 16px;
float: right;
margin-left: 16px;
margin-bottom: 16px;
}
a.button {
text-decoration: none;
}
a:visited.button {
text-decoration: none;
color: white;
}
a:hover.button {
color: white;
}
/* Headline Section */
h1 {
font-size: 360%;
font-weight: 900;
text-align: right;
}
h2 {
font-size: 160%;
font-weight: 500;
margin-top: 0px;
margin-bottom: 4px;
}
h3 {
font-size: 200%;
font-weight: 800;
margin-top: 32px;
margin-bottom: -10px;
color: #E2231A;
text-align: right;
margin-right: 12px;
}
h4 {
font-size: 200%;
font-weight: 800;
margin-top: 32px;
margin-right: 10px;
color: #E2231A;
text-align: right;
margin-bottom: 12px;
}
/* Tablet Styles */
#media only screen and (max-width: 1049px) {
.primaryContainer {
background-image: url(../img/shattered.png);
}
#logo_container {
width: 100%;
margin-bottom: 12px;
}
#contact_info_box {
width: 100%;
}
#about_me_box {
width: 100%;
padding-right: 10px;
padding-left: 20%;
background-size: 60%;
background-position: left 36px;
}
#about_me_box p {
width: 100%;
padding-left: 10%;
}
.button {
width: 43.5%;
margin-left: 1%;
margin-right: 1%;
height: 54px;
font-size: 150%;
padding-top: 10px;
}
#bear_logo {
width: 98%;
margin-left: 1%;
margin-right: 1%;
float: left;
margin-top: 0px;
clear: none;
}
#gallery_container {
width: 100%;
}
#gallery_grid {
margin-left: auto;
margin-right: auto;
display: block;
}
.gallery_cell {
width: 30%;
height: 30%;
margin-left: 1%;
margin-top: 15px;
}
/*Phone Styles*/
#media only screen and (max-width: 640px) {
#logo_container {
margin-top: 4px;
margin-left: 1%;
clear: none;
width: 98%;
margin-right: 1%;
}
#about_me_box {
margin-right: 1%;
margin-left: 1%;
padding-left: 1%;
padding: 1%;
width: 98%;
background-image: none;
}
#about_me_box p {
width: 98%;
margin-left: 1%;
margin-right: 1%;
padding-left: 0px;
}
.button {
width: 100%;
height: 54px;
font-size: 150%;
padding-top: 10px;
}
#bear_logo {
width: 100%;
}
#contact_info_box {
width: 98%;
margin-right: 1%;
margin-left: 1%;
padding: 1%;
}
#gallery_container {
width: 98%;
margin-right: 1%;
margin-left: 1%;
padding: 1%;
}
.gallery_cell {
width: 48%;
height: 48%;
margin-left: 1%;
margin-right: 1%;
margin-top: 8px;
}
}
#media only screen and (max-width: 400px) {
.gallery_cell {
width: 98%;
height: 98%;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
}
}
Any and all help would be greatly appreciated!
You aren't closing the tablet styles #media with a }.
/* Tablet Styles */
#media only screen and (max-width: 1049px) {
.primaryContainer {
background-image: url(../img/shattered.png);
}
#logo_container {
width: 100%;
margin-bottom: 12px;
}
#contact_info_box {
width: 100%;
}
#about_me_box {
width: 100%;
padding-right: 10px;
padding-left: 20%;
background-size: 60%;
background-position: left 36px;
}
#about_me_box p {
width: 100%;
padding-left: 10%;
}
.button {
width: 43.5%;
margin-left: 1%;
margin-right: 1%;
height: 54px;
font-size: 150%;
padding-top: 10px;
}
#bear_logo {
width: 98%;
margin-left: 1%;
margin-right: 1%;
float: left;
margin-top: 0px;
clear: none;
}
#gallery_container {
width: 100%;
}
#gallery_grid {
margin-left: auto;
margin-right: auto;
display: block;
}
.gallery_cell {
width: 30%;
height: 30%;
margin-left: 1%;
margin-top: 15px;
}
} /* <- Missing that */
/*Phone Styles*/
#media only screen and (max-width: 640px) {
#logo_container {
margin-top: 4px;
margin-left: 1%;
clear: none;
width: 98%;
margin-right: 1%;
}
#about_me_box {
margin-right: 1%;
margin-left: 1%;
padding-left: 1%;
padding: 1%;
width: 98%;
background-image: none;
}
#about_me_box p {
width: 98%;
margin-left: 1%;
margin-right: 1%;
padding-left: 0px;
}
.button {
width: 100%;
height: 54px;
font-size: 150%;
padding-top: 10px;
}
#bear_logo {
width: 100%;
}
#contact_info_box {
width: 98%;
margin-right: 1%;
margin-left: 1%;
padding: 1%;
}
#gallery_container {
width: 98%;
margin-right: 1%;
margin-left: 1%;
padding: 1%;
}
.gallery_cell {
width: 48%;
height: 48%;
margin-left: 1%;
margin-right: 1%;
margin-top: 8px;
}
}
#media only screen and (max-width: 400px) {
.gallery_cell {
width: 98%;
height: 98%;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
}
}
It now validates at the the W3C validator
Here is my CSS. I've calculated width for all elements, but I just can't seem to find the culprit.
I did mess around with the code, and when header-nav is set to 850px or less, the scrollbar disappears. Please help?
html, body {
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
font-family: "Trebuchet MS";
font-size: 10pt;
color: #222222;
}
#container {
position: relative;
margin: 0px auto;
width: 1200px;
padding: 0px;
background: url(images/container-bg.png) repeat-y;
}
#header-nav {
width: 1200px;
height: 150px;
background: url(images/header-bg.png) no-repeat;
}
#menu{
position: relative;
top: 95px;
left: 390px;
list-style:none;
z-index:5;
padding: 0px;
margin: 0px;
}
#nav {
position: absolute;
left: 101px;
width: 230px;
padding: 10px;
}
#main {
position: relative;
left: 351px;
width: 720px;
min-height: 600px;
padding: 15px;
}
#footer {
position: relative;
left: 101px;
bottom: 0px;
width: 980px;
height: 99px;
padding: 10px;
background: url(images/footer-border.png) no-repeat;
background-color: #FFFFFF;
}
i'm attempting to recreate a webpage as part of my HTML/CSS training. The webpage in question is this:
, the UEI website (it's old and doesn't look like that anymore).
Below is my code, CSS is rolled into the HTML since it's a single project. Here are a few things i'm having trouble with, any help is greatly appreciated!
1.) How do I get my main div, the center of the body containing all the paragraphs and whatnot, to "spill" over into the footer just like in the original? I've tried the z-indexes but that doesn't seem to do anything.
2.) How come the second box, and the "Start" div will not show up at all? Am I doing something wrong with positioning?
3.) For the right arrow in the orange bar, how do I resize it so it's not cutting off the bottom quarter of the arrows?
4.) How do I get the nav bar UL to have the orange background not just around the words, but as it shows in the original?
5.) How do I resize the bottom UEI logo so it appears smaller like in the original?
Thank you so much for any help! Below is the code I have so far. I'm pretty new to this, but please don't hesitate to critisize anything you see:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#wrapper {
width: 960px;
margin: 0 auto;
background: #D6D6D7;
}
#topbanner {
background: url(http://i.imgur.com/TWVzlpx.gif) repeat-x;
height: 131px;
margin-top: -20px;
}
.menu {
float: left;
display: inline-block;
margin-top: 14px;
margin-left: 50px;
color: white;
}
ul {
background: url(http://i.imgur.com/bjHBavK.png) repeat-x;
height: 40px;
margin-left: 266px;
margin-right: 100px;
margin-top: 34px;
width: 560px;
position: relative;
}
li:hover {
background: url(http://i.imgur.com/AByXJxy.png) repeat-x;
}
#main {
background: white;
width: 788px;
height: 650px;
z-index: 10;
margin-left: 78px;
position: relative;
padding-top: 20px;
}
#blackbar {
background: url(http://i.imgur.com/TPKqsEL.png) no-repeat;
background-size: contain;
width: 100%;
height: 75px;
position: relative;
padding: 150px 25px 0 25px;
left: -25px;
}
#whitepeople{
background: url(http://i.imgur.com/pjdSiLg.png) no-repeat;
background-size: contain;
width: 50%;
height: 250px;
margin-top: -190px;
}
#orangebar {
background: url(http://i.imgur.com/tnMNDvd.png) no-repeat;
background-size: contain;
width: 100%;
height: 75px;
margin-top: -22px;
position: relative;
padding: 150px 25px 0 25px;
left: -25px;
}
#arrow {
background: url(https://i.imgur.com/EMHd88R.png) no-repeat;
position: relative;
height: 35px;
width: 100%;
margin-left: 375px;
margin-top: -48px;
}
#box1 {
background: #CCC;
height: 450px;
width: 275px;
position: relative;
float: right;
margin-top: -488px;
margin-right: 70px;
z-index: 5;
}
#start {
background: url(https://i.imgur.com/rp7lJrE.png) contain;
height: 75px;
width: 275px;
position: relative;
float: right;
margin: 0 auto;
}
#box2 {
background: #0C3
height: 450px;
width: 275px;
position: relative;
float: right;
margin-top: -475px;
margin-right: 50px;
z-index: 1;
}
#bottom {
background: url(http://i.imgur.com/IK2iIjz.gif) repeat-x;
height: 200px;
z-index: 1;
position: relative;
}
#ueilogo {
background: url(http://i.imgur.com/2C6fyCc.png) no-repeat;
float: left;
height: 131px;
width: 131px;
padding-left: 45px;
padding-right: 55px;
margin-left: 35px;
margin-right: 35px;
}
#botlogo {
background: url(http://i.imgur.com/UyFOCTw.png) no-repeat;
background-size: contain;
height: 150px;
width: 960px;
z-index: 5;
margin: 0 auto;
position: relative;
}
h2 {
color: white;
size: 16px;
font-family: Times New Roman;
margin-left: 25%;
padding-top: 35px;
position: relative;
}
.banner1{
color: white;
font-size: 14px;
margin-top: -145px;
margin-left: 65px;
}
.banner2 {
color: white;
margin-top: -150px;
margin-left: 70px;
padding-top: 9px;
font-size: 18px;
}
</style>
<title>UEI Mockup</title>
</head>
<body>
<div id="wrapper">
<div id="topbanner">
<div id="ueilogo">
</div>
<h2>Student Success is Our Success</h2>
<ul>
<li class="menu">ABOUT UEI COLLEGE</li>
<li class="menu">OVERVIEW</li>
<li class="menu">FINANCIAL AID</li>
</ul>
</div>
<div id="main">
<div id="blackbar"><p class="banner1">START TRAINING FOR A NEW CAREER TODAY</p> </div>
<div id="whitepeople"></div>
<div id="orangebar"><P class="banner2">GET STARTED WITH UEI COLLEGE</P><div id="arrow"></div></div>
<div id="box1"><div id="start"></div></div><div id="box2"></div>
</div>
<div id="bottom"><div id="botlogo"></div></div>
</div>
</body>
</html>
equal to the image.
<div id="wrapper">
<div id="topbanner">
<div id="ueilogo"></div>
<h2>Student Success is Our Success</h2>
<ul>
<li class="menu">ABOUT UEI COLLEGE</li>
<li class="menu"> OVERVIEW </li>
<li class="menu">FINANCIAL AID</li>
</ul>
</div>
<div id="main">
<div id="blackbar"><p class="banner1">START TRAINING FOR A NEW CAREER TODAY</p> </div>
<div id="whitepeople"></div>
<div id="orangebar"><P class="banner2">GET STARTED WITH UEI COLLEGE</P><div id="arrow"></div></div>
<div id="box1"><div id="start"></div></div><div id="box2"></div>
</div>
<div id="bottom"><div id="botlogo"></div></div>
</div>
css
*{
margin: 0;
padding: 0;
}
#wrapper {
display: table;
width: 960px;
margin: 0 auto;
background: #D6D6D7;
}
#topbanner {
background: url(http://i.imgur.com/TWVzlpx.gif) repeat-x;
width: 100%;
height: 131px;
}
#ueilogo {
background: url(http://i.imgur.com/2C6fyCc.png) no-repeat;
float: left;
height: 131px;
width: 131px;
padding-left: 45px;
padding-right: 55px;
margin-left: 35px;
margin-right: 35px;
}
ul {
background: url(http://i.imgur.com/bjHBavK.png) repeat-x;
height: 40px;
list-style: none;
margin-left: 266px;
margin-top: 34px;
width: 600px;
}
.menu {
padding: 1px 20px;
margin-top: 13px;
float: left;
color: white;
}
li:hover {
padding: 1px 20px;
background: url(http://i.imgur.com/AByXJxy.png) repeat-x;
background-size: 100% 100%;
}
#main {
background: white;
width: 788px;
height: 650px;
z-index: 10;
margin-left: 78px;
position: absolute;
padding-top: 20px;
border-bottom-right-radius:6px;
border-bottom-left-radius:6px;
}
#blackbar {
background: url(http://i.imgur.com/TPKqsEL.png) no-repeat;
background-size: contain;
width: 100%;
height: 75px;
position: relative;
padding: 150px 21px 0 25px;
left: -23px;
}
#whitepeople{
background: url(http://i.imgur.com/pjdSiLg.png) no-repeat;
background-size: contain;
width: 50%;
height: 250px;
margin-top: -190px;
}
#orangebar {
background: url(http://i.imgur.com/tnMNDvd.png) no-repeat;
background-size: contain;
width: 100%;
height: 75px;
margin-top: -22px;
position: relative;
padding: 150px 25px 0 25px;
left: -25px;
}
#arrow {
background: url(https://i.imgur.com/EMHd88R.png) no-repeat;
position: relative;
height: 35px;
width: 100%;
margin-left: 375px;
margin-top: -30px;
}
#box1 {
background: #CCC;
height: 450px;
width: 275px;
position: relative;
float: right;
margin-top: -490px;
margin-right: 70px;
border-radius: 5px;
z-index: 5;
}
#start {
background: url(https://i.imgur.com/rp7lJrE.png) no-repeat;
background-size: 100% 100%;
position: absolute;
height: 32px;
width: 292px;
}
#box2 {
background: #8dc73f;
height: 441px;
width: 275px;
position: relative;
float: right;
margin-top: -470px;
margin-right: 61px;
border-radius: 5px;
z-index: 1;
}
#bottom {
background: url(http://i.imgur.com/IK2iIjz.gif) repeat-x;
margin-top: 620px;
height: 200px;
position: relative;
}
#botlogo {
background: url(http://i.imgur.com/UyFOCTw.png) no-repeat;
background-size: contain;
position: absolute;
height: 150px;
width: 788px;
z-index: 5;
margin-left: 78px;
bottom: 0;
}
h2 {
color: white;
size: 16px;
font-family: Times New Roman;
margin-left: 25%;
padding-top: 35px;
position: relative;
}
.banner1{
color: white;
font-size: 14px;
margin-top: -145px;
margin-left: 65px;
}
.banner2 {
color: white;
margin-top: -150px;
margin-left: 70px;
padding-top: 9px;
font-size: 18px;
}
Keep in mind I'm a complete css noob. If I understood some of the questions correctly...
Replace
background: url(https://i.imgur.com/rp7lJrE.png) contain;
with
background: url('https://i.imgur.com/rp7lJrE.png') no-repeat;
Also, you forgot to close the statement
background: #0C3;
when styling box2
And to fit the arrow make the font smaller, change the margin, or use the font they are. Theirs seems big enough but shrunk horizontally.
Here is the updated code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#wrapper {
width: 960px;
margin: 0 auto;
background: #D6D6D7;
}
#topbanner {
background: url(http://i.imgur.com/TWVzlpx.gif) repeat-x;
height: 131px;
margin-top: -20px;
}
.menu {
float: left;
display: inline-block;
margin-top: 14px;
margin-left: 50px;
color: white;
}
ul {
background: url(http://i.imgur.com/bjHBavK.png) repeat-x;
height: 40px;
margin-left: 266px;
margin-right: 100px;
margin-top: 34px;
width: 560px;
position: relative;
}
li:hover {
background: url(http://i.imgur.com/AByXJxy.png) repeat-x;
}
#main {
background: white;
width: 788px;
height: 650px;
z-index: 10;
margin-left: 78px;
position: relative;
padding-top: 20px;
}
#blackbar {
background: url(http://i.imgur.com/TPKqsEL.png) no-repeat;
background-size: contain;
width: 100%;
height: 75px;
position: relative;
padding: 150px 25px 0 25px;
left: -25px;
}
#whitepeople{
background: url(http://i.imgur.com/pjdSiLg.png) no-repeat;
background-size: contain;
width: 50%;
height: 250px;
margin-top: -190px;
}
#orangebar {
background: url(http://i.imgur.com/tnMNDvd.png) no-repeat;
background-size: contain;
width: 100%;
height: 75px;
margin-top: -22px;
position: relative;
padding: 150px 25px 0 25px;
left: -25px;
}
#arrow {
background: url(https://i.imgur.com/EMHd88R.png) no-repeat;
position: relative;
height: 35px;
width: 100%;
margin-left: 340px;
margin-top: -46px;
}
#box1 {
background: #CCC;
height: 450px;
width: 275px;
position: relative;
float: right;
margin-top: -488px;
margin-right: 70px;
z-index: 5;
}
#start {
background: url('https://i.imgur.com/rp7lJrE.png') no-repeat;
height: 75px;
width: 275px;
position: relative;
float: right;
margin: 0 auto;
}
#box2 {
background: #0C3;
height: 450px;
width: 275px;
position: relative;
float: right;
margin-top: -475px;
margin-right: 50px;
z-index: 1;
}
#bottom {
background: url(http://i.imgur.com/IK2iIjz.gif) repeat-x;
height: 200px;
z-index: 1;
position: relative;
}
#ueilogo {
background: url(http://i.imgur.com/2C6fyCc.png) no-repeat;
float: left;
height: 131px;
width: 131px;
padding-left: 45px;
padding-right: 55px;
margin-left: 35px;
margin-right: 35px;
}
#botlogo {
background: url(http://i.imgur.com/UyFOCTw.png) no-repeat;
background-size: contain;
height: 150px;
width: 960px;
z-index: 5;
margin: 0 auto;
position: relative;
}
h2 {
color: white;
size: 16px;
font-family: Times New Roman;
margin-left: 25%;
padding-top: 35px;
position: relative;
}
.banner1{
color: white;
font-size: 14px;
margin-top: -145px;
margin-left: 65px;
}
.banner2 {
color: white;
margin-top: -150px;
margin-left: 65px;
padding-top: 9px;
font-size: 17px;
}
</style>
<title>UEI Mockup</title>
</head>
<body>
<div id="wrapper">
<div id="topbanner">
<div id="ueilogo">
</div>
<h2>Student Success is Our Success</h2>
<ul>
<li class="menu">ABOUT UEI COLLEGE</li>
<li class="menu">OVERVIEW</li>
<li class="menu">FINANCIAL AID</li>
</ul>
</div>
<div id="main">
<div id="blackbar"><p class="banner1">START TRAINING FOR A NEW CAREER TODAY</p> </div>
<div id="whitepeople"></div>
<div id="orangebar"><P class="banner2">GET STARTED WITH UEI COLLEGE</P><div id="arrow"></div></div>
<div id="box1"><div id="start"></div></div>
<div id="box2"></div>
</div>
<div id="bottom"><div id="botlogo"></div></div>
</div>
</body>
</html>
Also, nice job naming a div white people. lol.
I added CSS Sprites for Social Media icons on my website but it is not working properly on Firefox where as the view is accurate on Safari and Chrome.
CSS:
#social-icons {
margin: 4px auto 0;
padding: 0 0 15px;
border-bottom: 1px dotted #222;
text-align: right;
font-size: .9em;
float: right;
width: 80%;
}
#social-icons .facebook {
width: 30px;
height: 30px;
background: url(../img/social_media_icons.png);
float: right;
background-position-x: 289px;
background-position-y: 0px;
}
#social-icons .twitter {
width: 30px;
height: 30px;
background: url(../img/social_media_icons.png);
float: right;
background-position-x: 193px;
background-position-y: -32px;
margin-left: 10px;
}
#social-icons .youtube {
width: 30px;
height: 30px;
background: url(../img/social_media_icons.png);
float: right;
background-position-x: 386px;
background-position-y: -161px;
margin-left: 10px;
}
HTML
<div id="social-icons">
<div class="youtube"></div>
<div class="twitter"></div>
<div class="facebook"></div>
</div>
On Firefox it is only showing Facebook`s icon repeatedly. What could be the problem?
Firefox does not support the background-position-y and background-position-x CSS properties. It was pulled from the spec at some point, as it was a carryover from an IE implementation.
Use the standard background-position: x y; property instead and this will work:
#social-icons .facebook {
width: 30px;
height: 30px;
background: url(../img/social_media_icons.png);
float: right;
background-position: 289px 0px;
}
#social-icons .twitter {
width: 30px;
height: 30px;
background: url(../img/social_media_icons.png);
float: right;
background-position: 193px -32px;
margin-left: 10px;
}
#social-icons .youtube {
width: 30px;
height: 30px;
background: url(../img/social_media_icons.png);
float: right;
background-position: 386px -161px;
margin-left: 10px;
}
#social-icons .facebook {
width: 30px;
height: 30px;
background: url(../img/social_media_icons.png);
float: right;
background-position: 289px 0px;
}
#social-icons .twitter {
width: 30px;
height: 30px;
background: url(../img/social_media_icons.png);
float: right;
background-position: 193px -32px;
margin-left: 10px;
}
#social-icons .youtube {
width: 30px;
height: 30px;
background: url(../img/social_media_icons.png);
float: right;
background-position: 386px -161px;
margin-left: 10px;
}
I am working on a website located here:
http://www.freshhealthybistro.com/temp/
I used a 960 grid, and the css for the 960 was taken from the website:
(google 960 gs because I can only post one hyperlink)
I realize that maybe I should have just avoided using the 960, but anyway... I did use it and unfortunately my website isn't uniform across browsers. The gray table underneath the slideshow (the one on the right hand side) should be extending to be the length of the slideshow so that it isn't shorter and both tables line up to be the same length. Instead, it is shorter on every browser and if I attempt to change the properties from % to px then it is still not uniform. In the firefox browser, even the table that is encasing the slideshow is drastically different than every other browser and looks like the website is broken. Here is my CSS:
#charset "UTF-8";
/* CSS Document */
body {
margin:0;
padding:0;
background-image:url(../images/fgc_bg.png);
color: #FFFFFF;
font-family: arial,sans-serif;
}
h1 {
font-size: 24px;
color: #FFFFFF;
font-family: arial,sans-serif;
line-height: 50px;
}
#container {
position:absolute;
height: 100%;
left: 50%;
width: 1200px;
margin: 0;
margin-left: -600px;
}
#navigation {
position: float;
float: left;
background-image:url(../images/topbar.png);
width: 960px;
height: 50px;
margin-top: -825px;
margin-left: 120px;
}
#footer {
position: float;
float: left;
background-image:url(../images/topbar.png);
text-align: center;
width: 960px;
height: 50px;
margin-top: -25px;
margin-left: 120px;
}
#clearfooter {
position: float;
float: left;
width: 1200px;
height: 50px;
}
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
display:inline;
z-index: 1;
float: left;
position: float;
margin-left: 1%;
margin-right: 1%;
}
.grid_1 {
width:6.333%;
}
.grid_2 {
width:14.667%;
}
.grid_3 {
margin-left: 120px;
margin-top: 30px;
width:23.0%;
}
.grid_4 {
width:31.333%;
}
.grid_5 {
width:39.667%;
}
.grid_6 {
width:48.0%;
}
.grid_7 {
margin-top: 30px;
width:50.666%;
}
.grid_8 {
width:64.667%;
}
.grid_9 {
width:73.0%;
}
.grid_10 {
margin-top: 50px;
margin-left: 120px;
width: 940px;
}
.grid_11 {
width:89.667%;
}
.grid_12 {
width:98.0%;
}
#logo {
position: float;
float: left;
background-image:url(../images/logo.png);
z-index: 100;
width: 266px;
height: 266px;
margin-top: -933px;
margin-left: 472px;
}
#content{
position: relative;
float: left;
background-image:url(../images/contentbg.png);
width: 1200px;
height: 800px;
margin: 150px 0 0 0;
z-index: -20;
}
#background {
position: relative;
float: left;
overflow: auto;
background-color:#bf6b31;
width: 100%;
height: 800px;
padding: 0;
margin: 150px 0 0 0;
z-index: -100;
}
#clearfix {
clear: both;
}
I am also having a weird problem with the slideshow. In IE6, the slideshows navigation (the 4 buttons in the bottom right hand corner) is functioning as it should. In every other browser these buttons are not functioning, and unclickable by the visitor. I don't know what the reason for this is, but I am assuming it may have something to do with the z-index. Here is the CSS file for the slideshow:
.featuredbox-wrapper{
display: none;
}
.featuredbox-wrapper,
.featuredbox{
top: 0px;
left: 0px;
width: 940px;
height: 400px;
margin-left:auto;
margin-right:auto;
position: relative;
overflow: hidden;
font-family: Verdana, Tahoma, "Lucida Sans";
font-size: 9pt;
font-weight: normal;
z-index: 10;
}
.featuredbox .description{
bottom: 55px;
left: 5px;
font-size: 16pt;
color: #FFF;
width: 500px;
height: 20px;
position: absolute;
font-style:none;
font-weight:normal;
}
.featuredbox-wrapper .navigation{
bottom:15px;
right:15px;
padding:0px;
position:absolute;
z-index: 100;
height: 20px;
width: 100px;
}
.featuredbox-wrapper .navigation ul{
list-style: none;
list-style-type: none;
margin: 0px;
padding: 0px;
}
.featuredbox-wrapper .navigation li{
float: left;
height: 20px;
width: 20px;
margin: 0px 5px 0px 0px;
padding: 0px;
background-color: #FF0000;
cursor: pointer; cursor: hand;
background:transparent url(../images/inactive.png) no-repeat scroll 0 0;
}
.featuredbox-wrapper .navigation li.hover{
cursor: pointer; cursor: hand;
}
.featuredbox-wrapper .navigation li.active{
cursor: pointer; cursor: hand;
background:transparent url(../images/active.png) no-repeat scroll 0 0;
}
.featuredbox .box-slide1,
.featuredbox .box-slide2 {
position: absolute;
top: 0px;
left: 0px;
height: 300px;
width: 600px;
z-index: -1;
background: #FFF;
color: #000;
}
Thank you for the assistance. I am still learning CSS and appreciate the help with understanding where I went wrong. Uniformity between browsers is currently my major complaint area.
The main issue is that you chose to use a grid system, but then did not make your slider conform to the size it needed to be to fit the grid. The point of using a grid system is to have the uniform sizing/spacing it provides. So one answer to your dilemma is to downsize your slider images so they fit the grid.