More CSS Help Please

Posts: 1029 · Posted: Tue Jan 18, 2005 2:00 am

Hey... Bobum'll prolly answer this Wink

*my prediction*

http://jimcamarata.net/new/index.aspx
http://jimcamarata.net/new/_standard.css

That page...

the little content blocks... I want the BACKGROUND transparent, like it is, but I want the letters to be fully opaque - so you can't see thru them. I want them to stand out. I haven't been able to accomplish this. Any ideas?

Thanks!!!

Posts: 746 · Posted: Tue Jan 18, 2005 2:57 am

It's probably not working the way you want it to work right now because of the very nature of CSS - the 70% alpha that you have is going to override anything you have that is below it...lemme has this one out a bit...

Opacity is not inherited but is does affect the display of child elements...

Posts: 1029 · Posted: Tue Jan 18, 2005 3:46 am

I figured I'd try... although I came to the same conclusion. I tried to "override" the styles, but with no luck. I appreciate you looking into this.

I *LOVE* the power of CSS... it's been alot of fun since you and Dave really pushed me over the edge with it. Now I just wish I had a -tad- more control lol...

Posts: 746 · Posted: Tue Jan 18, 2005 3:52 am

What you need to do is make the background image of the outer block semi-transparent - a PNG will work (but of course - not in IE)
THen make the background color of the <p> solid - it works very nicely and looks really good.

Make your CSS look like this....

Code:

.column_right {
float:right;
width:515px;
text-align:left;
border:2px solid #FFFFFF;
background-color:#FFFFFF;
background: url(http://www.davisplanet.com/white.png);
padding:10px 10px 10px 10px;
margin:5px 5px 5px 5px;
}
.column_right p {
color:#000000;
margin:0px 0px 0px 0px;
background-color:#fff;
}

Here's a hack to make IE display the PNG properly

http://homepage.ntlworld.com/bobosola/pnghowto.htm

Posts: 1029 · Posted: Tue Jan 18, 2005 1:15 pm

Actually, the PNG will display correctly for IE... I'm using IE7 on that site (http://dean.edwards.name/IE7/) Wink

I was thinking about that this morning, and you just confirmed what I haven't had a chance to look into yet. Thanks!!! Collaboration is one of the most powerful tools around Very Happy

Posts: 1029 · Posted: Tue Jan 18, 2005 2:51 pm

awwweee darnit!!! Transparent PNG support is only for PNG's residing in an IMG tag... it doesn't work for background images... *bangs head*

Other than IE it works great LOL!!!

Posts: 746 · Posted: Tue Jan 18, 2005 4:24 pm

hehehe - told ya...and besides - YOU may be using IE7 on that site - but *I* may not be using IE7 on that site...and you of course need to consder that...glad it's working though...what a PITA that one was...but I learned somehting so that makes it all worth it.

Posts: 1029 · Posted: Tue Jan 18, 2005 4:47 pm

But that's the beauty of IE7... you don't have to do anything... it's a javascript include that "fixes" everything wrong with IE... and it does it w/o you knowing about it.

Posts: 746 · Posted: Tue Jan 18, 2005 5:05 pm

Oh os thie "IE7" isn't REALLY IE7 - correct? Meaning it's a third part set of Javascripts that fix IE on the pages you are serving rather than actaully fixing the browser right? Didn't you post that somewhere else on another thread?

Posts: 1029 · Posted: Tue Jan 18, 2005 5:54 pm

Yep... this is my first real-world implementation and it's gone REALLY REALLY well...

http://dean.edwards.name/IE7/

http://jimcamarata.net/new/index.aspx

Whe I was saying IE7 I was giving links to the developers website... it's just a series of JS files that make IE CSS compliant. It's been WONDERFUL so far... apparently he fixed the box model problem and many other things. And it validates!!! it's a pretty pretty and very nifty hack. I like people like the developer of this software... they realize that there's a problem, and people will continue to use problematic software, so instead of just ditching (which is unacceptable) the nasty software and instead of waiting for the softwares maker to fix it he figures out how to fix the **** thing himself. He's my savior. Very Happy

[/url]

Posts: 746 · Posted: Tue Jan 18, 2005 9:13 pm

if your using it now at Jim Camarata's page - which it looks like you are - it's not working on my box when I try using IE.
I'm using IE6 and it's not showing the transparency.

Posts: 1029 · Posted: Wed Jan 19, 2005 12:35 am

Try it now... i was tweaking today lol

Posts: 1129 · Posted: Wed Jan 19, 2005 1:09 am

ya **** hacker! haha
this ? just came up on the w3c list, i'll see if i can find it

Posts: 1129 · Posted: Wed Jan 19, 2005 1:11 am

this email just came throught the list, kinda a good point

Subj: [WSG] Should we be thankful for IE's non-development?
Date: Wed, 19 Jan 2005 00:56:07 +0000
From: David R <david@davidr.co.uk>
----------------------------------------------------------------
Its a problem plaguing web-standards enthusiasts much like ourselves for
years, which is IE's lack of compliance.

But consider... what if Microsoft did keep on updating its HTML Parser
and Rendering engines?

...Theoretically, wouldn't we be in a worse-off state, with even more
non-standard properties?

IE's non-development has created a kind of "level-off", where
practically everyone is now using IE6. If IE kept on being updated, many
users would be "lost" in the continual upgrades and just give up,
potentially leaving many back on older versions, with varying levels of
support.

Granted, whilst we could design for the lowest-common-factor, which in
all likeliness would be IE5.0, we wouldn't be able to exploit the
advantages of IE7.0 if it were around.

Granted, whilst IE6.0's standards support isn't 100%, its better than
Nav4, and since over 85% of the web-browsing public run it, should we be
glad?

...Compared to 7 years ago when obscure browsers were still mainstream.

Who remembers Mosaic? It was still popular in 1997

Irrelevant comparison, perhaps... but would we be worse-off if IE7.0
really did exist

...Considering Microsoft's upgrade policy, if it did, IE7.0 would
probably be limited to users of Windows XP, which still only account for
66% of WWW users.

Food for thought

--
-David R
******************************************************
The discussion list for http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************

Posts: 1129 · Posted: Wed Jan 19, 2005 1:13 am

maybe this will help

the question

"Yet another of 'those' threads"

Yep!

In a quickie... here's my document structure:

<ol class="list-tiles">
<li><a href="#"><img src="image.png" alt="" title="" /></a></li>
</ol>

The <li> Element is repeated by the server. And Image.png has index-like
transparency.

And the appropriate CSS (for IE... Standards Compliant browsers get a
different CSS file)

.list-tiles
border: 1px solid yellow;
margin: 0;
padding: 0;
list-style: none;

.list-tiles li
margin: 0;
padding: 0;
display: inline;
.list-tiles li a
padding: 1px; margin: 0;
border: none;

.list-tiles li a:hover
padding: 0;
border: 1px solid green;

.list-tiles li a img
margin: 0;
padding: 7px;
margin: auto;
border: none;
width: 100px;
height: 100px;
background: no-repeat center center;

(the borders are there for edge finding, except for the a:hover, which
is my desired effect)

I'm using the Sleight JavaScript to get IE6 to render the PNG files, but
there's a problem

...IE ignores the padding and margins oe the img and its container, the
AlphaImageLoader only supports scaling the image to fit the dimensions
of the img element... which makes the image element bigger than the
114px specified.

"crop" places the image in the top left hand corner, as does "image",
thus ignoring the "center center" rule I've defined for the background.

Does anyone have any suggestions?

the answer

David R wrote:
> The <li> Element is repeated by the server. And Image.png has index-like
> transparency.

Unless I'm misunderstanding: if you have a PNG with simple index
transparency, rather than 8 bit transparency, just save it as a
PNG-8...IE can handle those just fine without any filter, javascript or
other hack.