Блог

Главная - Вопросы по программированию - Изменение CSS в Firefox 4.0? проблема с плавающей точкой?

Изменение CSS в Firefox 4.0? проблема с плавающей точкой?

#css #firefox #css-float #firefox4

#css #firefox #css-float #firefox4

Вопрос:

Сайт «allendesigners.com » выглядит нормально в Firefox 3.6, но теперь имеет некоторые странные проблемы с плавающей точкой. Обратите внимание, что категории располагаются по центру, когда float: left; находится на «боковой панели-a».

Не удается решить эту проблему!

Заранее спасибо за вашу помощь!

Ответ №1:

это работает! Я изменил float: right; на position: absolute; в #sidebar-a, добавил position: relative; в #content и добавил #new {float: right!важно} и удалил правило top #container.

 body {
    background-color: #FFFFFF;
    background-image: none;
    font-family: Arial;
    font-size: 120%;
}
* {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}
#printcart {
    display: none;
}
.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}
div#fixedBox {
    position: fixed;
    z-index: 300;
}
body {
    background-attachment: fixed;
    background-color: #6499BD;
    background-image: url("images/bg.jpg");
    background-repeat: repeat-x;
    font-family: Arial;
    font-size: 120%;
}
#container {
    background-color: #DEDEDE;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    width: 750px;
}
#new {
    float: right!important;
}
#content {
    property: relative;
}
#storetypes {
    font-size: 55%;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
}
#sidebar-a {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #DEDEDE;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    margin-bottom: 5px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 7px;
    position: absolute;
    width: 224px;
}
.mainnavlnk {
    background-image: url("images/sidebar-ah2-off.jpg");
    color: #444444;
    display: block;
    font-size: 65%;
    height: 22px;
    line-height: 22px;
    padding-left: 9px;
    text-decoration: none;
}
.mainnavlnk:hover {
    background-image: url("images/sidebar-ah2-on.jpg");
}
.subnavlnk {
    text-decoration: none;
}
.onnav {
    background-image: url("images/sidebar-ah2-on.jpg");
}
#footer {
    clear: both;
    margin-top: 7px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
}
h1 {
    background-image: url("images/header.jpg");
    background-repeat: repeat-x;
    display: block;
    height: 57px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    text-indent: -9999px;
    width: 750px;
}
#sidebar-a h2 {
    background-image: url("images/h2-bg.jpg");
    background-repeat: repeat-x;
    color: #444444;
    font-size: 80%;
    height: 30px;
    line-height: 30px;
    padding-left: 7px;
    width: 217px;
}
#nav {
    background-image: url("images/navh2-bg.jpg");
    background-repeat: repeat-x;
    float: right;
    font-size: 70%;
    height: 30px;
    line-height: 30px;
    margin-top: 7px;
    padding-left: 5px;
    width: 518px;
}
#searchbox {
    float: right;
    font-size: 70%;
    height: 30px;
    line-height: 30px;
    text-align: right;
    width: 518px;
}
#adpanel {
    background-color: #FFFFFF;
    display: block;
    float: right;
    height: 70px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3px;
    width: 745px;
}
.adaddress {
    display: block;
    float: left;
    font-size: 65%;
    margin-left: 4px;
    padding-bottom: 5px;
    padding-left: 7px;
    padding-right: 5px;
    padding-top: 5px;
    width: 250px;
}
.cartblock {
    float: right;
    font-size: 80%;
    padding-right: 15px;
    text-align: right;
}
h3 {
    padding-top: 15px;
}
.imgs {
    float: right;
    margin-top: 3px;
}
.subnav {
    color: #666666;
    font-size: 70%;
    margin-left: 20px;
}
.subnav ul li {
    line-height: 15px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}
.subnav ul {
    list-style-type: square;
    margin-bottom: 10px;
    margin-left: 5px;
    margin-top: 3px;
}
#spinner {
    background-color: #FFFFFF;
    float: right;
    margin-top: 3px;
    text-align: center;
    width: 523px;
}
#text0 {
    background-color: #FFFFFF;
    float: right;
    font-size: 80%;
    margin-top: 3px;
    padding-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    width: 503px;
}
#text1 {
    background-color: #FFFFFF;
    float: right;
    font-size: 80%;
    margin-top: 3px;
    padding-bottom: 15px;
    padding-left: 10px;
    padding-top: 10px;
    width: 513px;
}
#imagebar1 {
    float: right;
}
#text2 {
    background-color: #FFFFFF;
    float: right;
    font-size: 80%;
    padding-bottom: 25px;
    padding-left: 10px;
    padding-top: 10px;
    width: 513px;
}
#text3 {
    background-color: #FFFFFF;
    float: right;
    font-size: 70%;
    margin-top: 3px;
    padding-bottom: 15px;
    padding-left: 10px;
    padding-top: 10px;
    width: 513px;
}
#text3 td {
    text-align: left;
}
#text3 p {
    margin-bottom: 15px;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 15px;
}
#footer {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/footer.jpg");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    font-size: 60%;
    height: 42px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 15px;
    text-align: center;
    width: 750px;
}
#cardship {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/cardship.jpg");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    height: 142px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    width: 210px;
}
#thawte {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/thawte.gif");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    height: 148px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    width: 148px;
}
#cartbox {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #EEEEEE;
    border-bottom-color: #CCCCCC;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: #CCCCCC;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: solid;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 1px;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: #CCCCCC;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: solid;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 1px;
    border-top-color: #CCCCCC;
    border-top-style: solid;
    border-top-width: 1px;
    float: right;
    margin-top: 10px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    text-align: left;
    width: 250px;
}
#info {
    font-weight: bold;
    text-align: left;
    width: 145px;
}
#status {
    color: #00CC00;
    font-size: 70%;
    font-weight: bold;
    height: 10px;
    text-align: center;
}
#checkout {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #CCCCCC;
    border-bottom-color: #AAAAAA;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: #AAAAAA;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: solid;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 1px;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: #AAAAAA;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: solid;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 1px;
    border-top-color: #AAAAAA;
    border-top-style: solid;
    border-top-width: 1px;
    color: #555555;
    display: block;
    font-size: 70%;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    width: 100px;
}
#checkout:hover {
    background-color: #DD7777;
    color: #000000;
}
#cart {
    float: left;
    margin-right: 5px;
}
#prod {
    background-color: #FFFFFF;
    padding-bottom: 15px;
}
#categorybox {
    border-bottom-color: #EEEEEE;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    float: left;
    font-size: 70%;
    height: 230px;
    margin-bottom: 30px;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 0;
    padding-bottom: 30px;
    width: 47%;
}
#categoryicon {
    text-align: center;
}
#catalog td {
    border-bottom-color: #CCCCCC;
    border-bottom-style: dotted;
    border-bottom-width: 1px;
    padding-bottom: 3px;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 3px;
}
address, #catalog_request {
    border-top-color: #555555;
    border-top-style: solid;
    border-top-width: 1px;
    font-size: 11px;
    font-style: normal;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
}
address p, #catalog_request p {
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 10px;
}
#featured {
    border-bottom-color: #CCCCCC;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin-bottom: 15px;
    width: 490px;
}
.leightbox {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: white;
    border-bottom-color: #B8B8B8;
    border-bottom-style: solid;
    border-bottom-width: 10px;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: #B8B8B8;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: solid;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 10px;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: #B8B8B8;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: solid;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 10px;
    border-top-color: #B8B8B8;
    border-top-style: solid;
    border-top-width: 10px;
    color: #333333;
    display: none;
    left: 32%;
    overflow-x: auto;
    overflow-y: auto;
    position: absolute;
    text-align: left;
    top: 25%;
    width: 500px;
    z-index: 1001;
}
#overlay {
    background-color: #333333;
    display: none;
    height: 100%;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1000;
}
.randomproducts {
    display: none;
}
object {
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
}
embed {
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
}

.lightbox[id] {
    position: fixed;
}
#overlay[id] {
    position: fixed;
}

Firebug — это мило.

Энди

Комментарии:

1. Нижний раздел также должен быть справа. Не уверен, что абсолютная позиция — это именно то, что я хотел сделать. Я не понимаю, что изменилось.. Интересно, должен ли я переключиться на строгий тип документа

2. добавлены #new {float:правильно!важно} и #content {позиция: относительная;} и удален первый #container {display:none;}