Div background shows in different spot than rest of div content

[simcoweb]

Ok, in FF the background for this <div> doesn't display within the div like it's supposed to. Instead it displays about 200 px above the div and over the top of what's in that location. In IE it shows fine where the background is perfectly laid behind the content of the div.

 

Here's the URL. Be sure to look in both FF and IE cuz the problem only occurs in FF.

 

www.thebeancoffeecompany.com

 

Here's my CSS code:

 

#teambean {
width: 630px;
height: 150px;
background-image: url(images/teambean-bg.gif);
background-repeat: no-repeat;
padding: 5px 5px 5px 5px;
position: relative;
}

 

You can check the source code of the page instead of me posting all that so you can see how it's set up. Probably hacked it all to death but usually the problems occur in IE, not FF. Thanks in advance for the assist!

[haku]

Not having a doctype causes IE to go into quirks mode. IE is the only browser that has this mode. So you are designing in IE quirks mode, then trying to view the site in other browsers' regular mode, and it looks different.

 

First, use a doctype. Thats the most important step. Next, do your design in firefox, then after you get it looking nice, adjust it to work in IE. IE is a broken browser, so making it work there, then trying to get it to work in all other browsers after that is a futile effort. Much better to just do it in proper browsers first, then 'hack' it to work in IE.

 

(note: hacking doesn't actually mean hacking in this case)

[simcoweb]

First, thanks for the response! Sorry my reply is so late, have had a difficult 2 weeks as my computer crashed (HDD went kaput) and have been reinstalling all my software and gathering materials for work.

 

Ok, that page DOES have a doc statement already in it. In fact, i've tried different doctype statements and get the same result. The fact that it shows properly in IE is a good thing since the client uses IE for their viewing.

 

Usually FF is much easier to deal with. I'm thinking it's something in how i've set up the CSS that is wrong. Why would the background show up over the <div> above where it's designated?

[haku]

The fact that it shows properly in IE is a good thing since the client uses IE for their viewing.

 

It doesn't matter what the client uses, it matters what the users are using. And with up to 45% of users using Firefox these days, depending on country, you can't afford to ignore it. And if you aren't going to ignore it, then you need to do your designs in it, or another standards-compliant browser (which is pretty much any browser other than IE), and then adjust for the non-standards-compliant browsers (which is IE).

 

So on to your problem:

First, you can remove the xml declaration at the top. Unless you are serving your page as application/xhtml+xml, which IE doesn't recognize, you don't need it. And I've read that having it can cause IE to think you have no doctype, putting you in quirks mode.

 

Next, try fixing the 106 errors in your code. These errors cause unpredictable results. Browsers only have a standard way of dealing with correct code, they don't have a standard way of dealing with errors, so weird things happen when you have these errors.

 

If you have never done error fixing before, what you need to do is fix one, then check on the w3c site (that I linked to) again. You probably don't have 106 real errors, but what happens is that an error earlier on the page reverberates down the page, making the validater think you have more than that.

 

Fixing these errors will most likely solve your problem. At the very least it will make your code standards compliant which will be better for SEO, load times, and cross-browser compatibility. If it doesn't fix your problem, then come back. But with these backgrounds doing weird things, its almost always because of html errors.