Is this a firefox bug?

firefox css bug, container issue, background issue

[Brimford]

Hey guys, long time reader, first time poster. (Hah i feel like i am on a talk show)

<snip>

I am working on this site, and i am having an issue in the new version of firefox. The top logo banner has an issue...if you are resizing the window, the bg will show through a sliver on the left hand side of the banner, but if you keep resizing slightly it will pop into place.

I have been rattling my mind on this for a bit, and i may just be fighting a losing battle with a bug, so i wanted to check with you guys.

Heres the body, the container, and the logo. There may be some random codes where i've been trying everything to get rid of it! Any help would be appreciated. Thank you.

body {
background-color: #4c0d24;
background-image: url(images/bg-image.png);
background-position: center center;
background-attachment: scroll;
padding: 0px;
margin: 0;
background-repeat: repeat;
}

#container {
height: auto;
width: 848px;
margin-right: auto;
margin-left: auto;
padding: 0px;
min-height:100%;
max-height:100%;
position: relative;
}

#insidecontainerlogo {
height: 150px;
width: 849px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background-image: url(images/silverbypatlogobg.jpg);
display: block;
background-repeat: no-repeat;
background-position: top;
clear: none;
}

[edited by: DrDoc at 4:13 pm (utc) on Aug. 1, 2008]
[edit reason] No URIs, please. See posting guidelines. [/edit]

[DrDoc]

Welcome to WebmasterWorld!

A couple of immediate pointers:

body {  
  background-color: #4c0d24;                  <-- try using shorthand 
  background-image: url(images/bg-image.png); <-- try using shorthand 
  background-position: center center;         <-- try using shorthand 
  background-attachment: scroll;              <-- try using shorthand 
  padding: 0px; <-- no unit needed 
  margin: 0;  
  background-repeat: repeat;                  <-- group with "background" shorthand 
}  
#container {  
  height: auto;       <-- no need to specify the default 
  width: 848px;  
  margin-right: auto; <-- no need to specify the default 
  margin-left: auto;  <-- no need to specify the default 
  padding: 0px;  
  min-height:100%; <-- why not just say "height: 100%"? 
  max-height:100%; <-- why not just say "height: 100%"?  
  position: relative;  
}  
#insidecontainerlogo {  
  height: 150px;  
  width: 849px;  
  margin-right: auto; <-- no need to specify the default 
  margin-left: auto;  <-- no need to specify the default 
  padding: 0px;  
  background-image: url(images/silverbypatlogobg.jpg);  
  display: block;  
  background-repeat: no-repeat;  
  background-position: top;  
  clear: none;        <-- no need to specify the default 
}

If I were you, I would begin by shortening the style sheet to:

body { 
  background: #4c0d24 url(images/bg-image.png) repeat center center; 
  margin: 0; 
  padding: 0; 
} 
#container { 
  height: 100%; 
  padding: 0; /* you may be able to remove this as well */ 
  position: relative; 
  width: 848px; 
} 
#insidecontainerlogo { 
  background: transparent url(images/silverbypatlogobg.jpg) no-repeat left top; 
  display: block; 
  height: 150px; 
  padding: 0; /* you may be able to remove this as well */ 
  width: 849px; 
}