Member Avatar for cybergrace7

Hello,

I've made a website and have images in a sidebar. Everything's good in IE. In Firefox it is transparent. The sidebar consists of PNG images with transparent backgrounds and rounded edges.

I've used code for style:

#sidebar {
margin:0;
padding:0;
background-color:transparent;
}

Any suggestions appreciated!
(URL is: http://www.humanrightsfirst.org/index-bkup-4-21-10.aspx)

Edited by mike_2000_17 because: Fixed formatting
  • 3 Contributors
  • 3 Replies
  • 128 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by cybergrace77

Dani AI

Generated

A focused checklist and a few practical fixes that address the most likely causes mentioned in the thread (see and ).

A quick way to find the exact source: use Firefox's Inspector (right‑click the sidebar element → Inspect). Look at the Computed and Rules panels for any background-* entries and note the stylesheet and line number that set them. Disable suspected rules one at a time inside the inspector to see which change removes the white area. Invalid markup can change the DOM and make styles apply to the wrong element, so follow 's suggestion and run the HTML/CSS validator if the structure looks messy.

If a small image used for corners is being tiled, prevent tiling or remove that image while testing. Example tests (temporary):

#sidebar { background-image: none; }

#sidebar {
  background-image: url("images/corner.png");
  background-repeat: no-repeat;
  background-position: top right;
}

If the PNG itself is the problem, check the file for a real alpha channel (open in Photoshop/GIMP and confirm an Alpha channel or use a "Save for Web" PNG‑24/true alpha export). Some editors can accidentally save a white matte into the image so what looks transparent in the editor actually contains white pixels.

Other notes tied to replies in this thread: a shorthand background: rule later in the cascade can overwrite earlier transparent settings, so search all stylesheets for any background: declarations that include a color. Make small, isolated changes and test in one browser first; keep backups or use version control before larger rewrites. For modern layouts, consider using CSS border-radius and box-shadow instead of image corners — this removes a common source of cross‑browser PNG issues (see MDN on border-radius and background for reference).

Recommended Answers

All 3 Replies

Member Avatar for cybergrace7

Oops, very sorry. The background is transparent in IE, in Firefox it is WHITE! I looked it up online and transparent is supposed to be the default color. Also, I tried
background:none;
which didn't work either.

Member Avatar for Member #120589

Doesn't work properly in Chrome either. I warrant it's wrong in Safari and Opera too - you'll have to check.

Hmm. I put your site through a html validator - it's not pretty.

Your problem appears to be a repeating background image.

Will get back.

//Are you working on this at the minute? Seems the display is changing every time is refresh! Will wait for you to respond.

Edited by Member #120589 because: n/a
Member Avatar for cybergrace77

Doesn't work properly in Chrome either. I warrant it's wrong in Safari and Opera too - you'll have to check.

Hmm. I put your site through a html validator - it's not pretty.

Your problem appears to be a repeating background image.

Will get back.

//Are you working on this at the minute? Seems the display is changing every time is refresh! Will wait for you to respond.

- - - - - - - - - - - - - -

Yes, very perceptive... I am working as we speak! I messed it up pretty bad & will need to just throw it away. I am trying to fix too many things at one time. I will start again with one change at one time. Thank you, I appreciate the shout out. ;-)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.