My site is buggy in FireFox, background colors wont show up

Hi, new member here, but Ive been lurking for awhile.

Ive just started my first HTML site and now Ive stumbled upon my first problem:

hxxp://www.bonusfacility.com

If you view that site in IE or Opera, it works fine, but in FireFox it starts bugging. What you will see is that the background to the main site will also be gray while it should be white.

At first I tried just setting the background color in the <div> to white, that works in Opera/IE, but not in FF. Then I made some images which I repeat and that worked for some of the <div>s (as you can see in FF) but not the main #container <div>.

Both of these options work fine in Opera and IE, but not in FF. Are there anyone here that could have a look at this and possibly help me out?

 

hi, if you take out float: left; and put in clear: both; within #footer, it will work

#footer    { 
           width: 760px;
           text-align: center;
           clear: both;
           background-image: url(http://www.bonusfacility.com/images/main-bg.gif);
           background-repeat: repeat-y;
           }

Code (markup):

 

Wow, thanks a bunch!

 

You haven't enclosed you floats. IE does this wrongly, and since you didn't use a proper DTD, Opera is playing IE wannabe, and is trying to follow the same buggy model. Without a DTD, cross-browser compatibility is almost impossible.

See Enclosing Float Elements for an explanation.

By the way, if IE and Firefox render differently, you can assume with a high degree of certainty that IE got it wrong.

cheers,

gary

 

Thanks for the explanation!

Yes, Ive heard so too that IE is wrong most often, thats why I wanted to check the problem, but it would be best if it worked in both as there still are alot of IE users :/

Now another bug showed up, this time in IE when I fixed it. This doesnt happen in Opera though. The page wont center and it seems that the endings of the posts show up 5 times in a row.

 

First, you need a DTD. Add it now.

Second, you're using a Microsoft or MS oriented editor which defaults to a proprietary character set encoding. Be sure you save as utf-8. Don't use the Unicode option, as it does nasty things to IE6. Be sure to add this to your head section

 <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />

Code (markup):

IE will ignore stated dimensions to enclose its content. In the case of those empty divs used to hold the border image, they expand to hold the implicit inline box. The inline box defaults to 1.2 times the font size. Set those divs to {font-size: 0;}.

It is always more difficult to debug pages that are poorly marked up; the markup should be well structured, semantic and valid. Yours is none of these.

Compare this to yours:

        <div class="textbox">
          <h2>Best Online Casino</h2>

          <p>The best online poker room has features like a monthly
          $5,000 backdoor free money roll for the new users,
          exclusive surprise reload bonuses for online poker room
          players, world's largest online poker room, with more
          than 35% of the market, has online poker room software
          that supports side bets, the game of black jack, and deal
          making, online poker room membership referral program, a
          chance to join the online poker room tournaments.
          </p>

          <p>Party Poker became the world's largest site for ring game
          traffic early 2003, after their launch campaign. By
          keeping their aggressive marketing going, the best online
          poker room increased room traffic every month.
          </p>
          
          <p>The best online poker room Party Poker cannot be without
          a good game variety. The games Party Poker hosted are
          Hold'em, Omaha and 7-Card-Stud in both High and Hi-Lo
          raked in the biggest volume of users. But despite huge
          number of players, the best online poker room lacks games
          like heads-up matches, crazy pineapple, draw poker, etc.
          although players seem quite happy just by playing these
          three major games.
          </p>
	
          <p>The best online poker room is able to maintain its
          standing with loose and juicy games online catering to
          beginners and those users craving for some action. Even
          at the "middle limit online poker games" this is true -
          you can find very soft poker games of up to $2/$4 in
          no-limit and $5/$10 in fixed limit.
          </p>
        </div>
================
body { 
  font-size: 80%;
  }

.textbox {
  margin: 10px 0;
  border: 1px solid gray;
  width: 432px; 
  float: right;
  padding: 0 3px; 
  }

.textbox h2 { 
  background: silver url(http://www.bonusfacility.com/images/titles.gif) no-repeat;
  font-size: 1.25em;
  line-height: 25px;
  margin: 0 -3px;
  padding: 0 3px;
  }

Code (markup):

cheers,

gary