[pcpro17]

Hello. Can someone please assist me with adjusting my style sheet so that what it generates in IE will be the same (or at least similar) to what is generated in FireFox? I'm using the latest versions of both.

Go to the following site on FireFox to see how badly FireFox messes it up:

http://test.correctnesscommentary.com/

Now go to the same site with IE to see the beautiful new layout. I'd like it to look that that in FireFox as well.

Here is my CSS:

body           {
  background-color:      <?php print($bodybg); ?>;
  text-align:            center;
  margin:                0px;
  padding:               0px;
  width:                 100%;
  min-width:             900px;
  }

div.container  {
  background-color:      <?php print($containerbgcolor); ?>;
  text-align:            center;
  margin:                0px;
  padding:               0px;
  border-left:           1px solid <php? print($containerborder); ?>;
  border-right:          1px solid <php? print($containerborder); ?>;
  width:                 900px;
  }
div.header     {
  background-image:      url(images/banner.jpg);
  background-position:   center top;
  background-repeat:     no-repeat;
  margin:                10px 0px 15px 0px;
  padding:               0px;
  width:                 100%;
  height:                150px;
  }
div.leftbar    {
  float:                 left;
  text-align:            center;
  margin:                0px 0px 0px 50px;
  padding:               0px;
  width:                 200px;
  background-color:      <?php print($sidebarbg); ?>;
  }
div.infobox    {
  text-align:            left;
  font:                  normal 10pt arial, serif;
  color:                 <?php print($textcolor); ?>;
  margin:                0px 0px 1px 0px;
  padding:               5px;
  width:                 100%;
  border:                1px solid <?php print($infoboxborder); ?>;
  background-color:      <?php print($infoboxbg); ?>;
  }
div.content    {
  float:                 right;
  text-align:            left;
  font:                  normal 10pt arial, serif;
  color:                 <?php print($textcolor); ?>;
  margin:                0px 50px 10px 0px;
  padding:               5px;
  width:                 590px;
  border:                0px;
  border-top:            1px solid <?php print($contentborder); ?>;
  border-top-width:      60%;
  border-left:           3px solid <?php print($contentborder); ?>;
  background-color:      <?php print($contentbg); ?>;
  }
div.footer     {
  text-align:            center;
  font:                  normal 8pt arial, serif;
  color:                 <?php print($h6color); ?>;
  margin:                0px;
  padding:               10px 0px 0px 0px;
  width:                 800px;
  }

Any suggestions are appreciated. Thanks!

[dudeking]

div.container {
background-color: <?php print($containerbgcolor); ?>;
text-align: center;
margin: 0px auto;
padding: 0px;
border-left: 1px solid <php? print($containerborder); ?>;
border-right: 1px solid <php? print($containerborder); ?>;
width: 900px;
}

margin auto should fix it, only difference i can see is that it isnt centered.

[pcpro17]

Hi Eddie. Thanks for the suggestion! That's definately an improvement! There are two other issues that need to be addressed as well. The banner also needs to be center-aligned. It centers just fine in IE, but FireFox doesn't seem to like the way I'm defining it (in the 'header' div). Also, for some reason FireFox is squeezing the footer under the left column, even though I have its width specified at 800px. Any ideas?

body           {
  background-color:      <?php print($bodybg); ?>;
  text-align:            center;
  margin:                0px;
  padding:               0px;
  width:                 100%;
  min-width:             900px;
  }

div.container  {
  background-color:      <?php print($containerbgcolor); ?>;
  text-align:            center;
  margin:                0px auto;
  padding:               0px;
  border-left:           1px solid <php? print($containerborder); ?>;
  border-right:          1px solid <php? print($containerborder); ?>;
  width:                 900px;
  }
div.header     {
  background-image:      url(images/banner.jpg);
  background-position:   center top;
  background-repeat:     no-repeat;
  margin:                10px 0px 15px 0px;
  padding:               0px;
  width:                 800px;
  height:                150px;
  }
div.leftbar    {
  float:                 left;
  text-align:            center;
  margin:                0px 0px 0px 50px;
  padding:               0px;
  width:                 20%;
  background-color:      <?php print($sidebarbg); ?>;
  }
div.infobox    {
  text-align:            left;
  font:                  normal 10pt arial, serif;
  color:                 <?php print($textcolor); ?>;
  margin:                0px 0px 1px 0px;
  padding:               5px;
  width:                 100%;
  border:                1px solid <?php print($infoboxborder); ?>;
  background-color:      <?php print($infoboxbg); ?>;
  }
div.content    {
  float:                 right;
  text-align:            left;
  font:                  normal 10pt arial, serif;
  color:                 <?php print($textcolor); ?>;
  margin:                0px 50px 10px 0px;
  padding:               5px;
  width:                 65%;
  border:                0px;
  border-top:            1px solid <?php print($contentborder); ?>;
  border-top-width:      60%;
  border-left:           3px solid <?php print($contentborder); ?>;
  background-color:      <?php print($contentbg); ?>;
  }
div.googlesearch {
  float:                 right;
  text-align:            left;
  font:                  normal 10pt arial, serif;
  color:                 <?php print($textcolor); ?>;
  margin:                0px 50px 10px 0px;
  padding:               5px;
  width:                 65%;
  border:                0px;
  background-color:      <?php print($containerbgcolor); ?>;
  }
div.footer     {
  text-align:            center;
  font:                  normal 8pt arial, serif;
  color:                 <?php print($h6color); ?>;
  margin:                0px;
  padding:               10px 0px 0px 0px;
  width:                 800px;
  min-width:             800px;
  }

Thanks!

[deepdiver01]

Me again.

Paul O'B has put out a great 3 column layout that performs extremely well and addresses the issues associated with 3 col layouts in CSS.

You can find the code and an explanation here http://www.pmob.co.uk/temp/3colfixedtest_explained.htm

I have used this layout many times without any problems, apart from the ones I caused.

The explanation gives a great insight into how the elements work and hopefully will help.

Deep.

[pcpro17]

Thanks, Deep, for the suggestion! I think most of the layout issues have been resolved. Right now, there are two issues remaining:

1. FireFox is forcing the height of a 'content' division to be at least a certain height, which I want most of the time, but not always. The issue I would really like to fix here that would eliminate the need for a 'min-height' specification is in IE when I set an 'img' to 'float:left;' the bottom of the division (where the actual text [that does wrap properly to the right of the image] ends) crops whatever is left of the bottom of the image.

2. For some reason FireFox does not place the 'googlesearch' division at the end of the 'contentbar' division. It just throws it on top of everything at the top of the 'contentbar'. Any suggestions on how to fix this would be appreciated. My CSS defining the layout follows:

body           {
  background-color:      <?php print($bodybg); ?>;
  text-align:            center;
  margin:                0px;
  padding:               0px;
  width:                 100%;
  min-width:             900px;
  }

div.container  {
  background-color:      <?php print($containerbgcolor); ?>;
  text-align:            center;
  margin:                0px auto;
  padding:               0px 50px;
  border-left:           1px solid <php? print($containerborder); ?>;
  border-right:          1px solid <php? print($containerborder); ?>;
  width:                 900px;
  }
div.header     {
  background-image:      url(images/banner.jpg);
  background-position:   center top;
  background-repeat:     no-repeat;
  margin:                0px auto;
  margin:                10px 0px 0px 0px;
  padding:               0px 50px;
  width:                 100%
  height:                150px;
  height:                expression(document.body.header = "150px");
  }
div.midsection {
  float:                 left;
  text-align:            center;
  margin:                0px auto;
  padding:               0px;
  width:                 100%
  }
div.leftbar    {
  float:                 left;
  text-align:            center;
  margin:                0px auto;
  margin:                10px 0px;
  padding:               0px;
  width:                 200px;
  }
div.infobox    {
  text-align:            left;
  font:                  normal 10pt arial, serif;
  color:                 <?php print($textcolor); ?>;
  margin:                0px;
  padding:               5px;
  width:                 100%;
  border:                1px solid <?php print($infoboxborder); ?>;
  border-bottom-width:   3px;
  background-color:      <?php print($infoboxbg); ?>;
  }
div.googlead   {
  text-align:            center;
  margin:                0px auto;
  margin-top:            50px;
  padding:               0px;
  width:                 100%;
  border:                0px;
  }
div.contentbar {
  float:                 right;
  text-align:            left;
  margin:                0px;
  margin:                10px 0px;
  padding:               0px;
  }
div.content    {
  text-align:            left;
  font:                  normal 10pt arial, serif;
  color:                 <?php print($textcolor); ?>;
  margin:                0px;
  margin-bottom:         10px;
  padding:               5px;
  width:                 580px;
  min-width:             580px;
  width:                 expression(document.body.content = "580px" );
  min-height:            275px;
  height:                expression(document.body.content < 275 ? "275px" : "1%");
  border:                0px;
  border-top:            1px solid <?php print($contentborder); ?>;
  border-left:           3px solid <?php print($contentborder); ?>;
  background-color:      <?php print($contentbg); ?>;
  }
div.googlesearch {
  text-align:            center;
  font:                  normal 10pt arial, serif;
  color:                 <?php print($textcolor); ?>;
  margin:                0px auto;
  padding:               5px;
  width:                 100%;
  border:                0px;
  background-color:      <?php print($containerbgcolor); ?>;
  }
div.footer     {
  text-align:            center;
  font:                  normal 8pt arial, serif;
  color:                 <?php print($h6color); ?>;
  margin:                0px auto;
  padding:               0px 50px;
  min-width:             800px;
  width:                 expression(document.body.footer < 800 ? "800px" : "100%");
  }

Thanks!

[pcpro17]

bump

[pcpro17]

This issue is basically resolved. Apparently these W3C-compliant browsers like to have the height of block elements specified.