Avatar for Username

חיפוש בתמיכה

יש להימנע מהונאות תמיכה. לעולם לא נבקש ממך להתקשר או לשלוח הודעת טקסט למספר טלפון או לשתף מידע אישי. נא לדווח על כל פעילות חשודה באמצעות באפשרות ״דיווח על שימוש לרעה״.

מידע נוסף

אשכול זה הועבר לארכיון. נא לשאול שאלה חדשה אם יש לך צורך בעזרה.

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 תגובה
  • 7 have this problem
  • 23 views
  • תגובה אחרונה מאת the-edmeister

shumphreys
shumphreys
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

כל התגובות (1)

the-edmeister
the-edmeister
  • Moderator
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.