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