18 replies [Last post]
Jace
Offline
Regular
Last seen: 15 years 11 weeks ago
Joined: 2005-08-09
Posts: 35
Points: 0

I made a transparent DIV background using this code:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='transbg.png',sizingMethod='scale');

All links located within this DIV aren't able to be clicked on for some reason (it hovers over it as if it were a normal piece of text). I had the hardest time finding out what was the problem, then I removed that one line of code and it worked. Is there a way to have my cake and eat it too, er, have my PNG and click it too?

Anonymous
Anonymous's picture
Guru

Transparent PNG troubles

Link please?

Jace
Offline
Regular
Last seen: 15 years 11 weeks ago
Joined: 2005-08-09
Posts: 35
Points: 0

Transparent PNG troubles

http://www.angelfire.com/rpg/justtesting/kirby/basic33.html

The link list on the left are all links, however they don't appear clickable.

I have only tried it on IE. Maybe they work in other browsers?

Anonymous
Anonymous's picture
Guru

Transparent PNG troubles

I should have guessed everything was positioned absolute. Smile

Is there a reason for this?

Jace
Offline
Regular
Last seen: 15 years 11 weeks ago
Joined: 2005-08-09
Posts: 35
Points: 0

Transparent PNG troubles

Well I've only been using CSS for about a week now, and I'm not very keen to the positioning system. I generally know how to position elements on a page via "left: #px; top: #px;" but other than that I haven't been able to easily grasp the concepts. I created that page by trial and error, and position: absolute seemed to do it for me. Is that why the links are unclickable?

Anonymous
Anonymous's picture
Guru

Transparent PNG troubles

Jace wrote:
Is that why the links are unclickable?
Probably. When you position something absolutely it takes it out of the normal flow of the document and that item can cover other items or can be covered by other items. Besides without a doctype IE is in quirksmode and who knows what it's going to act like.

Validate you code first and I'll take another look.

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.angelfire.com%2Frpg%2Fjusttesting%2Fkirby%2Fbasic33.html


Seems like a good idea at the time... Smile

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 12 years 25 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Transparent PNG troubles

Laughing out loud Laughing out loud

You know if you do that in the UK you die don't you!

Can I borrow that graphic please for future use?

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

Anonymous
Anonymous's picture
Guru

Transparent PNG troubles

HellsBells wrote:
Laughing out loud Laughing out loud

You know if you do that in the UK you die don't you!

Can I borrow that graphic please for future use?Smile Yeah, I made it for everyone. Laughing out loud

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 56 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Transparent PNG troubles

HellsBells wrote:
Laughing out loud Laughing out loud

You know if you do that in the UK you die don't you!It tends to be a negative experience even at half the voltage. Shock

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 12 years 25 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Transparent PNG troubles

kk5st wrote:
It tends to be a negative experience even at half the voltage. Shock

Laughing out loud True (not that I'd know obviously - I'm not that stupid *twitch*)

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

Jace
Offline
Regular
Last seen: 15 years 11 weeks ago
Joined: 2005-08-09
Posts: 35
Points: 0

Transparent PNG troubles

Okay ... wow ... that thing pops up a dozen errors. I don't even know what a DOCTYPE is (people keep saying "Use one!" and I say "How!?").

But I'll get to that eventually. Right now I just want to fix my current problem. So, apparently Absolute is bad. Is there a time I shouldn't use it and a time I should? Is it possible to maintain the page's same layout after ridding of Position: Absolute?

Jace
Offline
Regular
Last seen: 15 years 11 weeks ago
Joined: 2005-08-09
Posts: 35
Points: 0

Transparent PNG troubles

Well just to see what would happen, I got rid of all of the position:absolute's. The page was really skewed, and the links still were not clickable. I'll find a way to get rid of the absolute elements anyways, but that won't fix my current problem. I may have to completely relearn CSS because I seem to be not cooperating correctly with it.

Anonymous
Anonymous's picture
Guru

Transparent PNG troubles

Jace wrote:
I may have to completely relearn CSS because I seem to be not cooperating correctly with it.
You may want to start by realizing that this
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='http://www.angelfire.com/rpg/justtesting/kirby/transbg.png',sizingMethod='scale');
is not css.

Jace
Offline
Regular
Last seen: 15 years 11 weeks ago
Joined: 2005-08-09
Posts: 35
Points: 0

Transparent PNG troubles

I know that command is not CSS, I did not know if CSS could be used to override it and somehow make the links clickable. Or an alternate way to have a transparent background (without having to make the BG into an image simulating transparency). That is all.

Anonymous
Anonymous's picture
Guru

Transparent PNG troubles

Jace wrote:
(without having to make the BG into an image simulating transparency).
Do you consider this "bad practice"? Sounds like a perfect solution to me. Smile

Jace
Offline
Regular
Last seen: 15 years 11 weeks ago
Joined: 2005-08-09
Posts: 35
Points: 0

Transparent PNG troubles

Not at all... I'd actually prefer it, but I'm no good with photoshop =)

Offbrand
Offline
newbie
Louisville, Ky
Last seen: 12 years 37 weeks ago
Louisville, Ky
Joined: 2008-02-07
Posts: 2
Points: 0

Its the your css or your background...

The problem is that you don't have any links. Notice that when you hover the status bar says the link is just ...# Which is exactly the link you supplied. Refer to the snippet from your source below

  • Order
  • Pricing
  • Web Design
  • About Me
  • Contact Me

  • introduction

















    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 17 hours 56 min ago
    Dallas
    Timezone: GMT-5
    Joined: 2004-06-25
    Posts: 9772
    Points: 3854

    Isn't 2½ years a little

    Isn't 2½ years a little late for a response?

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    Offbrand
    Offline
    newbie
    Louisville, Ky
    Last seen: 12 years 37 weeks ago
    Louisville, Ky
    Joined: 2008-02-07
    Posts: 2
    Points: 0

    well ya know...for people

    well ya know...for people that look at dates....