Webpage not scrolling in IE and .png transparency...
Two questions:
1, I am currently working on a site and the site does not scroll in IE, scrolls in FF (don't know about Opera, yet). Any idea why?
2, Also, I'm trying to use the .png transparency hack from ALA, but even that's not working either....
The link is http://www.quaverconnections.co.nz/ and this is actually quite an urgent issue... need it resolved ASAP
demonhale posted this at 05:12 — 2nd February 2006.
He has: 3,278 posts
Joined: May 2005
at the top of your css.css file there is these tags right?
ok try to remove the first tag (* { tag}) ,and put it inside your body tag like so...
That will solve the scrolling issue.
Now for the transparency on curve, save it as a gif, and try relinking, or better yet since you have white bg, make the transparent part white, and that would be it...
Renegade posted this at 07:01 — 2nd February 2006.
He has: 3,022 posts
Joined: Oct 2002
Yeah, well, I was trying to avoid that because then, I'll have to set it to everything else. There has to be a way around it.
Besides, I've used
* {
position:relative;
margin:0;
padding:0;
}
In all my other sites and they seem to scroll just fine.
Does anyone else know of a way around this?
The reason why I'm using .pngs is because the background is not going to be a solid white, there will be a light repeating background. With that big grey bit there, it will just ruin the look of the site.
Renegade posted this at 07:09 — 2nd February 2006.
He has: 3,022 posts
Joined: Oct 2002
OK, I just found a fix to the * { } thing:
body, body * {
position:relative;
margin:0;
padding:0;
}
Will work.
demonhale posted this at 15:11 — 2nd February 2006.
He has: 3,278 posts
Joined: May 2005
thats why put it in the body tag coz it still works the same, rather than adding the class id... it works on your ither site since theres no css issues on the tags, I tried to attack tags differently without affecting the *{} tag but then its fairly difficult to recode everything else than replacing and moving the tags for the *{} which basically makes everything else work on haywire, you might pull your hair off figuring it out unless I pointed out the *{} class is doing the mess...
As for transparency try gif, if you do need it as soon as possible...
Renegade posted this at 00:38 — 7th February 2006.
He has: 3,022 posts
Joined: Oct 2002
I figured it out why the transparency's wasn't showing.
1, I was using "inload" instead of "onload" for the body tag
2, It cannot be declared again in the CSS, if it is, it just counteracts the Javascript.
Everything is working fine now, didn't have to resort to using a .gif
Renegade posted this at 08:58 — 7th February 2006.
He has: 3,022 posts
Joined: Oct 2002
Crap, I spoke too soon... can someone PLEASE have a look at this?
I tried using a .gif and it doesn't come out very nice...
demonhale posted this at 13:05 — 8th February 2006.
He has: 3,278 posts
Joined: May 2005
Here is what i mean whats wrong with the gif???
dk01 posted this at 18:57 — 8th February 2006.
He has: 516 posts
Joined: Mar 2002
Ah I see now. My mistake. Sorry demonhale.
demonhale posted this at 17:14 — 7th February 2006.
He has: 3,278 posts
Joined: May 2005
I dont see a problem at the original link...
dk01 posted this at 18:33 — 7th February 2006.
He has: 516 posts
Joined: Mar 2002
Since I think its important we are all seeing the same thing here are some screen shots:
Internet Explorer 6 Win
Firefox 1.5 Win
The only problem I see is the missing curve on the right hand side of the page. Is this incorrect?
dk01 posted this at 18:48 — 7th February 2006.
He has: 516 posts
Joined: Mar 2002
I now see why you are using the ALA method instead of the WebFX method. Unfortunately I have had only bad experiences with the ALA method and therefore am partial to the WebFX method. I think you could create the same page fairly easily with the curve in an IMG tag instead of as a background image. Have you tried this at all?
-Jim
Renegade posted this at 23:20 — 7th February 2006.
He has: 3,022 posts
Joined: Oct 2002
To be honest, I haven't heard of the WebFX method before, until now.
But even so, I need to use the background images or, it will mean an extra unneeded DIV to use. So, the only real way (and in this case, the best way) is to use a background image.
It probably is something that I have missed out, maybe a typo or something, I have gotten the ALA method to work before. In IE and FF.
dk01 posted this at 01:40 — 8th February 2006.
He has: 516 posts
Joined: Mar 2002
I think I may have figured this out at least a bit. You should do this in your div.css:
Uncomment this line:
/*background-image:url(../image/content_bg.png);*/
Once you have done this you will need to make sure you are not using dashes in the page-content-container div's name. Make sure to make the changes in both html and css pages. Once you have done this you should start to see the png image in IE and the JS error that is occurring in IE should be gone.
This however is only a partial solution because IE will still show grey where the transparency should be.
demonhale posted this at 02:35 — 8th February 2006.
He has: 3,278 posts
Joined: May 2005
hey renegade spcify what is wrong with your gif image, maybe you just need a better resampling...
dk01 posted this at 05:00 — 8th February 2006.
He has: 516 posts
Joined: Mar 2002
.PNG you mean? See my above post for screenshots of his problem. The rounded corner .png image does not appear in IE6.
-Jim
Busy posted this at 09:01 — 8th February 2006.
He has: 6,151 posts
Joined: May 2001
I see something totally different in firefox 1.5 (see attachment)
IE 6 the same as dk01's screen shots and Opera 8.51 same as IE without the javascript error
dk01 posted this at 10:49 — 8th February 2006.
He has: 516 posts
Joined: Mar 2002
Wow that's really odd. I am technically FF 1.5.0.1 which is the latest version. I know there were some bugs in FF 1.5.0.0 and this could be one of them.
JeevesBond posted this at 14:07 — 8th February 2006.
He has: 3,956 posts
Joined: Jun 2002
I wasn't partial to the ALA method for png either (not very semantic), so have written my own (with a lot of help from existing methods), the code's attached, if you're interested.
To be honest I'm not happy with these routines as they should use a class, however all I needed this to work for is an ID.
Instructions for Use
Put attached files in same directory as the page you wish to use the effect on.
Add the following code to your HTML documents :
<script src="event.js" type="text/javascript"></script><script src="opacity.js" type="text/javascript"></script>
Open the opacity.js with your chosen text editor and go to line 72, where it should say:
var mainobjOpacity = new pngOpacity('main');The bit that says: 'main' needs to be changed to the id of the div you wish to have transparency on.
This works with background-image (in fact you must supply a background image in the CSS
), it will also remove the grey, you can see it in action at http://www.intermedia-online.com/clients/artisan/
This should do the job.
a Padded Cell our articles site!
dk01 posted this at 19:01 — 8th February 2006.
He has: 516 posts
Joined: Mar 2002
Looks good to me! Nice little script there Jeeves! Mind if I use it as long I all credits are left in?
JeevesBond posted this at 22:04 — 8th February 2006.
He has: 3,956 posts
Joined: Jun 2002
Yeah, carry on old fruit, it's free for everyone (as long as you leave the credits in there
)!
I really should make it work for a class though, that would make more sense. Then you wouldn't have to do anything with the JS, just plug it in. Hmmm.
a Padded Cell our articles site!
Renegade posted this at 23:18 — 8th February 2006.
He has: 3,022 posts
Joined: Oct 2002
JeevesBond, I just tried using your script, still doesn't seem to work:
http://www.quaverconnections.co.nz/
Something I'm doing wrong?
dk01 posted this at 23:32 — 8th February 2006.
He has: 516 posts
Joined: Mar 2002
It's odd because the other two png's show up perfectly. :shrug:
Renegade posted this at 07:11 — 9th February 2006.
He has: 3,022 posts
Joined: Oct 2002
Well, the other two .pngs don't have any transparency, that's probably why they are showing up right.
dk01 posted this at 08:41 — 9th February 2006.
He has: 516 posts
Joined: Mar 2002
Have you tried removing the image from the design and then applying the png hack? This way we could know if its some sort of png problem or if its a page problem.
Renegade posted this at 09:55 — 9th February 2006.
He has: 3,022 posts
Joined: Oct 2002
Yes, I have tried that, there is no error on the page when I do.
JeevesBond posted this at 23:54 — 14th February 2006.
He has: 3,956 posts
Joined: Jun 2002
Right, sorry to have taken so long to reply, but have been hectic!
Here's what you need to do:
#pagecontentcontainer {background-image:url(content_.png);
width: 500px;
height: 234px;
right: 0;
position: absolute;
}
You see IE is only using the background-image property as a pointer to an image, as soon as that filter is applied the rest of the background CSS flies out of the window. IE has it's own little rules about filters, they behave differently to a normal background.
One of these rules is that the element must be a block-level one (although a float will do). Also IE will also resize the div according to the dimensions of the image - if the "sizingMethod" parameter is set to "image" that is. This means I had to stop the element being a container:
<div id="pagecontentcontainer"></div>And don't forget to comment out/remove the old div:
<p>QuaverConnections is dedicated to helping your special event go with a bang.If you cant find what you are looking for in these pages, drop us a line on the contact page.
We have over 50 years collective experience in the entertainment and arts industry and are more than happy to help you find a contact if we cannot provide it.</p> </div>
<!--</div>-->
[/code]
As it isn't a container, but we still want it to act like a background, I set the position to absolute. Removing it from the document flow.
Am hoping these insructions are clear enough to follow, I've made it work myself and will post files if necessary.
Hope it works!
a Padded Cell our articles site!
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.