Webpage not scrolling in IE and .png transparency...

Renegade's picture

He has: 3,022 posts

Joined: Oct 2002

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 Plain

demonhale's picture

He has: 3,281 posts

Joined: May 2005

at the top of your css.css file there is these tags right?

Quote:
* {
position:relative;
margin:0;
padding:0;
}

body {
/*background-image:url(../image/body-bg.png);*/
background-color:#fff;
font-size:100%;
font-family:"Trebuchet MS", arial, verdana, sans-serif;
line-height:1.3em;
}

ok try to remove the first tag (* { tag}) ,and put it inside your body tag like so...

Quote:
body {
/*background-image:url(../image/body-bg.png);*/
background-color:#fff;
font-size:100%;
font-family:"Trebuchet MS", arial, verdana, sans-serif;
line-height:1.3em;
position:relative;
margin:0;
padding:0;

}

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's picture

He has: 3,022 posts

Joined: Oct 2002

demonhale wrote: ok try to remove the first tag (* { tag}) ,and put it inside your body tag

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?

demonhale wrote: 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...

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's picture

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's picture

He has: 3,281 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's picture

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 Smiling

Renegade's picture

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's picture

He has: 3,281 posts

Joined: May 2005

Renegade wrote: 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...

Here is what i mean whats wrong with the gif???

dk01's picture

He has: 516 posts

Joined: Mar 2002

demonhale wrote: Here is what i mean whats wrong with the gif???

Ah I see now. My mistake. Sorry demonhale.

demonhale's picture

He has: 3,281 posts

Joined: May 2005

I dont see a problem at the original link...

dk01's picture

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's picture

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's picture

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's picture

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's picture

He has: 3,281 posts

Joined: May 2005

hey renegade spcify what is wrong with your gif image, maybe you just need a better resampling...

dk01's picture

He has: 516 posts

Joined: Mar 2002

demonhale wrote: hey renegade spcify what is wrong with your gif image, maybe you just need a better resampling...

.PNG you mean? See my above post for screenshots of his problem. The rounded corner .png image does not appear in IE6.

-Jim

Busy's picture

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's picture

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's picture

He has: 3,955 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 Smiling ), 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. Smiling

a Padded Cell our articles site!

dk01's picture

He has: 516 posts

Joined: Mar 2002

JeevesBond wrote: 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 Smiling ), 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. Smiling

Looks good to me! Nice little script there Jeeves! Mind if I use it as long I all credits are left in?

JeevesBond's picture

He has: 3,955 posts

Joined: Jun 2002

Yeah, carry on old fruit, it's free for everyone (as long as you leave the credits in there Smiling )!

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's picture

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's picture

He has: 516 posts

Joined: Mar 2002

It's odd because the other two png's show up perfectly. :shrug:

Renegade's picture

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's picture

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's picture

He has: 3,022 posts

Joined: Oct 2002

Yes, I have tried that, there is no error on the page when I do.

JeevesBond's picture

He has: 3,955 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! Smiling

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.