Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Jei jums reikia pagalbos, užduokite naują klausimą.

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 reply
  • 7 have this problem
  • 23 views
  • Paskiausią atsakymą parašė 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

All Replies (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.