Hi Web Gurus,

I have a problem with a mates website I put together and was wondering if anyone has any suggestions for a solution or can explain the reason behind the discrepancy's.

I have created http://www.gregselectrical.com.au/ with VSD 5.8 which works perfectly well on both Firefox and IE and Safari, it has been on line for a while now.

In my effort to learn more about CSS and HTML editing, I am using HTML Editor 2007 latest edition and as an exercise decided to convert the original site over to a new version using the editor.

I have done this ( http://www.gregselectrical.com.au/test/index.html ) but now find that there is a discrepancy when the site is viewed between Firefox and IE...

The photo of my mate Greg is actually a link to an Iframe (I can hear the groaning already) which in turn activates a Sitepal html and the animation speaks.

As you will (hopefully) see with Firefox the switch over between Gregs photo and the animation is perfect with the second image taking the place of the first but when it comes to IE it moves out of place and no matter what I try by slight adjustment to the iframe co ordinates its always out on one or the other.

If you try the original site made with VSD with FF or IE it works perfectly in both cases.

I am sure there is a simple answer to this and all part of my learning curve but would appreciate any advise given.

I cut n pasted the exact coding from the original for the iframe that was produced automatically by VSD so I cannot see why the discrepancy... why it works with VSD but not Editor 2007.

Thanks in anticipation.

McRobbo

Hi,

VSD has it's own way of creating the hrml code to try to make your page look the way you designed it. There will always be challenges when trying to convert it over to an html editor. Your problem with the talking head is that it is using "absolute positioning" to place the new animation directly over the same location as the image. In theory, that works, but IE and other browsers interpret what you are doing differently.
I am not sure if your monitor is wide enough to do this test, but if it is....change the size of the IE window and see what happens to the animation. It tries to stay in the same place "absolute position" on your screen while the actual content window moves left and right as you resize. Since no one will have exactly the same size browser window as you, the animation will always be in a different place.

Why did it work with VSD? Because almost everything on your page was controlled with absolute positioning, so they all went the same way at the same time.

Why does the same code fail now? I haven't got a clue
Try changing the z-index. You have 2 items set at z-index 12, maybe give it a new number.
Also, maybe remove the style="LEFT: 0px; POSITION: absolute; TOP: 0px" from your iframe code and see if that doesn't shake things up a bit.
You might have to create a <div> tag to position the iframe on your page, or rather within your page instead of an absolute position on the browser window, but that would all be trial and error.

Best of luck, it looks cute when it works.

Every major browser will postion elements exactly the same as long as the browser is not displaying the page in quirks mode and the code is standard compliant. Monitor resolution is relative.

If this is not true for you Cliff, perhaps you should update your Java.

Hi Cliff,

Thanks very much for your quick response, I have taken it all on board and will try the various suggestions.

Definitely trial and error but that adds to the fun.

Cheers

McRobbo

Tom....You are absolutely correct, but you can't tell me you believe that VSD creates standard compliant code??
The code that McRobbo is using was copied directly from an html file produced by VSD, so IE has gone into "quirks mode".

I did not mean "monitor resolution" would make anything different, I meant if you resize your browser window, some absolute positioning may not work, becase if it is supposed to be 200px from the left, and you have your other content "centered", then the absolute will stay 200px from the left and the content will re-center as the browser window gets wider, causing things not to line up anymore.

I hope that better explains what I mean.

LOL. you don't have to explain yourself, Cliff. But is nice to know that I can provoke a response from you with a mere twitch of the finger.

And to answer your question - If I paid for a product that added the code behind my point and click visual design, I'd expect it to produce standard compliant code. This is not a dig at CC, either, as none of the visual interface programs on the market do that entirely.

Gentlemen,

Nice to see my "quirky" problem has opened up a discussion, I appreciate both your responses.

I have tried everything you suggested Cliff but to no avail and also appreciate what you where saying about the VSD code not producing standard compliant code and therefore good old IE goes into "quirks" mode or best guesses where the image should sit.

This still doesn't answer why both IE and FF work perfectly when displaying the website produced by VSD, it sort of contradicts the answer.

Maybe on of the gurus from CC might like to add a suggestion.

Thanks

McRobbo
PS The guy who owns the site couldn't care less its just me trying to get it perfect.

When I view that link using IE7 and FF2, they both display the sitepal flash animation to the right of the jpg image of your mate.

Both are very close but not exactly in the same location and neither one replaces the photo of your mate. So I see the entire image of your mate and the entire flash animation right beside that to the right, on both browsers.

Hi Tom,

Thanks for looking at the site.

As you will see I have been messing about with it and managed to stuff it up through trial and error but thats OK as its my test page to try and workout what is going on .

If you go to http://www.gregselectrical.com.au/ and try the exercise with both IE and FF you will see it all works OK no matter what resolution or computer I use.

I have tried changing the doctype to the same as the VSD code to fool IE but to no avail, then tried the code from this page, now the ticker or scroller doesn't work in IE but does in FF (ignoring the fact the scroller is now of the page)... great fun.

Any suggestions from anyone is welcome as its all one big learning curve to me.

Cheers

McRobbo

McRobbo,

Cliff is correct that changing the width of the browser will move the talking head.

You already have an iframe. Have you tried to load Greg's head in that iframe and set it so that clicking of Greg's head loads the talking head into that iframe, thus replacing Greg's head?