Oh, and in IE it is transparent?? Usually I can get my sites to work flawlessly in FF and NEVER quite right in IE. Go figure.
it looks like your actual header image has white in the background:
header image
You might need to change the actual PNG file to made it transparent.
so weird! it is totally transparent. Look at the site in IE. I wonder what the deal is with FF.
Okay so researching FF and PNG transparency.. I found this:
FF Support Thread
I don’t understand what the original person meant when they answered, concerning the background and grey letters. But at the bottom a gentleman says DIV transparency works? Maybe?
What DIV would I change to get that area behind the header to transparent?
Here’s a screenshot of what I think the problem is – the image has some transparency but also a big white rectangular box.
My header image is the bar and the transparent rectangle behind it. I don’t have a clue what that white box is? I didn’t create a logo image with any white behind it, and I do graphic design. That’s why I am so perplexed by this Firefox thing.
Is that white box a div container that I am blind to? I don’t understand why the website in IE, safari, and chrome show the header correctly with the full transparency behind it. That must mean I got the CSS right in one of those things to turn the container transparent.
okay so I replaced the old logo with a new NON transparent one. I still see a random white box? however it is the width of the blog content/blog width. I keep clicking around with Firebug and Inspect Element with Web Dev. I must be straight daft that I can’t find which DIV that white is coming from.
wait wait… I might have it. Firefox has a bug apparently with transparency and PNG files. It adds some weird background. I made a bunch of DIV’s in my CSS transparent in the hope of getting rid of the white.
If you look at my site in IE, Safari, CHrome… It displays correctly without the white. Yes I know it’s a few pixels off. I’ll find that code later.
Can I put a semi-transparent background in a DIV? Like assign the DIV a background?
I finally found the area i think?
SCREENSHOT
hey – just checking up on this issue – were you able to figure it out?
Maybe you can post a link to a mockup of what you want it to look like so I can better understand the problem.
Currently for me it looks the same in FF, Chrome, and IE.
no! *cries. hahaha.
okay I’ll make a mockup of it.
wait… did you say you see the white box thingy in FF, Chrome and IE? I only see it in FF and i’ve used different systems to cross check FF, Chrome, IE, and Safari.
UGH.
Even in the other browsers that don’t have the goofy white box of pissyness, I have to figure out how to scooch (technical term) the header down a few pixels to line up with the grey background.
Okay let me go take a screen shot, and do a quick deal in ps, then I’ll post the link
BTW….
THANK YOU FOR EVEN CHECKING BACK!!!! (nm helping me and taking the time in the first place)
🙂
okay.. this is what it is supposed to look like, and also what I see in chrome, IE, and Safari currently. Just not FF. Meh.
IMAGE
I had a look today in FF, and Chrome – and they match your image perfectly!
Could be your version of firefox?
I updated twenty twelve and even though I had a child theme the style disappeared.
Now I have that dang white space around the header image again! I could scream!
I changed nothing in my child CSS
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Why are you stopping us from right clicking on your site, don’t you want us to help?
