Ok, my intention was to position this png image in the right, bottom corner of the page. It looked ok in IE, but not in any other broswer. It was always a bit off, lifted off the bottom of the page or pushed too far out. So, of course I tried using both aboslute and relative positining, in various ways. Still couldn't get a result which would work for all the broswers.

This is the image: http://img.photobucket.com/albums/v1...i22/penelo.png

I think the obvious solution would be to simply crop the image, because that extended portion of the shaded triangles is what seems to mess things up, and cause the lifting. But I can't seem to find a image editor that would let me crop the png without adding an unpleasant background color. And I just can't seem to find a way for it to work via only coding.

Any help would be appreciated! Thank you for reading!

not 100% sure what you mean, because the image is as big as it is and the "shaded triangles" are part of the image.

the "unpleasant background color" will be caused by IE being unable to handle the alpha transparency of .png files.

Originally Posted by chrishirst

the "unpleasant background color" will be caused by IE being unable to handle the alpha transparency of .png files.

Is there any way to overcome this problem? I've been having a problem with png's with transparent backgrounds

http://www.webmaster-talk.com/html-f...tml#post404167

Thanks mate, appreciate it

No, the png displays fine. I'm having trouble positioning it, because in IE it looks ok of course, but in all the other browsers it's either pushes out or up to far from the side or bottom, as though it had margins.

And I tried to simply crop it, however, every image editor I have tried applies a background color to the png upon saving it, where it should be transparent.

The transparency is not the issue, it's simply try to find a way to position it correctly.

lol... wow... you need to post some code if you want an answer like that. Although I AM renowned for my psychic powers

IE will be the one that is wrong. Any time it looks "right" and other browsers look "wrong" it won't IE that is handling it correctly. On that score you can be absolutely 100%.

As Abel says, we need code, but better still we need a URI for the entire page (real page not a screen shot) so we can see the issue in a browser, rather than trying to visualise what "lifted off the bottom" and "pushed too far out" looks like.

Ok, here is the site: http://provi.bravehost.com/

Since it's just a free site, please ignore the ad inserts.

I played around with it last night, so I'm actually worried that since seeing it, it might look decent. Maybe it's just become a case of me being too picky, and anal. I may have fixed the "pushed" out problem, now I'm just annoyed that in every browser window, the picture is off by a few pixels. Do you see her shawl and where it ends, next to the grey div? In every broswer but IE, all I need to do is move it a few pixels and it's right on the edge of the gray. but not touching it,like I like it. But maybe I'll have to settle for the fact that it won't look exactly the same pixel for pixel in this case.

I suppose now though you may be able to tell me if you see if anything is particularly off.

The page is broken, which is no surprise, because your code's a complete mess. Your CSS is outside of the head, and you have two heads and two bodies. I really don't mean to be crude by saying this, but you need to learn proper HTML. And again, don't check it first in IE!

tim

I guess no one around like uses Bravenet, because every always says that or something. I know how html goes, perfect or not. It's the code that Bravenet likes to insert for some odd reason that makes it all messed up. Maybe I'll start using Geocities to do these test layout things.


Anyways, lemme go and try to fix it or switch it to make everyone happy...

Edit: OK, Geocities defnitly isn't going to work either because their ad inserts mess it up too. So, does anyone know of a website which offers some free webspace and NO ads that I can use to upload this? (Lemme read the stickies in the meantime too~)

Edit 2: I may have to just purchase a lowcost hosting plan, to get rid of the ads all together so people can actually see the code. I'm getting advice on this right now, and I'm considering Tripod, since the price is decent.

ALL RIGHT everyone! I uploaded with NO ads so you should be able to see it with no problem.

I added a few things, tweaking it. See those dot image bullets? I can't get those positioned right now, and I think that overflow: hidden; isn't working in Opera.

What can you guys spot?

http://rikoa.tripod.com/

It's completely broken in FF, which is what you should be getting it to work in first. You have a lot of unnecessary absolute positioning. What you need to do is learn to use the document flow, floats, etc. Learn how to create a fixed, centered layout first, then how to do fluid ones. Read the stickies here and check out W3C schools. Again, without trying to be harsh, from your code it looks like you really need to learn CSS a bit more before we can really help you.

BTW, the host had nothing to do with the page breaking. From the looks of it the entire page of code was pasted in from the ads, rather than the relevant code integrated into your document. I can't see that happening on the host's side from two different hosts.

I'm trying to break it to you easy that you have so many things wrong here I wouldn't know where to begin, other than what I've already stated. But good luck; though you have a lot of work ahead of you, you can do it.

tim

serandfae: I've been told many times that absolute positioning is bad, but I guess I've been so hooked on it because I've seen a lot of good layouts that utilize it. I don't understand the difference between absolute and fixed, since they sound the same, so I'll be figuring that out. (I just looked it up, and fixed seems to be what you would use OUTside of a div element, and absolute you use INSIDE and element.) However, it also wasn't my intention to center the site exactly. For instance, that gray strip isn't intended to be centered.

When I read your response, I focused a lot of it on your advice about knowing how to create a fixed, centered layout. Obviously I understood it; I'm not challenging it, but I want to know how that is going to help? (Literally, I mean, what it will enable me to do and understand).

I appreciate it, and I'm gunna keep trying. (I now pay for that hosting plan, so I might as well use it for what it's worth. Now I'm laughing because I feel like I have to do hardcore research on CSS now.

Alrighty, back to square zero~

It's specifically because you're trying to position your elements absolutely, then move them around, that you're not getting the results you want. And checking it in IE first is especially bad using absolute positioning, because IE does horrible things with it. Check positioniseverything.net for specific examples of that. Whether you have the site centered or not is up to you. The important thing is to specify a width, either by percentage, em, or px, and learn to use the document flow to position your elements. Again, check the stickies here and W3C schools.

tim