Firefox Ie Problem

[TCH-RobertM]

Hi everyone, I have been playing around with a new design and all new css to go with it. Oh the fun just never ends... really I do find this to be quite enjoyable as I muddle through the different problems...

ok ok to the point..... I have put a new index.htm on My Webpage If you view it using IE you will see I get a green background color with a Black center stripe in the middle

Using Firefox 1.0 It does not show that particular background image... everything else shows up fine....

 

any help would be greatly appreciated.

 

Thanks again all

[TCH-Bruce]

There is no repeat associated with that image but why you are not seeing a single rendition of it eludes me.

[TCH-RobertM]

Bruce thank you for looking, One comment though is that I do not see where I have a no-repeat for this image....

my css is listed below.

 

I have no-repeat associated with all the other images such as upbars and header

but background.png does not have a no-repeat that I see

??

 

><style type="text/css">

html, body, div {font: normal 12px verdana, arial, georgia, serif; color: #000;}
#page {
	 width: 636px;
	 margin: 0 auto; 
	 position: relative;
	 }

body {
  background: #FFFFFF; 
  margin: 0; 
  padding: 0;
  }   /*  Body 0 margin 0 pading white background */

#header {
   height: 103px;
   width: 635px;
   margin: 0; padding:0;
   background: url( 'images/header.png' ) no-repeat;
   }

/* TAB Navigation */
#Tabsleft {
  	 height: 25px;
  	 margin: 36px 0; 
  	 padding:0 0 0 5px;
  	 top: 42px; 
  	 left: 88px;
  	 position: absolute;
  	 }

#Tabsright {
     height: 25px;
     margin: 36px 0; 
     padding:0 0 0 5px;
     top: 42px; 
     left: 390px;
     position: absolute;
     }


div.outer {
  	 float: left;
  	 width: 66px; 
  	 height: 25px;
  	 margin: 0 15px 0 0;
  	 background: url( 'images/upbars.png' ) 0 -50px no-repeat;
  	 }

div.outer a {
     display: block;
     margin: 0; 
     padding:0;
     width:100%; 
     height:100%;
     overflow:hidden;
     font: bold 12px/1 arial, verdana, georgia, serif;
     color:#006600;
     text-decoration: none;
     background: url( 'images/upbars.png' ) top left no-repeat;
     }

div.outer span {
       display: block;
       margin:0; 
       padding: 5px 0 0 5px;
       }
div.outer a:hover {
      	 background-image: none;
      	 color: #000;
      	 }
div.outer a:active {
         color: black;
         }
/* End of TABS */

/* Content of Page begins here  */

/* Left side of Page */
#CONTAINER {
	 width: 550px;
	 margin: 0 auto; 
	 position: relative;
	 background: url( 'images/background.png' );
	 }
#contentleft {
margin: 10px 0px 0px 0px;
float: left;
width: 270px;
padding: 0;
font-size: 15px; 
font-family: arial, verdana, georgia, serif;
border-bottom: 1px solid #A0ECA0;
}
/* Right side of Page */
#contentright {
margin: 10px 0px 0px 15px;
float: left; 
width: 250px;
padding: 0 0px; 
}
</style>

[TCH-Bruce]

/* Left side of Page */

#CONTAINER {

  width: 550px;

  margin: 0 auto;

  position: relative;

  background: url( 'images/background.png' );

  }

 

When I said no repeat I meant that you did not specify that you wanted this background TO repeat.

 

See background-repeat

[TCH-RobertM]

Thanks again Bruce, I tried the Background-repeat could not get that to work.

I am playing around with the Position: relative vs position absolute and the container sizes... I am thinking it might have to do with that

Once I get it I will post resolution

Thanks again for trying to help

[TCH-RobertM]

Well I think I have it sorted out now, it had to do with the margins and width of each of the containers. I changed them and dbl checked that none would overflow so it appears that corrected the problem. OR I could have just stumbled on a lucky fix not sure of which yet LOL

but in any event here is the updated css file

Hope it helps someone down the road

><style type="text/css">

html, body, div {font: normal 12px verdana, arial, georgia, serif; color: #000;}
#page {
width: 636px;
margin: 0 auto; 
position: relative;
}

body {
background: #FFFFFF; 
margin: 0; 
padding: 0;
}   /*  Body 0 margin 0 pading white background */

#header {
height: 103px;
width: 635px;
margin: 0; 
padding:0;
background: url( 'images/header.png' ) no-repeat;
}

/* TAB Navigation */
#Tabsleft {
height: 25px;
margin: 36px 0; 
padding:0 0 0 5px;
top: 42px; 
left: 88px;
position: absolute;
}

#Tabsright {
height: 25px;
margin: 36px 0; 
padding:0 0 0 5px;
top: 42px; 
left: 390px;
position: absolute;
}


div.outer {
float: left;
width: 66px; 
height: 25px;
margin: 0 15px 0 0;
background: url( 'images/upbars.png' ) 0 -50px no-repeat;
}

div.outer a {
display: block;
margin: 0; 
padding:0;
width:100%; 
height:100%;
overflow:hidden;
font: bold 12px/1 arial, verdana, georgia, serif;
color:#006600;
text-decoration: none;
background: url( 'images/upbars.png' ) top left no-repeat;
}

div.outer span {
display: block;
margin:0; 
padding: 5px 0 0 5px;
}
div.outer a:hover {
background-image: none;
color: #000;
}
div.outer a:active {
color: black;
}
/* End of TABS */

/* Content of Page begins here  */


#CONTAINER {
width: 550px;
margin: 0 0 0 43px;
position: absolute;
background: url( 'images/background.png' );
	 }
/* Left side of Page */
#contentleft {
margin: 0px 0px 0px 0px;
float: left;
width: 270px;
padding: 2px;
font-size: 15px; 
font-family: arial, verdana, georgia, serif;
}
/* Right side of Page */
#contentright {
margin: 0px 0px 0px 0px;
float: left; 
width: 270px;
padding: 2px; 
}

 

Thanks again for trying to help out,

Robert

[TCH-Bruce]

Glad you got it sorted out.