1 Topic by Frank H (edited by Frank H 2006-06-18 13:00)

  • Frank H
  • Former PunBB Developer
  • Offline
  • Registered: 2003-03-16
  • Posts: 1,423

Topic: CSS/markup/hacks help needed for png's and tableless layout

I'm stuck! wink

I made a layout in the gfx program and exported a bunch of transparent png's to use in div/span elements and a logo that also is transparent ... and no matter what I do I cannot get it to work in IE, I've used the CSS filter hack to get background pics in CSS to have alpha, and I've used the javahack to get the png's in img tags to have transparency ... but the CSS hack removed the left and right pre logo gfx, and the javascript hack only works on img tags.. (and moves the image, or scales it)

So is it possible to do what I want in IE (as it looks in Firefox 1.5), or must I either skip the layout I'm planning on doing tongue

the test can be found here ...

AARGH ... I reallly need some help, so pleeeeease say something about it so I won't throw this <piiiiiiiiip> computer out through the window big_smile

(Edit: only the toplogo + background is made sofar, the rest to come later, if the logo is possible to get to work on IE tongue)

  • From: Leuven, Belgium
  • Registered: 2005-06-14
  • Posts: 2,653

Re: CSS/markup/hacks help needed for png's and tableless layout

Hrmm... save your PNG with alpha transparency? Should work, and most gfx programs support it wink

  • Frank H
  • Former PunBB Developer
  • Offline
  • Registered: 2003-03-16
  • Posts: 1,423

Re: CSS/markup/hacks help needed for png's and tableless layout

they have alpha in Firefox tongue

  • From: Leuven, Belgium
  • Registered: 2005-06-14
  • Posts: 2,653

Re: CSS/markup/hacks help needed for png's and tableless layout

Firefox can handle transparent PNGs, IE can't (IE7 most likely will). Only if they are saved with alpha transaprency they work in both wink
Just look at the logo here in IE, it's a PNG

  • Frank H
  • Former PunBB Developer
  • Offline
  • Registered: 2003-03-16
  • Posts: 1,423

Re: CSS/markup/hacks help needed for png's and tableless layout

that page uses a javascript to fix the png alpha transparency

You'll find this in the http://wiki.robotmc.org/skins/common/IEFixes.js file ... 

// png alpha transparency fixes
function fixalpha() {

that one doesn't work on background images set in CSS ... only on img tags on the page ...

  • Frank H
  • Former PunBB Developer
  • Offline
  • Registered: 2003-03-16
  • Posts: 1,423

Re: CSS/markup/hacks help needed for png's and tableless layout

I managed to get it to work by using:

* HTML 4.01 Transitional
* Tables
* CSS hack to get png's to have alphas on background images
* Java hack to get png's to have alphas on images

But ... 4.01 Transitional + tables doesn't feel like the right way to go tongue

http://frankh.shacknet.nu/temp/layout/index4.html

  • Frank H
  • Former PunBB Developer
  • Offline
  • Registered: 2003-03-16
  • Posts: 1,423

Re: CSS/markup/hacks help needed for png's and tableless layout

158 views and no other input ... I suppose the way to go is with 4.01 and tables then sad

8 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: CSS/markup/hacks help needed for png's and tableless layout

What exactly went wrong with IE's proprietory alpha filter?

9 Reply by Frank H (edited by Frank H 2006-06-22 20:14)

  • Frank H
  • Former PunBB Developer
  • Offline
  • Registered: 2003-03-16
  • Posts: 1,423

Re: CSS/markup/hacks help needed for png's and tableless layout

Well, when I added the CSS hack on the background pics the pre and post logo graphics dissapeared (the <span id="prelogotypegfx"></span> and <span id="postlogotypegfx"></span>, I couldn't manage to get them back onto their position as showed on index2.html, couldn't get them to show at all as a matter of fact tongue).

Also the javascript hack mess up the CSS placement of the transparent logotype when using xhtml. (It either put it on the top of the #logotypearea, or scale it to the top of it, it doesn't like the padding it seems like ...).

If I cannot get it to work I think I'll scrap this 'everything transparent' idea, and go with some classic opaque style instead where one can overwrite previous graphics by just placing stuff above ...

(I actually have been experiencing some Firefox issues aswell, but I haven't figured out how to repeat them... The pre and post gfx sometimes gets darker (just like the image is rendered ontop of itself, no matter how many refreshes I make it won't go back until I close and restart the browser ... haven't figured out what triggers it though tongue)


Edit: index3.html has this issue ... no pre or post gfx as you can see tongue

Edit2: wink ... the darker gfx could be some gamma correction thingie I guess, as I haven't run through the pngcleaner to strip off all that info ... but as it works ok sometimes I'm not entirely sure though...