-1
読み込みするたびに、製品のコンテンツ領域が下に移動し、フッターのソーシャルメディアアイコンも移動します。ページを更新するか、左の製品カテゴリまたは固定フッターのナビゲーションリンクのいずれかをクリックするだけで、これが表示されます。コンテンツの読み込み時の読み込みページ
これは主にSafariで行われています。私はMac OS X 10.10.4（ヨセミテ）で8.0.7を走っています。 Firefox 45.0.2は問題ありません。 Chrome 50.0.2661.86はアイコンの点滅や著作権のテキストでちょっと変わったので、読み込み時間が早くても同じ問題があると思います。
私は自分のCSSを見てきましたが、なぜそれをやっているのかわかりません（？）。私は本当に立ち往生し、それはおそらく私は見落としている単純なものだと気づいている。私を馬鹿にする！ :-(
友人は、それは、それはそれは私がフッタのために再びわからないんだけど、内容のためだ。そして。あってはならない
catalogue_wrapper_right用フロートとは何かを持っている私に言った。ヘルプずっとこれが固定取得する感謝しています。
製品内容のテキストは私のデータベースからPHPを使用して移入されている。ここで
重要な要素が見することがcatalogue_wrapperやコンテンツのcatalogue_wrapper_right、その後、containerとsocialですフッターdivブロックの場合は
ありがとうございました。
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 */
私には起こりません。おそらくあなたのブラウザプラグインの1つがそれを引き起こしていますか？ – danyamachine
友人は 'catalogue_wrapper_right'のために浮動小数点と関係があると教えてくれました。それはコンテンツのためです。そして、私はフッターをもう一度確信していません。この問題を解決するために大変助けてください。 –
プラグインは違いはありません。私はプラグインの有無にかかわらず、他のマシンで再プロラミングできます。 –