Related
Whenever I load my page, the content area for the product jumps to position (shifts downwards) and so do the social media icons in the footer. You'll see this happen if you refresh the page or simply click on either of the product categories on the left or the navigation links in the fixed footer.
This is happening predominately in Safari. I'm running 8.0.7 on Mac OS X 10.10.4 (Yosemite). Firefox 45.0.2 seems ok. Chrome 50.0.2661.86 acts a little weird with the icons flashing and copyright text, so I believe that has the same issue though the load time may be quicker.
I've looked at my CSS, but I can't fathom why it's doing it(?). I'm really stuck and realise it's perhaps something simple I'm overlooking. Driving me loopy! :-(
A friend told me it has something to do with the floats for the catalogue_wrapper_right, it shouldn't be there. That's for the content. And, I'm not sure again for the footer. Help much appreciated to get this fixed.
The product content text is being populated using PHP from my database.
The key elements here to look at are catalogue_wrapper and catalogue_wrapper_right for the content, and then container and social for the footer div blocks.
Thanks.
CSS:
/* ===============================
Author: Ashley Smith
Date: July 11, 2015
Notes:
Colour Palette:
---------------
Light Cream: #f2f3ee
Orange: #d17f38
Yellow: #e8c04f
Brown: #4b2707
=============================== */
/* General */
body {
background: url('../images/wood 4.jpg') top left no-repeat; top no-repeat; background-attachment: fixed;
background-size: 100% 100%;
color: black;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
font-size: 14px;
font-family: 'Open Sans', "Helvetica Neue", Arial, sans-serif;
}
.container {
width: 1280px;
margin: 0 auto;
padding: 30px 24px;
background: white;
-webkit-box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
clear: both;
}
/* Typography */
p {
margin: 0;
padding: 0;
}
a {
text-transform: uppercase;
text-decoration: none;
list-style: none;
padding: 0px 10px;
font-weight: bold;
color: black;
margin: 0;
}
/* Header */
header.main{
background: white;
padding: 10px;
margin-top: -30px;
margin-bottom: -30px;
height: 141px;
}
header nav {
text-align: center;
}
header nav ul {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
line-height: 141px;
}
header nav ul li {
display: inline-block;
padding: 0 20px;
}
header nav ul li a {
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
header nav ul li#logo a {
display: block;
width: 200px;
height: 150px;
padding: 0;
background: url('../images/LogoM.svg') center center no-repeat;
background-size: 300px;
}
header nav ul li#logo a p {
opacity: 0;
}
/* Small Basket */
#small_basket {
width: 200px;
margin-bottom: 20px;
}
#basket_left dt {
clear: left;
width: 170px;
}
#basket_left {
margin-top: 30px;
margin-bottom: 0;
}
#basket_left dd {
text-align: right;
width: 150px;
margin-bottom: 15px;
}
#basket_left, #basket_left dd, #basket_left dt {
float: left;
}
#basket_left dd.bl_ti, #basket_left dd.bl_st, #basket_left dd.bl_vat, #basket_left dd.bl_total {
display: block;
width: 0px;
padding: 0;
clear: all;
margin-left: 0px;
}
.your_bas {
width: 200px;
border-bottom: dashed 1px #aaa;
padding-bottom: 9px;
}
.check_button {
border-bottom: dashed 1px #aaa;
}
.check_button, .check_button a {
clear: left;
padding: 0px 0px 14px 0px;
font-style: normal;
font-size: 14px;
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
font-weight: normal;
text-transform: none;
}
.red {
color: red;
}
span.cart_pic {
background: url('../images/cart.png') center center no-repeat;
display: inline-block;
position: relative;
top: 10px;
left: 15px;
width: 30px;
height: 30px;
}
/* Store Content Styling */
#wrapper {
width: 1280px;
text-align:left;
margin:0 auto;
padding: 14px 0;
}
#outer {
width: 1280px;
margin: 0 auto;
padding: 30px 24px;
background: white;
-webkit-box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#cat_left {
width: 150px;
}
#cat_left p {
font-size: 20px;
margin: -5px;
font-weight: 300;
text-indent: 5px;
}
#cat_right {
margin-left: 147px;
width: 900px
}
#cat_navigation {
margin-top: 20px;
margin-bottom: 14px;
width: 200px;
line-height: 35px;
list-style: none;
border-top: dashed 1px #aaa;
padding: 0;
float: left;
}
#cat_navigation li {
float: left;
background-color: rgba(209,209,209,0.4);
text-align: center;
width: 100%;
padding: 2px;
margin-bottom: 10px;
}
#cat_navigation li a {
width: 150px;
opacity: 0.2;
font-size: 14px;
font-weight: 300;
padding: 0;
}
#cat_navigation li a.act {
opacity: 1;
font-weight: 700;
}
#cat_prod {
border-bottom: dashed 1px #aaa;
margin-bottom: 0;
padding-bottom: 14px;
}
#cat_prod h1 {
font-size: 20px;
margin: -5px;
margin-bottom: 1px;
font-weight: 300;
}
/* Catalogue Styling For Products Alignment... Continued */
.catalogue_wrapper {
width:100%;
border-bottom: dashed 1px #aaa;
height: 100%;
display: block;
clear: both;
position: static;
}
.catalogue_wrapper_left {
display: inline-block;
width: 120px;
margin-top: 20px;
}
.catalogue_wrapper_right {
display: block;
width: 750px;
position: relative;
left: 150px;
height: 180px;
margin-top: -120px;
margin-bottom: -40px;
}
.catalogue_wrapper_right h4 a {
padding: 0;
font-size: 20px;
}
.catalogue_wrapper_left a img {
width: 120px;
height: 150px;
}
.catalogue_wrapper_left a {
padding: 0;
}
/* Catalaogue Floats */
#cat_left, #cat_right, #catalogue_wrapper, #catalogue_wrapper_left, #catalogue_wrapper_right {
float: left;
}
/* Catalogue Products Pages */
.catalogue_wrapper_product_right {
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
display: block;
width: 750px;
position: relative;
left: 150px;
height: 180px;
margin-top: -70px;
margin-bottom: -40px;
}
.product_info {
font-size: 14px;
display: block;
width: 750px;
text-transform: none;
top: -63px;
}
/* Buttons */
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/* Basket and Checkout Buttons */
.sbm, .btn {
vertical-align: middle;
cursor: pointer;
display:block;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
}
.sbm_blue {
background: transparent;
background-color: #43a9d9;
border-radius: 4px;
border: none;
padding: 10px 15px;
}
.btn {
text-transform: uppercase;
background: transparent;
background-color: #43a9d9;
border: none;
border-radius: 4px;
color: white;
}
#btn_login {
text-transform: uppercase;
border-radius: 4px;
background: transparent;
background-color: #43a9d9;
border: none;
color: white;
padding: 0px 15px;
}
#btn {
text-transform: uppercase;
background-color: #43a9d9;
border-radius: 4px;
color: white;
padding: 0px 15px;
}
.fl_l {
float: left;
}
.fl_r {
float: right;
}
/* Basket Button */
.add_to_basket {
padding: 6px 12px;
text-transform: uppercase;
background-color: #43a9d9;
border-radius: 4px;
color: white;
}
/* Basket Page */
.ta_r, th.ta_r, .td.ta_r {
text-align: right;
padding: 10px;
}
.ta_left {
text-align: left;
padding: 10px;
}
.ta_right {
text-align: right;
padding: 10px 0px;
}
.col_15 {
width: 15%
}
.tbl_repeat {
width: 900px;
margin-top: 25px;
}
.ta_left_name {
text-align: left;
padding: 10px;
width: 650px;
}
.ta_left_qty input {
width: 40px;
}
.ta_r a {
padding: 0;
text-transform: none;
}
.fld_qty {
border: solid 1px #aaa
}
.fld_qty {
width: 30px;
text-align: right;
padding: 0
}
/* Checkout Page */
.tbl_insert {
margin-bottom:14px;
width: 900px;
line-height: 34.5px;
}
.tbl_insert td {
padding:3px;
}
.tbl_insert th {
padding: 3px 10px 3px 0;
width: 170px;
font-weight: normal;
vertical-align: top;
}
.fld {
width: 700px;
}
.warn {
display: block;
color: #900;
padding: 0;
vertical-align: text-bottom;
}
/* Orders Table */
.order_table {
width: 900px;
}
th.fix_width {
width: 900px;
}
hr#prod_break {
/* Gradient transparent - color - transparent */
border: 0;
height: 1px;
width: 600px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.tbl_repeat
{
position:relative;
-webkit-box-shadow:0 1px 10px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 10px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 10px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.tbl_repeat:before, .tbl_repeat:after
{
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:400px / 100px;
border-radius:400px / 100px;
}
/* Product Paging */
.paging {
list-style: none;
width: 900px;
float: left;
/* background: #efefef; */
padding: 10px 10px;
color: white;
}
.paging li {
float: left;
margin-right: 10px;
font-size: 14px;
}
.paging a {
text-transform: none;
text-decoration: underline;
color: black;
padding: 0;
font-weight: normal;
color: white;
}
/* Pagination Navigation Buttons
http://www.flaticon.com/packs/metrize - - no class colour: #D9D9D9
*/
a.first {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/first.svg') top center no-repeat;
background-size: 32px;
}
a.firstno {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/firstno.svg') top center no-repeat;
background-size: 32px;
}
a.previous {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/previous.svg') top center no-repeat;
background-size: 32px;
}
a.previousno {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/previousno.svg') top center no-repeat;
background-size: 32px;
}
a.next {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/next.svg') top center no-repeat;
background-size: 32px;
}
a.nextno {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/nextno.svg') top center no-repeat;
background-size: 32px;
}
a.last {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/last.svg') top center no-repeat;
background-size: 32px;
}
a.lastno {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/lastno.svg') top center no-repeat;
background-size: 32px;
}
a#top_of_page {
display: block;
position: relative;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
background-color: #43a9d9;
top: -31px;
left: 45px;
color: white;
border-radius: 4px;
padding: 7px;
}
/* Proceed to Paypal */
#frm_pp {
display: none
}
.dn {
display: none;
}
/* Google reCAPTCHA */
.g-recaptcha {
display: inline-block;
position: relative;
width: 304px;
height: 78px;
}
/* Footer */
footer.main, #footer {
bottom: 0px;
width: 100%;
height: 182px;
position: fixed;
text-align: center;
margin-bottom: -20px;
}
footer.main div.footbord {
border-top-left-radius: -10px;
border-top-right-radius: -10px;
background-color: blue;
}
#uncopyright, #credits {
width: 100%;
margin: 5px 5px;
text-align: center;
display: inline-block;
position: static;
clear: both;
}
#uncopyright {
display: inline-block;
position: static;
margin-top: -20px;
clear: both;
}
div.social img {
width: 40px;
position: relative;
margin: 5px;
display: inline-block;
}
.social {
position: static;
height: 56px;
display: inline-block;
}
.social, .social a {
text-transform: uppercase;
text-decoration: none;
list-style: none;
padding: 0px 10px;
font-weight: bold;
color: black;
margin: 0;
}
/* -- Center Placeholder For Form Text and Keep Entry Field Left -- */
::-webkit-input {
text-align: left;
}
::-webkit-input-placeholder {
text-align: center;
}
::-moz-placeholder {
text-align: center;
}
/* -- Blank Spacing At Bottom Of Main Container -- */
div.nav_top {
height: 30px;
width: 100px;
}
div.nav_top_after {
height: 30px;
width: 100px;
}
div.cont_bot {
height: 230px;
width: 100px;
}
div.cat_space {
height: 20px;
}
/* Force Elements To Self Clear Its Children: http://css-tricks.com/snippets/css/clear-fix/ */
.clearfix:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
* html .group { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */
I fixed it by messing around all evening with floats in CSSEdit. A great application!
My media query does not override the regular CSS unless I use !important all the time. What's the error? Here you can see the CSS with the !importants. If I remove them, the styling goes back to the regular CSS, even when the screen is less than 850px. Could you please help?
#media all and (min-width: 200px) and (max-width: 850px) {
html body {
position: absolute;
height: 100%;
width: 100% !important;
margin: 0 auto;
text-align:center;
}
#header {
background-color: white;
position: fixed;
top: 0px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
width: 95%;
height: 120px;
z-index:9999;
}
#header-inner{
width: 100% !important;
float: right;
}
div#title {
margin: 0px !important;
position: absolute;
width: 100% !important;
height: 70px;
background: url('mobillogo.png');
background-repeat: no-repeat;
background-size: auto 70px;
}
.wrapper {
width: 100% !important;
overflow:auto;
margin-left: auto;
margin-right: auto;
}
#first {
padding-top: 150px;
padding-bottom: 30px;
overflow:auto;
width: 95%;
background-color: #f7fdff;
height: ;
}
#second {
margin-top: 65px;
overflow: auto;
width: 95% !important;
margin-bottom: 65px;
background-color: white;
}
#third {
overflow:auto;
width: 95% !important;
background-color: #f3efef;
padding-bottom: 4em;
}
#footer
{
height: 115px;
width:100% !important;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
background-color: white;
padding-top: 1em;
padding-bottom: 0.5em;
}
#footbox {
height: 70px;
width: 100% !important;
margin-top: 0px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
#contains {
width: 100% !important;
margin-top: 50px;
}
h1 {
float: left;
width: 100% !important;
margin-top: 2em;
font-family: Jersey;
font-size: 3.5em;
text-align: center;
color: #f44336;
}
#logo {
margin-top:70px !important;
width: 100% !important;
height: 70px;
}
div#logo img {
position: static !important;
height: 13vw !important;
}
#footbox {
height: 70px;
width: 95%;
margin-top: 0px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
#checklist {
overflow: auto;
position: relative;
float: left;
width: 100% !important;
font-family: 'Open Sans', sans-serif;
padding-bottom: 8vh;
padding-top: 15px;
text-align:left;
}
#short {
width: 100% !important;
color: black;
font-weight: bold;
font-size: 1.3em;
margin: 0px !important;
}
#form {
overflow: auto;
border-radius: 5px;
padding: 0px !important;
position: relative;
width: 100% !important;
display: inline-block;
-webkit-transition:background 0.3s;
-moz-transition:background 0.3s;
-o-transition:background 0.3s;
transition:background 0.3s;
transition-timing-function: ease-in-out;
}
ul.inline {
width: 100% !important;
list-style-type: none;
columns: 1 !important;
-webkit-columns: 1 !important;
-moz-columns: 1 !important;
list-style-position: inside;
padding: 0px;
margin: 0px;
}
#fulltext {
width: 90%;
padding-right: 30px;
}
.text {
width: 75% !important;
}
}
html body {
position: absolute;
height: 100%;
width: 100%;
margin: 0 auto;
text-align:center;
}
#font-face {
font-family: Jersey; src: url('Jersey M54.ttf');
}
p {
font-family: 'Open Sans', sans-serif;
text-align:left;
}
.lightup {
background-color: #ffc107;
}
button {
float: right;
margin-right: 10px;
font-size: 1.2em;
background: #5fbd5f;
color: white;
padding: 5px;
font-family: 'Open Sans', sans-serif;
color: white;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
border: 0;
outline: none;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
button:hover {
cursor: pointer;
cursor: hand;
}
button:active{
border: 0;
outline: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);ű
}
a, u {
text-decoration: none;
}
#header-inner{
width: 1100px;
float: right;
}
#header {
background-color: white;
position: fixed;
top: 0px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
width: 100%;
height: 120px;
z-index:9999;
}
.wrapper {
overflow:auto;
width: 1100px;
margin-left: auto;
margin-right: auto;
}
#first {
padding-top: 150px;
padding-bottom: 30px;
overflow:auto;
width: 100%;
background-color: #f7fdff;
height: ;
}
#second {
margin-top: 65px;
overflow: auto;
width: 100%;
margin-bottom: 65px;
background-color: white;
}
#third
{
overflow:auto;
width: 100%;
background-color: #f3efef;
padding-bottom: 4em;
}
#footer
{
height: 115px;
width:100%;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
background-color: white;
padding-top: 1em;
padding-bottom: 0.5em;
}
#footbox {
height: 70px;
width: 1100px;
margin-top: 0px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
#contains {
width: 100%;
margin-top: 50px;
}
#toTop {
clear:both;
width: 600px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
font-family: 'Bree Serif', serif;
color: white;
border-radius: 5px;
background: #f44336;
padding-left: 15px;
padding-right: 15px;
font-size: 70px;
}
#logo {
float:left;
margin-top:1em;
}
h1 {
position: relative;
vertical-align: text-top;
margin-top: -12px;
font-family: Jersey;
font-size: 3.5em;
text-align: right;
color: #f44336;
}
h4 {
margin-top: 0px;
margin-bottom: 0;
font-family: Jersey;
font-size: 2em;
text-align: center;
color: white;
}
h5 {
position:relative;
float:left;
font-family: 'Open Sans', sans-serif;
color: #f44336;
font-size: 37px;
padding:5px;
width:250px;
margin-top: -15px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
text-align: right;
}
#purple {
text-align: center;
vertical-align: middle;
margin-top: 10px;
position:relative;
padding-right: 15px;
}
.caltxt {
padding-top: 0px;
padding-left: 15px;
font-size: 1em;
color: white;
}
#calendar {
margin-bottom: 5em;
margin-left: 80px;
float: left;
width: 600px;
height: 400px;
}
#sept {
float: left;
position: relative;
width: 25%;
height: 100%;
background-color: #4caf50;
}
#oct {
float: left;
position: relative;
width: 25%;
height: 75%;
background-color: #f44336;
}
#nov {
float: left;
position: relative;
width: 25%;
height: 75%;
background-color: #266fea;
}
#dec {
float: left;
position: relative;
width: 25%;
height: 75%;
background-color: #ffc107;
}
#plus {
float: left;
position: relative;
width: 75%;
height: 25%;
background-color: #9c27b0;
z-index: 0;
}
.calendar {
-webkit-transition: all 250ms;
-moz-transition: all 250ms;
transition: all 250ms;
}
.calendar:hover {
z-index: 9998;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
transform: translateY(-5px);
}
div#title {
margin-top: 50px;
position: absolute;
width: 1100px;
height: 70px;
background: url('weblogo.png');
background-repeat: no-repeat;
background-position: 0px;
background-size: auto 70px;
}
#checklist {
overflow: auto;
position: relative;
float: left;
width: 750px;
font-family: 'Open Sans', sans-serif;
padding-bottom: 8vh;
padding-top: 15px;
text-align:left;
}
#short {
width: 750px;
color: black;
font-weight: bold;
font-size: 1.3em;
}
#form {
overflow: auto;
border-radius: 5px;
padding: 15px;
position: relative;
width: 260px;
display: inline-block;
-webkit-transition:background 0.3s;
-moz-transition:background 0.3s;
-o-transition:background 0.3s;
transition:background 0.3s;
transition-timing-function: ease-in-out;
}
.text {
width: 90%;
text-align: left;
padding: 5px;
margin-top: 0px;
margin-bottom: 5px;
font-family: 'Open Sans', sans-serif;
border: 1px solid grey;
border-radius: 5px;
}
#fulltext {
width: 90%;
padding-right: 30px;
}
#name {
background: url(profile.png) no-repeat scroll 5px 5px;
background-color: white;
background-size: 20px;
margin-top: auto;
margin-bottom: auto;
padding-left:30px;
margin-bottom: 10px;
}
#email {
background: url(message.png) no-repeat scroll 5px 8px;
background-color: white;
background-size: 20px;
margin-top: auto;
margin-bottom: auto;
padding-left:30px;
margin-bottom: 10px;
}
#university {
background: url(university.png) no-repeat scroll 5px 4px;
background-color: white;
background-size: 20px;
margin-top: auto;
margin-bottom: auto;
padding-left:30px;
margin-bottom: 10px;
}
h3 {
font-family: 'Bree Serif', serif;
width: 130px;
color: white;
border-radius: 5px;
background: #f44336;
padding: 5px;
}
#textbox{
width: 90%;
height: 5em;
}
#textbox::-webkit-input-placeholder{
color:transparent;
}
#textbox::-webkit-input-placeholder::before {
color:#666;
content:"program?*";
}
h2 {
font-weight: bold;
font-size: 1em;
font-family: 'Open Sans', sans-serif;
}
ul.inline {
list-style-type: none;
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
list-style-position: inside;
padding: 0px;
margin: 0px;
}
ul.inline li {
padding: 5px;
background-image: url(check.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: 0px center;
padding-left: 25px;
}
#fun {
float: left;
padding-bottom: 50px;
}
#creativity {
padding-bottom: 80px;
}
#community {
float: left;
margin-left: 75px;
}
#innovation {
float: left;
margin: 30px;
}
#challenge {
float: left;
margin-left: 100px;
margin-top: -25px;
margin-bottom: 5em;
height: 220px;
}
#csanad {
height: 130px;
float: left;
margin-left: 5%;
margin-top: 4%;
padding-bottom: 80px;
}
#adam {
height: 130px;
float: left;
margin-left: 0%;
margin-top: 70px;
}
#adamtxt {
font-size: 0.9em;
width: 61%;
float:left;
margin-top: 72px;
margin-left: 25px;
}
#rapper {
width:400px;
float: left;
}
#csanadtxt {
font-size: 0.9em;
width: 32%;
float:left;
margin-top: 4%;
margin-left: 25px;
}
#noura {
height: 130px;
float: left;
margin-left: 15px;
margin-top: 75px;
}
#nouratxt {
font-size: 0.9em;
width: 23%;
float:left;
margin-top: 80px;
margin-left: 25px;
}
#container {
}
div#logo img {
position: absolute;
height: 25px;
}
#menu{
position: relative;
padding: 0px;
float: right;
}
ul#menu li {
list-style: none;
display: inline-block;
font-size: 0.95em;
height: 1vw;
}
ul#menu li a {
padding: 5px;
padding-left: 0.45vw;
padding-right: 0.45vw;
color: #ff4412;
font-family: 'Open Sans', sans-serif;
outline: none;
text-transform: uppercase;
border-radius: 5px;
}
div#container div#header div#header-inner ul#menu li a:focus {
text-decoration: none;
}
div#container div#header div#header-inner ul#menu li a:hover {
background: #ff4412;
color: white;
text-decoration: none;
}
div#container div#header div#header-inner ul#menu li.highlight a {
color: white;
border-radius: 5px;
background: #ff4412;
}
div#container div#header div#header-inner ul#menu li.highlight:hover {
opacity: 0.9;
}
Explanation
How the browser see your CSS without !important:
for screen 200px < x < 800px do this {
bla bla bla
}
but... wait a second.. forget about it, do this for all screens {
bla bla bla
}
When you add !important the browser will take it like this:
for screen 200px < x < 800px do this {
bla bla bla
!do not listen to me if I will ever give you any other instructions
}
but... hey dude, want any instructions? Can you do this for all screens? {
bla bla bla
}
If you place #media block in the end of your file and remove all the !importants it will look like this:
for all screens do this {
bla bla bla
}
but for screens 200px < x < 800px do this {
bla bla bla
}
Demo
Open this snippet in full page mode and try to change browser's window size
#media (max-width: 800px) {
.bad {
background-color: green;
}
}
.bad, .good {
width: 100px;
height: 100px;
background-color: firebrick;
}
#media (max-width: 800px) {
.good {
background-color: green;
}
}
<div class="good"></div>
<div class="bad"></div>
Flip the order to place the media query later. It doesn't seem to add any selector weight, so the later one takes priority.
So you would have (snipped):
html body {
position: absolute;
height: 100%;
width: 100% !important;
margin: 0 auto;
text-align:center;
}
#media all and (min-width: 200px) and (max-width: 850px) {
html body {
position: absolute;
height: 100%;
width: 100% !important;
margin: 0 auto;
text-align:center;
}
}
See, for example, CSS specificity on MDN, which does not list #media-queries as increasing weight.
In my case, my media queries were being added after the initial SCSS and they were still being overridden.
I found out it was because the nesting did not match between the initial styles and the media queries!
I had:
.icon-tray {
// stuff
.icon-tray-icon {
// stuff
div {
// stuff
}
}
}
Then, my media queries had:
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) {
.icon-tray {
// stuff
}
.icon-tray-icon {
// stuff
div {
// stuff
}
}
}
So I changed it to this, and it worked:
#media (min-width: 768px) {
.icon-tray {
// stuff
.icon-tray-icon {
// stuff
div {
// stuff
}
}
}
}
Hope it's clear and helps someone!
css style priority sequence
"!important"
Priority goes to most explicitly define rule.
ex:
1)
.class1 {
.class2 {
.class3 { color: green }
}
}
2)
.class1 {
.class3 { color: red }
}
Priority goes by order (bottom are prior to top)
You must check <head> tag. First, include the main style css file and then include the responsive css file.
something like this :
<link rel="stylesheet" type="text/css" href="mainstyle.css">
<link rel="stylesheet" type="text/css" href="reponsive.css">
Put your responsive css after style css if there is matched issue. Problem will solved.
I had the same issue. I resolved it by placing the media query styles at the end of other styles.
I'm a beginner and would like to get some help and see where I'm making a mistake. I've adjusted my css to try to make the footer drop to the bottom of the page no matter the screen size that's view the page. I tried adjusting the body height to be at 100%, but that did not work.
I'm trying to make it so the bottom footer is just below the fold, so it can only be seen once you scroll down, and not seen we you first get to the page.
If there is any advice on how I can solve my issue, it would be much appreciated thanks.
Here are some pictures to give you an example & the CSS
Mobile
Tablet Vertical
Tablet Horizontal
CSS:
body {
margin: 0;
padding: 0;
background: #FFFFFF;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 18px;
color: #000000;
width:100%;
height:100%;
}
h1, h2, h3 {
margin: 0;
padding: 0;
font-weight: normal;
color: #000000;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1em;
margin-top: 1.8em;
text-align:left;
}
h3 {
font-size: 1.6em;
}
p, ul, ol {
margin-top: 0;
line-height: 100%;
}
ul, ol {
}
a {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: underline;
color: #000000;
}
#wrapper {
overflow: hidden;
background-color: #FFFFFF;
}
#bottom-wrapper {
overflow: hidden;
position:relative;
bottom:0;
height: 100px;
padding: 5px 0px 0px 0px;
background: url(images/blue-background.jpg) repeat-x left top;
}
#bottom {
overflow: hidden;
width: 960px;
height: 200px;
margin: 0 auto;
padding: 0px 20px;
}
.abouttext {
width: 625px;
margin: 10px auto;
}
.three {
width: 1000px;
margin: 10px auto;
padding: 10px 140px;
}
.container {
width: 880px;
margin: 10px auto;
}
#container {
display: table;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
/* Header */
#header-wrapper {
overflow: hidden;
height: 110px;
background: url(images/blue-background.jpg) repeat-x left top;
}
#header {
overflow: hidden;
width: 100%;
height: 200px;
margin: 0 auto;
padding: 0px 20px;
font-weight: bold;
}
/* Banner */
#banner {
overflow: hidden;
height: 100px;
background: url(images/img04.jpg) no-repeat center bottom;
}
#banner .image-style {
border: 15px solid #F4F4F4;
}
/* Logo */
#logo {
float: left;
width: 400px;
margin: 0;
padding: 0;
color: #000000;
}
#logo h1, #logo p {
}
#logo h1 {
padding: 10px 0px 0px 0px;
font-size: 3.0em;
}
#logo p {
margin-top: -10px;
padding: 0px 0px 0px 5px;
font-size: 20px;
color: #FFFFFF;
}
#logo p a {
color: #FFFFFF;
}
#logo a {
border: none;
background: none;
text-decoration: none;
color: #FFFFFF;
}
/* Splash */
#splash {
overflow: hidden;
padding: 0px 0px 0px 0px;
border-bottom: 1px dashed #E7E2DC;
letter-spacing: 0px;
text-align: center;
vertical-align:middle;
font-size: 18px;
}
div.home-rt, div.cat{
/*width:310;height:355;*/
text-align:center;/*border:solid 2px #e0e0e0;*/
margin: 0 auto;
vertical-align:top;
display:inline-block;
cursor:pointer;
}
.iPad_1, .iPad_2, .iPad_3, .iPad_4, .iPad_Air, .iPad_Mini, .iPad_MiniRetina
{
margin:10px 10px 10px 10px;
}
.iPhone_2G, .iPhone_3G, .iPhone_3GS, .iPhone_4, .iPhone_4S, .iPhone_5, .iPhone_5C, .iPhone_5S
{
margin:10px 10px 10px 10px;
}
#splash div.home-rt {
/*margin-top:10px;
margin-bottom:10px;*/
width:310;
height:355;
background:#fff;
}
#splash .home-rt {
text-align:center !important;
}
#splash span {
color: #313131;
}
/* Search */
#search {
float: right;
width: 280px;
height: 60px;
padding: 20px 0px 0px 0px;
}
#search form {
height: 41px;
margin: 0;
padding: 10px 0 0 20px;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search-text {
width: 170px;
padding: 6px 5px 2px 5px;
border: 1px solid #DEDEDE;
background: #FFFFFF;
font: normal 11px Arial, Helvetica, sans-serif;
color: #5D781D;
}
#search-submit {
width: 50px;
height: 22px;
border: none;
background: #B9B9B9;
color: #000000;
}
/* Menu */
#menu {
float: right;
width: 500px;
height: 90px;
margin: 0 auto;
padding: 0;
}
#menu ul {
float: center;
margin: 0;
padding: 15px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
}
#menu a {
display: block;
margin-right: 1px;
padding: 10px 0px 15px 30px;
text-decoration: none;
text-align: center;
font-size: 20px;
font-weight: 300;
color: #FFFFFF;
border: none;
}
#menu a:hover, #menu .current_page_item a {
text-decoration: none;
color: #000000;
}
#menu .current_page_item a {
}
/* Page */
#page {
padding: 30px 0px 0px 0px;
}
/* Content */
#content {
float: left;
width: 620px;
padding: 0px 40px 0px 0px;
background: url(images/img05.jpg) no-repeat right 40px;
}
.post {
overflow: hidden;
}
.post .title {
padding: 0px 0px 10px 0px;
letter-spacing: -3px;
}
.post .title a {
border: none;
color: #7D7764;
}
.post .meta {
margin-bottom: 30px;
padding: 0px;
text-align: left;
font-size: 16px;
}
.post .meta .date {
float: left;
}
.post .meta .posted {
float: right;
}
.post .meta a {
}
.post .entry {
padding: 0px 0px 10px 0px;
padding-bottom: 20px;
text-align: justify;
}
.links {
padding-top: 20px;
margin-bottom: 30px;
}
.more {
display: block;
float: left;
width: 88px;
height: 25px;
padding: 2px 0px 0px 0px;
margin-right: 10px;
background: url(images/img08.jpg) no-repeat left top;
text-align: center;
color: #FFFFFF;
}
.comments {
display: block;
float: left;
width: 88px;
height: 25px;
padding: 2px 0px 0px 0px;
background: url(images/img08.jpg) no-repeat left top;
text-align: center;
color: #FFFFFF;
}
/* Sidebar */
#sidebar {
float: right;
width: 320px;
margin: 0px;
padding: 0px 0px 0px 0px;
color: #000000;
}
#sidebar h2 {
padding: 0px 0px 30px 0px;
letter-spacing: -3px;
}
#sidebar a {
border: none;
}
#sidebar a:hover {
text-decoration: underline;
}
/* Calendar */
#calendar {
}
#calendar_wrap {
padding: 20px;
}
#calendar table {
width: 100%;
}
#calendar tbody td {
text-align: center;
}
#calendar #next {
text-align: right;
}
/* Three Column Footer Content */
#footer-content {
background: url(images/img04.png) no-repeat center top;
color: #E2B8C6;
}
#footer-bg {
overflow: hidden;
padding: 170px 0px;
}
#footer-content h2 {
margin: 0px;
padding: 0px 0px 20px 0px;
letter-spacing: -2px;
text-shadow: 1px 2px 0px #861F40;
font-size: 16px;
color: #FFFFFF;
}
#column1 {
float: left;
width: 320px;
margin-right: 20px;
}
#column2 {
float: left;
width: 320px;
}
#column3 {
float: right;
width: 320px;
}
/* Footer */
#footer {
height: 100px;
margin: 0 auto;
padding: 10px 0px 0px 0px;
/*background: url(images/img04.png) no-repeat center top;*/
}
#footer p {
margin: 0;
padding-top: 150px;
line-height: normal;
text-align: center;
color: #000000;
}
#footer a {
color: #000000;
}
#marketing {
overflow: hidden;
margin-bottom: 30px;
padding: 20px 0px 10px 0px;
border-top: 1px solid #E3E3E3;
border-bottom: 1px solid #E3E3E3;
}
#marketing .text1 {
float: left;
margin: 0px;
padding: 0px;
letter-spacing: -2px;
font-size: 14px;
color: #000000;
}
#marketing .text2 {
float: right;
}
#marketing .text2 a {
display: block;
width: 252px;
height: 38px;
padding: 15px 0px 0px 0px;
background: url(images/img07.jpg) no-repeat left top;
letter-spacing: -2px;
text-align: center;
font-size: 12px;
color: #000000;
}
.box1 {
overflow: hidden;
height: 100px;
background: url(images/img04.jpg) no-repeat center bottom;
}
.list-style1 {
margin: 0px;
padding: 0px;
list-style: none;
}
.list-style1 li {
padding: 7px 0px 7px 0px;
border-top: 1px dashed #E7E2DC;
}
.list-style1 .first {
padding-top: 0px;
border-top: none;
}
.list-style2 {
margin: 0px;
padding: 0px;
list-style: none;
}
.list-style2 li {
padding: 7px 0px 7px 0px;
background: url(images/img06.png) repeat-x left top;
}
.list-style2 a {
color: #E2B8C6;
}
.list-style2 a:hover {
color: #C76485;
}
.list-style2 .first {
padding-top: 0px;
background: none;
}
You mentioned:
I'm trying to make it so the bottom footer is just below the fold, so it can only be seen once you scroll down, and not seen we you first get to the page.
I don't think css alone is capable of doing this, I got a quick jsfiddle for you that may help.
windowHeight = $(window).height();
footerHeight = $(".footer").height();
$(".wrap").css({
"height": windowHeight + footerHeight
});
Look at this picture of it...
http://www.flickr.com/photos/91733140#N06/8329388242/in/photostream
How can i make this div go to the left and not the right?
it keeps messing up and i really need it to be fixed any ideas how i can make it work?
<style type="text/css">
#body {
height: 100%;
margin: 0;
padding: 0;
}
#html, body {
height: 100%;
margin: 0;
padding: 0;
background: #E0E0E0;
}
#header {
background: #FFFFFF;
height: 33px;
width: 100%;
padding: 5px 30px 5px 30px;
font-family: arial;
font-size: 30px;
border-bottom: 1px #737373 solid;
position: fixed;
top: 0;
}
#container {
width: 1205px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
#box {
width: 228px;
height: auto;
background: #FFFFFF;
border: 1px #5E5E5E solid;
margin: 5px;
float: left;
font-family: arial;
}
#box_title {
width: 218px;
height: auto;
padding: 5px;
background: #5E5E5E;
color: white;
border-bottom: 1px #FFFFFF solid;
float: left;
font-family: arial;
}
#box_img {
width: 210px;
height: auto;
float: left;
margin-left: auto;
margin-right: auto;
}
#box_options {
width: 228px;
height: 40px;
background: #FFFFFF;
color: #000000;
border-top: 1px #5E5E5E solid;
float: left;
font-family: arial;
Not to judge you by your open tabs but you seem to want a "Pinterestish" wall. This is not easy via vanilla css, may I suggest looking into jquery masonry?
http://masonry.desandro.com/
It does all the heavy lifting for you
I've been around and around in circles with this one, almost finished my web page and all good in most browsers except the inevitable IE6! I've been doing some research and found out there is a problem with padding and margin in CSS, and have tried to no avail. Is there someone out there who might be able to help?
www.theclubnetwork.co.uk
body {
background: #ebf5fc url('../Images/body_bg.jpg') repeat-x 0 0;
margin: 0px 0px 0px 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: blue;
margin:0;
padding:0;
}
#env {
position: relative;
margin: 0 auto;
width: 934px;
background: url('../Images/env_bg.jpg') repeat-y 0 0;
margin-top: 10px;
padding: 125px 0 0 0;
}
#main {
width: 934px;
background: transparent url('../Images/main_bg.jpg') no-repeat 0 0;
z-index: 10;
}
#promo {
position: absolute;
top: 0;
left: 0;
width: 934px;
background: url('../Images/promo_bg2.jpg') no-repeat 0 0;
}
#bor {
position: relative;
margin: 0 auto;
top: 5px;
width: 633px;
background: url('../Images/bor_bg.gif') repeat-y 0 0;
padding: 0 0 0 0;
}
#foot {
height: 49px;
width: 912px;
background: url('../Images/foot_bg.png') no-repeat 0 100%;
padding: 0 11px 8px 11px;
color: #506273;
font-size: 11px;
clear: both;
text-align: center;
}
h4 {
font-family: Arial, Helvetica, sans-serif;
}
#foot a {
font-weight: normal;
color: #506273;
padding-left: 0;
background-image: none;
}
#foot div {
padding: 8px 0 0 10px; /*top right bottom left*/
line-height: 16px;
}
#logo {
position: relative;
float: left;
width: 279px;
padding-right:20px;
top:20px;
left: 10px;
text-align: center;
z-index: 6;
background-color: #ffa500;
}
#slow {
position: relative;
text-align: center;
z-index: 6;
}
.nav {
position: relative;
float: left;
width: 125px;
height: 125px;
background-color: #fff;
text-align: center;
z-index: 25;
}
* html #welcome {
margin-left: 0px;
}
#welcome {
position: relative;
margin-left: 2px;
float: left;
width: 297px;
height: 150px;
background-color: #fff;
z-index: 6;
text-align: center;
vertical-align: middle;
}
a.slogan {
width: 150px;
color: blue;
font-size: 17px;
clear: both;
text-align: center;
text-transform: uppercase;
}
a.mainslogan {
width: 150px;
color: #ffa500;
font-size: 48px;
clear: both;
text-align: center;
text-transform: uppercase;
}
a.sloganmiddle {
width: 150px;
color: #ffa500;
font-size: 21px;
clear: both;
text-align: center;
text-transform: uppercase;
}
a.bottomslogan {
width: 150px;
color: #fff;
font-size: 21px;
clear: both;
text-align: center;
text-transform: uppercase;
}
a.welcome_text {
position : relative;
top: 10px;
color: blue;
font-size: 30px;
vertical-align: top;
z-index: 6;
display: block;
}
.our_web {
position : relative;
color: #ffa500;
top: 10px;
font-size: 20px;
padding-bottom:7px;
display:block;
}
a.form {
font-size: 13px;
padding-top:10px;
padding-bottom: 10px;
color: blue;
}
a.first_web {
position : relative;
color: #0d7acf;
top: 0px;
padding-left: 0;
padding-right: 0;
padding-top: 0px;
text-align: middle;
display: inline;
}
p.statement {
position : relative;
top: 0px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 0px;
text-align: justify;
}
p.allocated {
text-align: right;
}
* html .clubreg {
padding-right: 0px;
padding-left: 0px;
}
.clubreg {
position: relative;
float: left;
width: auto;
height: auto;
background-color: #fff;
overflow: hidden;
z-index: 10;
padding-top: 12px;
padding-right: 13px;
padding-left: 12px;
text-align: left;
}
.memreg {
position: relative;
float: left;
height: auto;
background-color: #fff;
overflow: hidden;
text-align: center;
z-index: 10;
padding-bottom: 10px;
padding-top: 12px;
text-align: left;
}
.clubform {
position: relative;
float: left;
width: auto;
height: auto;
background-color: #fff;
z-index: 10;
padding-bottom: 10px;
padding-top: 12px;
padding-right: 12px;
padding-left: 12px;
text-align: left;
}
div.box335 {
width: 220px;
float: left;
background: transparent url('../Images/box220_bg_top.gif') no-repeat 0 0;
}
div.box335in {
background: transparent url('../Images/box220_bg_btm.gif') no-repeat bottom left;
padding: 0px 0px 5px 0px; /*top right bottom left*/
}
div.box220 {
width: 220px;
float: left;
padding-top: 5px;
background: transparent url('../Images/box220_bg_top.gif') no-repeat 0 0;
}
div.box220in {
background: transparent url('../Images/box220_bg_btm.gif') no-repeat bottom left;
padding: 0px 0px 30px 30px; /*top right bottom left*/
}
div.box267 {
width: 267px;
float: left;
padding-top: 5px;
background: transparent url('../Images/box267_bg_top.gif') no-repeat 0 0;
}
div.box267in {
background: transparent url('../Images/box267_bg_btm.gif') no-repeat bottom left;
padding: 0px 0px 10px 10px; /*top right bottom left*/
}
#news {
position: relative;
float: left;
margin-left: 2px;
width: 287px;
height: 165px;
background-color: #fff;
z-index: 6;
text-align: left;
color: #0d7acf;
padding-left: 12px;
padding-right: 0px;
padding-top: 13px;
}
div.box454 {
width: 454px;
height: auto;
float: left;
background: transparent url('../Images/box454_bg_top.gif') no-repeat 0 0;
}
div.box454in {
background: transparent url('../Images/box454_bg_btm.gif') no-repeat bottom left;
padding: 10px 10px 30px 10px; /*top right bottom left*/
}
div.box609 {
width: 609px;
min-height: 340px;
height: auto;
float: left;
background: transparent url('../Images/box609_bg_top.gif') no-repeat 0 0;
padding: 0px 0px 15px 0px; /*top right bottom left*/
}
div.box609in {
background: transparent url('../Images/box609_bg_btm.gif') no-repeat bottom left;
min-height: 478px;
padding: 0px 40px 10px 15px; /*top right bottom left*/
}
div.member_title {
color: blue;
width: 100%;
padding-top: 10px;
padding-right: 40px;
padding-bottom: 10px;
font-weight: bold;
text-align: center;
}
div.regreasons {
text-align: center;
font-weight: bold;
padding-left: 10px;
padding-right:10px;
}
div.box145 {
width: 145px;
float: left;
padding-top: 5px;
padding-right: 0px;
background: transparent url('../Images/box145_bg_top.gif') no-repeat 0 0;
}
div.box145in {
background: transparent url('../Images/box145_bg_btm.gif') no-repeat bottom left;
min-height: 100px;
padding: 0px 10px 0px 10px; /*top right bottom left*/
}
* html .advertising {
left: 0px;
}
div.advertising {
position: relative;
float: right;
width: 150px;
height: 168px;
left: -2px;
padding-right: 5px;
padding-left: 0px;
padding-bottom: 0px;
text-align: left;
padding-top: 12px;
background-color: #fff;
}
.memreg2 {
position: relative;
float: left;
width: auto;
height: auto;
background-color: #fff;
overflow: hidden;
text-align: center;
z-index: 10;
padding-bottom: 0px;
padding-top: 12px;
padding-left: 12px;
text-align: center;
}
li {
padding-bottom: 8px;
}
div.buttonreg {
text-align: center;
vertical-align:bottom;
}
#faq {
position : relative;
top: 0px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 20px;
text-align: justify;
text-align:center;
}
* html #sales {
margin-left: 0px;
}
#sales {
position: relative;
float: left;
margin-left: 2px;
width: 297px;
height: 367px;
background-color: #666666;
z-index: 6;
text-align: center;
color: #fff;
}
#joining {
position: relative;
float: left;
margin-left: 2px;
width: 297px;
height: 535px;
background-color: #666666;
z-index: 6;
text-align: center;
color: #fff;
overflow: auto;
}
#control_panel {
position: relative;
float: left;
margin-left: 2px;
width: 297px;
height: 480px;
background-color: #666666;
z-index: 6;
text-align: center;
color: #fff;
overflow: auto;
}
#minimnu {
position : relative;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
text-align: left;
}
#focusContainer {
width: 190px;
margin: auto;
background-color: #71707f;
padding: 17px 17px 10px 10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#focusContainer a {
display:block;
background-color: #383737;
color: #fff;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
border: 1px solid #000000;
width: 100%;
margin-bottom: 5px;
font-weight: 400;
}
#focusContainer a:hover {
background-color: #ffa500;
color: blue;
}
#m1 a, #m2 a, #m3 a,#m4 a {
padding-left: 10px;
color: #fff;
width: 100%;
background-color:#5d5d5d;
margin-top: -5px;
padding-top: 5px;
padding-left: 5px;
border: 1px solid #000000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.span {
padding-left: 10px;
color: #fff;
width: 150px;
background-color:#5d5d5d;
margin-top: -5px;
padding-top: 15px;
border: 1px solid #000000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
a#selected, a#selected:hover {
background: #ffa500;
color: blue;
}
a.newshead {
text-decoration: underline;
}
#leftside {
position: relative;
float: left;
}
.rbsworldpay {
position: relative;
display: block;
width = 100%;
text-align: center;
margin-left: 2px;
}
#clubinfo {
position: relative;
float: left;
width: 225px;
height: 120px;
background-color: blue;
overflow: hidden;
color: #000000;
text-align: center;
z-index: 11;
text-align: left;
padding-left: 10px;
padding-right: 0px;
padding-bottom: 10px;
}
#meminfo {
position: relative;
float: left;
width: 225px;
height: 120px;
background-color: yellow;
overflow: hidden;
color: #000000;
text-align: center;
z-index: 11;
text-align: left;
padding-left: 10px;
padding-right: 0px;
padding-bottom: 10px
}
.moreinfo {
float: right;
padding-right: 10px;
padding-top: 10px;
}
#bottomlink {
color: #0d7acf;
height: 48px;
padding: 0px;
}
a.club_details {
color: blue;
padding-top: 20px;
padding-left: 20px;
font-size: 12pt;
text-decoration: underline;
text-align: center;
}
In response to the only question in your post
"Is there someone out there who might be able to help?"
Yes.
Make sure your HTML has a DOCTYPE, to trigger IE6's standards mode. That's likely to eliminate a lot of CSS craziness (and possibly introduce some other craziness, but there will be less of it and it'll happen in all browsers).
To avoid having trouble with different browser behaviour, I'd suggest you use a CCS reset.
Eric Meyer explains well and offers a free example at meyerweb. That won't solve all your problems, but would certainly be a good start.
A couple of things that I saw right away.
You don't have a font size set for your h2 in the div #sales and IE is using a bigger font size. IE6 uses width and height as suggestions and will expand divs to fit the content.
Your .box335in has a width of 220px however your .member_title div has a width of 220px plus a right padding of 40px for a total width of 260px. Once again IE6 is expanding the .box335in to fit the wider width.
I wouldn't worry about making things compatible with IE6 anymore.