加载页面时内容跳转

时间：2016-04-26 00:55:02

标签： css3

每当我加载my page时，产品的内容区域会跳转到位置（向下移动），页脚中的社交媒体图标也会跳转到位置。如果您刷新页面或只是单击左侧的任一产品类别或固定页脚中的导航链接，您都会看到这种情况。

这主要发生在Safari中。我在Mac OS X 10.10.4（Yosemite）上运行8.0.7。 Firefox 45.0.2似乎没问题。 Chrome 50.0.2661.86使用图标闪烁和版权文本有点奇怪，所以我认为虽然加载时间可能会更快，但仍存在同样的问题。

我看过我的CSS，但我无法理解它为什么这样做（？）。我真的被卡住了，并且意识到这可能是我忽略的简单事情。驱使我循环！ ： - （

  

一位朋友告诉我它与catalogue_wrapper_right的花车有关，它不应该在那里。这是内容。并且，我不再确定页脚。非常感谢能够解决这个问题。

正在使用我的数据库中的PHP填充产品内容文本。

此处要查看的关键元素是内容的catalogue_wrapper和catalogue_wrapper_right，然后是页脚div块的container和social。

感谢。

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 个答案:

答案 0 :(得分：0)

我用CSSEdit中的花车整晚搞乱了。一个很棒的应用程序！

相关问题
最新问题