[solved] Firefox float problem with Hgsunset template

[OnTheEdge]

Hello,

First of all thanks to all for the great work on CMSMS. Trully is a fantastic product.

I'm putting together a simple site for my brother http://www.btwilliams.co.uk/

I've used the Hgsunset template (big up to HeartlessG). It's pritty much standard at the moment (Got to leave something for him to do). All seems well but unuasully I'm having problems with Firefox 2 (I'm used to IE problems ). Opera OK as is Ie 6 and 7

The problem is that side menu drops below my content on various pages. Home page is OK see. http://www.btwilliams.co.uk//index.php?page=Video-Showcase for the issue or http://www.btwilliams.co.uk//index.php?page=Contact

In fact the only module that stops the behaviour is the RSS2HTML see http://www.btwilliams.co.uk//index.php?page=Video-University.

I've tried wrapping the content in a container DIV. Inserting {literal} tags where JS is present and various tweaks to the css but still the same outcome.

It's driving me mad. Hope you can help

Cheers Mark

[Dr.CSS]

Kind of curious about having both divs floating left and all the display:table calls, I would set the right side to float right...

And you may want to go thru the config.php, as all your links have dbl. // at the end of your base href, it may help you from having to put ../ before uploads/etc. ...



/*
    Sunset by HeartlessG.com ported to CMS Made Simple by kermit on 28 Oct 2007.
    Original template was obtained from openwebdesign.org, which contained the standard 'public
    domain' notice; however, HeartlessG.com web site does request an attribution link back.
    i (kermit) don't require attribution; but if you're looking for a cmsms host, pm me on the cmsms forums.
    hgSunset developed on CMSMS 1.2, YMMV on other versions.
//
    Notes:
    -  Suitable as-is for single-level or two-level page structure only. If you have many top-level items,
      you may want to specify only certain pages for the top menu instead of allowing it to wrap.
    -  News summary and news detail styles were added
    -  Interactive testing done only on Firefox 2 and Internet Explorer 6 (WinXP)
    -  Screenshot-only testing done with Internet Explorer 7 (via totalvalidator.com)
    -  CSS was run through cleancss.com as original was a bit bloated with redundancy and 'longhand'
    -  Print stylesheet was not included with the original template, but we've hacked one up for you.
    -  Original distribution ZIP of the CMSMS theme contains the template as constructed for CMSMS,
      the two stylesheets, three menu templates, and the two graphics from the original template.
    -  The included XML file was an export out of CMSMS 1.2 and did not include the graphics; which
      you will have to upload yourself to [cmsinstall]/uploads/images/hgSunset directory.
    -  CSS validates as does the template to XHTML 1.0 transitional.
//
    screen.css for hgSunset
*/
#flash {
padding-left: 50px;
float: left;
}
body {
background: #3C3C3C url(../uploads/images/hgSunset/squarestrife.jpg) repeat;  ../ shouldn't need to be here
color: #FFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 0
}
a {
color: #CCC
}
a:hover {
color: #FFF;
text-decoration: underline
}
h1 {
font-size: 20px
}
h2 {
color: #CB8034;
font-size: 17px
}
h3, h4 {
font-size: 14px
}
h5, h6 {
font-size: 12px
}
div.holder {
float: left;
width: 500px
}
div.maincontainer {
display: table;
margin: 0 auto;
width: 900px
}
div.topcontainer {
display: table;
height: 75px;
margin: 0 auto;
width: 800px
}
div.tp_left {
display: table;
float: left;
height: 75px;
width: 500px
}
div.tp_left_logo {
display: table;
float: left;
font-size: 11px;
height: 50px;
margin-top: 25px;
width: 300px
}
div.tp_spc_right {
display: table;
float: left;
height: 50px;
width: 300px
}
div.tp_right_bottom {
display: table;
float: left;
height: 25px;
text-align: right;
width: 300px
}
div.tp_right_bottom a:active, div.tp_right_bottom a:visited, div.tp_right_bottom a:link {
color: #FFF;
font-weight: 700;
text-decoration: none
}
div.tp_right_bottom a:hover {
color: #CB8034
}
div.contentholder {
border-color: #1D1D1D;
border-style: solid;
border-width: 10px 10px 20px;
display: table;
margin: 0 auto;
width: 800px
}
div.mainlinkcontainer {
display: table;
margin: 0 auto;
width: 800px
}
ul.topmenu {
list-style-type: none;
margin: 0;
padding: 0
}
ul.topmenu li {
float: left
}
ul.topmenu li a {
border-top: 3px solid #000;
color: #CCC;
display: block;
height: auto;
line-height: 1.3em;
margin-left: .5em;
margin-right: .5em;
padding: .6em 1em 1.5em;
text-align: center;
text-decoration: none;
width: auto
}
ul.topmenu li a:hover {
background-color: #323232;
border-top: 3px solid #454545;
color: #B4792D;
text-decoration: none
}
div.headerimgcontainer {
background-color: #000;
background-image: url(../uploads/images/hgSunset/headerimg.jpg);
background-repeat: no-repeat;
border-color: #000 #FFF;
border-left-width: 0;
border-right-width: 0;
border-style: solid;
border-top-width: 5px;
display: table;
height: 100px;
margin: 0 auto;
width: 800px
}
div.subcontentcontainer {
background-color: #000;
border: 0 solid #999;
color: #999;
display: table;
font-size: 11px;
line-height: 130%;
padding: 0;
width: 800px
}
div.subcontentholder {
border-color: #999;
border-style: solid;
border-width: 0;
display: table;
margin: 5px
}
div.maincontentcontainer {
background-color: #1A1A1A;
color: #999;
display: table;
margin-left: auto;
margin-right: auto;
padding: 0;
width: 800px
}
div.mainc_left {
border-color: #CCC;
border-style: solid;
border-width: 0;
color: #CCC;
display: table;
float: left;
line-height: 130%;
padding: 0;
width: 600px
}
div.mainc_right {
background-color: #000;
color: #CCC;
display: table;
float: left;
height: auto;
padding: 0 0 0em;
width: 200px;
}
div.mainc_right_box {
background-color: #000;
color: #CCC;
display: table;
float: left;
margin: 5px;
padding: 0
}
div.mainc_left_f {
color: #CCC;
display: table;
padding: 0px
}
div.mainc_left_s {
color: #CCC;
display: table;
margin: 0;
width: 600px
}
div.mainfootercontainer {
background-color: #333;
border: 0 dashed #CCC;
color: #999;
display: table;
line-height: 130%;
width: 800px
}
div.mainfooter_holder {
color: #999;
display: table;
height: auto;
padding: 5px
}
div.thinfootercontainer {
background-color: #000;
color: #CCC;
display: table;
height: auto;
padding: 0;
width: 800px
}
div.thinfooter_holder {
color: #CCC;
display: table;
height: auto;
padding: 5px
}
ul.sidemenu {
display: table;
list-style-type: none;
margin: 0;
padding: 0
}
ul.sidemenu li {
border-color: #666;
border-style: dashed;
border-width: 0 0 1px;
display: table;
padding: 0;
width: 160px
}
ul.sidemenu li a {
color: #999;
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 700;
height: auto;
padding: 5px;
text-decoration: none;
width: 150px
}
ul.sidemenu li a:hover {
background-color: #171717;
color: #E6EEF7;
text-decoration: none
}
.mainc_right_box h2 {
color: #CB8034;
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: 700;
height: auto;
margin-bottom: 0;
padding: 5px;
width: 150px
}
ul.topmenu li a.currentpage, ul.sidemenu li a.currentpage {
color: #fff
}
ul.topmenu li a.activeparent, ul.sidemenu li a.activeparent {
color: #ddd
}
.NewsSummary {
border-bottom: 1px solid #232323;
margin-bottom: 1em
}
.NewsSummaryPostdate {
float: right;
font-size: 110%;
font-weight: 700;
margin: 0 2em 0 6em
}
.NewsSummaryLink {
font-size: 125%;
font-weight: 700;
margin-bottom: .8em
}
.NewsSummaryCategory {
clear: right;
float: right;
font-style: italic;
margin: 0 2em 0 6em
}
.NewsSummaryAuthor {
clear: right;
float: right;
font-style: italic;
margin: 0 2em 1.2em 6em
}
.NewsSummaryContent {
line-height: 1.25em;
margin-bottom: 1.5em
}
fieldset {
color: #999
}
label {
font-size: 115%
}
textarea, input {
background: #232323;
color: #ccc;
padding: .2em;
width: 300px
}
input.button {
background: #323232;
border: 1px solid #000;
color: #ccc;
padding: .5em
}
div#NewsPostDetailDate {
color: #909090;
float: right;
font-weight: 700;
margin: 0 3em 0 6em
}
h3#NewsPostDetailTitle {
font-size: 125%
}
hr#NewsPostDetailHorizRule {
background: #333;
border: 0;
height: 2px;
margin: 0 0 1.5em;
width: 99%
}
div#NewsPostDetailCategory {
float: right;
font-style: italic;
margin: 0 6em 0 3em;
text-align: right
}
div#NewsPostDetailAuthor {
clear: right;
float: right;
font-style: italic;
margin: 0 6em 0 3em;
text-align: right
}
div#NewsPostDetailContent {
margin-right: 200px
}
div#NewsPostDetailPrintLink {
float: right;
font-weight: 700;
margin: 2em 200px 2em 0
}
div#NewsPostDetailReturnLink {
float: left;
font-weight: 700;
margin: 2em 0 2em 200px
}
/* EOF */

[OnTheEdge]

Many thanks Mark for your help. I've followed your suggestions and everything has worked perfectly. I just needed to call the right DIV first in the template. I could swear I tried this before but I must have messed it up

Thanks again for taking the time to help

[Dr.CSS]

Your welcome, just doing what I can...