CSS Prob

[Twinkie]

Could someone please tell me why in this page, the background image of the error box does not show up?

Small problems like this drive me nuts :'(

 

[Anna]

you specify the color after the image, the browser will use the parameter that comes last in the list and apply.

What you have now:

#body div#statusbox_failure {
	background-image: url("../images/icon_failure.png");
	background-color: #FFFAF1;
	border: 1px solid #D2A960;
}

Change to:

#body div#statusbox_failure {
	background: #FFFAF1 url("../images/icon_failure.png");
	border: 1px solid #D2A960;
}

 

[misson]

you specify the color after the image, the browser will use the parameter that comes last in the list and apply.

That's only true if you set both using separate "background" properties:

#body div#statusbox_failure {
	background: url("../images/icon_failure.png");
	background: #FFFAF1;
	border: 1px solid #D2A960;
}

If you use the "background-color" and "background-image" properties, or a single "background" property, the image will display in front of the color.

The problem is you set "background-attachment" to "fixed", which fixes the image relative to the viewport (in other words, the BG won't scroll). Remove the "background-attachment" property and it shows up.

By the way, you use a selector of "#body div#statusbox_success, div#statusbox_failure" in style.css when you probably want "#body div#statusbox_success, #body div#statusbox_failure".

 

[subsilver]

I would do it like this:

#body div#statusbox_failure {
background:#FFFAF1 url(../images/icon_failure.png) no-repeat 5px;
border:1px solid #D2A960;
}

Cheers!

 

[diabolo]

#body div#statusbox_success, div#statusbox_failure {
  background-attachment:fixed;
  background-position:left center;
  background-repeat:no-repeat;
  color:#000000;
  font-family:Verdana,Geneva,sans-serif;
  font-size:13px;
  height:100%;
  line-height:normal;
  margin:10px 8px 13px;
  padding:20px 20px 20px 60px;
  vertical-align:middle;
}

change to

#body div#statusbox_success, div#statusbox_failure {
  background-position:left center;
  background-repeat:no-repeat;
  color:#000000;
  font-family:Verdana,Geneva,sans-serif;
  font-size:13px;
  height:100%;
  line-height:normal;
  margin:10px 8px 13px;
  padding:20px 20px 20px 60px;
  vertical-align:middle;
}

I don't know what that will mess up on your other pages, but it will fix the problem you are having now.

o, and if you do not have it already get FF and install FireBug. That's how I debugged your problem.

 

[Twinkie]

Thanks! I would not have figured that out myself :biggrin:

Does that mean with the background attachment set to fixed, the image was fixed at left: 0; top: 50%; relative to the window rather than the element?

 

[misson]

Thanks! I would not have figured that out myself

You could have if you created a minimal test case or used a CSS debugger, such as Firebug, Firefox's DOM inspector or Safari 4's debugger. It's easiest to selectively disable style rules in Safari 4.

Does that mean with the background attachment set to fixed, the image was fixed at left: 0; top: 50%; relative to the window rather than the element?

Yes.