Content Jumps When Loading Page - css

Question

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 */

Answer 1

I fixed it by messing around all evening with floats in CSSEdit. A great application!