Comments on: Incremental Improvement

By: Ensellitis

Ensellitis — Sat, 24 Sep 2005 19:31:20 +0000

Problem with this is that it also makes the text opacities change and some elements. A good fix for that is to place the elements inside of another div or paragraph and give them another class and give them 100% opacity.

[p class="noopacity"]text, images, or whatever[/p]

.noopacity {
background: transparent;
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity: 1.0;
}

If you ever wanted it to be valid CSS, you could also make a small gif background that is 2 by 2 pixels like this:
X0
0X
Where X is white and 0 is transparent and set that as the background.

Great fix. It makes reading the sidebar alot easier =)

By: Simon

Simon — Fri, 23 Sep 2005 12:10:19 +0000

Hi Carrie,

I’ve never looked at your page in IE. I’ll have a look later on if I get time, I think I’ll probably be able to solve this question.

The model of margins and padding (referred to as the “CSS box model”) in IE and Firefox is different, so you have to hack stuff to make different values available to each browser…

-Fruey

By: carrie

carrie — Fri, 23 Sep 2005 09:54:03 +0000

wow! ..I’m thinking of all the background images I could use now that I’ve found this handy little tip of yours! I’m an html/css amateur (as is evident on my page :p) and if you’ve ever viewed my page in IE, you’ll see my borders dont quite fit my sidebar and main. I goofed around with my css and hid some padding values which made it look better in firefox, but its not right. if you have any suggestions for me, I’d be very appreciative

By: Simon

Simon — Fri, 23 Sep 2005 07:26:34 +0000

Thanks for your comments. As I surf around, I try to take note of stuff that I see in order to work out how it’s done. This little trick was inspired by a number of sites using transparency. Mostly people have used PNG files which have alpha transparency. GIFs have pixels that are either transparent or not, whereas PNG pixels can be partly opaque. When IE starts supporting PNG alpha transparency properly, you’ll start to see a lot more very neat rounded corners and stuff like that. The fact that CSS now allows transparency also allows a lot of useful effects, I hope Tara’s blog is a good example.

By: Cassiopeia

Cassiopeia — Thu, 22 Sep 2005 12:51:25 +0000

I didn’t know you could do that?

I love learning new things….:)

Thanks for the tip!

By: Paula

Paula — Thu, 22 Sep 2005 10:24:22 +0000

Nice job.

By: Tara

Tara — Wed, 21 Sep 2005 14:21:48 +0000

Again thanks for your help, it was very inventive and clever of you