Tìm kiếm hỗ trợ

Tránh các lừa đảo về hỗ trợ. Chúng tôi sẽ không bao giờ yêu cầu bạn gọi hoặc nhắn tin đến số điện thoại hoặc chia sẻ thông tin cá nhân. Vui lòng báo cáo hoạt động đáng ngờ bằng cách sử dụng tùy chọn "Báo cáo lạm dụng".

Learn More

My website displays OK in FF 3.6.13 but not in 3.6.10, I am using CSS boxes to contain text but with 3.6.10 these are not rendered properly ....

  • 1 trả lời
  • 7 gặp vấn đề này
  • 15 lượt xem
  • Trả lời mới nhất được viết bởi the-edmeister

more options

As in the question line I am having problems with rendering between versions of FF using CSS. Here is the layout for the first box: /* BOXES area for front page */ .holder { height: 260px; width:290px; /***********************/ margin-bottom:25px; float:left; /*-moz-box-shadow:2px 2px 5px #666;*/ }

.holder .eList { border-left:1px dotted #777; border-right:1px dotted #777; padding:10px 15px 0px 10px; margin:0; line-height : 14pt; height : 199px; font-size : 10pt; }

.eList li { list-style : none; }

/*.holder .eList { font-size : 8pt; padding-left : 30px; border-left : 1px dotted #777; border-right : 1px dotted #777; height : 199px; }

  • /

.holder li { padding-left : 25px; }

.top h3 { margin:0; line-height:30px; padding:0px 10px; font-size:20px; /*text-shadow:1px 1px 1px #fff;*/ font-family:Georgia; color : #c03; }

.top { width:288px; height:30px; border: 1px solid #777; border-top : 10px solid #777; border-bottom : 0px; background:#efefef; /* -moz-border-radius-topright:15px;*/ /*background:-moz-linear-gradient(top, #3CF, #39F, #36F); background:-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #36F)); */ }

.bottom { width:288px; height:10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 0px; border-left-width: 1px; border-top-style: none; border-right-style: dotted; border-bottom-style: groove; border-left-style: dotted; border-right-color: #777; border-bottom-color: #777; border-left-color: #777; /*-moz-border-radius-bottomleft:12px; -moz-border-radius-bottomright:12px; -webkit-border-bottom-left-radius:12px; -webkit-border-bottom-right-radius:12px;*/ }

This is repeated 4x to provide a 2x2 layout (floats change as required).

Then a lower box is used (which displays fine): .gfg-root {

 width : 100%;
 height : auto;
 float : left;
 /*position : relative;*/
 overflow : hidden;
 text-align : left;
 font-family: "Arial", sans-serif;
 font-size: 10pt;
 border: 1px dotted #777;
 border-bottom : 0px;

}

.gfg-title {

 font-size: 20px;
 font-weight : normal;
 font-family : Georgia;
 color : #c03;
 background-color: #efefef;
 line-height : 1.4em;
 overflow : hidden;
 border-top : 10px solid #777;
 white-space : nowrap;
 height : 30px;
 padding-left : 10px;

} etc ..

Any ideas? Site can be viewed at www.computingatschool.org.uk

As in the question line I am having problems with rendering between versions of FF using CSS. Here is the layout for the first box: /* BOXES area for front page */ .holder { height: 260px; width:290px; /***********************/ margin-bottom:25px; float:left; /*-moz-box-shadow:2px 2px 5px #666;*/ } .holder .eList { border-left:1px dotted #777; border-right:1px dotted #777; padding:10px 15px 0px 10px; margin:0; line-height : 14pt; height : 199px; font-size : 10pt; } .eList li { list-style : none; } /*.holder .eList { font-size : 8pt; padding-left : 30px; border-left : 1px dotted #777; border-right : 1px dotted #777; height : 199px; } */ .holder li { padding-left : 25px; } .top h3 { margin:0; line-height:30px; padding:0px 10px; font-size:20px; /*text-shadow:1px 1px 1px #fff;*/ font-family:Georgia; color : #c03; } .top { width:288px; height:30px; border: 1px solid #777; border-top : 10px solid #777; border-bottom : 0px; background:#efefef; /* -moz-border-radius-topright:15px;*/ /*background:-moz-linear-gradient(top, #3CF, #39F, #36F); background:-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #36F)); */ } .bottom { width:288px; height:10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 0px; border-left-width: 1px; border-top-style: none; border-right-style: dotted; border-bottom-style: groove; border-left-style: dotted; border-right-color: #777; border-bottom-color: #777; border-left-color: #777; /*-moz-border-radius-bottomleft:12px; -moz-border-radius-bottomright:12px; -webkit-border-bottom-left-radius:12px; -webkit-border-bottom-right-radius:12px;*/ } This is repeated 4x to provide a 2x2 layout (floats change as required). Then a lower box is used (which displays fine): .gfg-root { width : 100%; height : auto; float : left; /*position : relative;*/ overflow : hidden; text-align : left; font-family: "Arial", sans-serif; font-size: 10pt; border: 1px dotted #777; border-bottom : 0px; } .gfg-title { font-size: 20px; font-weight : normal; font-family : Georgia; color : #c03; background-color: #efefef; line-height : 1.4em; overflow : hidden; border-top : 10px solid #777; white-space : nowrap; height : 30px; padding-left : 10px; } etc .. Any ideas? Site can be viewed at www.computingatschool.org.uk

Tất cả các câu trả lời (1)

more options

Try posting at the Web Development / Standards Evangelism forum at MozillaZine. The helpers over there are more knowledgeable about web page development issues with Firefox.
http://forums.mozillazine.org/viewforum.php?f=25
You'll need to register and login to be able to post in that forum.