Mozilla VPN is currently experiencing an outage. Our team is actively working to resolve the issue. Please check the status page for real-time updates. Thank you for your patience.

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

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. Please ask a new question if you need help.

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

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.