Hi Everyone,

I used the latest version of the HTML Editor and Photogallery to produce this web page: http://www.mikegoldweber.name/travel/ireland2009.html.

I've tested out the page in IE7, Firefox 3, Chrome and Opera. IE7 and Chrome give me the same results that I saw from the HTML Editor preview. That is, the Photogallery appeared where I expected it to appear (right below the text). In Firefox and Opera, the photogallery appears way below the text. This is not a slight difference! On a small screen, the viewer wouldn't even know the gallery is on the web page. I expect slight difference between the major browers, but I wasn't expecting this kind of difference. The attached file shows a screen shot comparing the difference between the browsers.

I had contacted Coffeecup's tech support, and they encourage me to read some articles on the subject. The articles weren't helpful because they said there would be a difference between browser's output (which I already knew), but they didn't offer any solutions to the problem.

More importantly, I don't know if the problem is with the HTML Editor, or with Photogallery's output.

If you wouldn't mind, please look at the web page. I would be very grateful to hear your thoughts on the difference in each browser's output. If you've had this problem, and discovered a solution, I'd love to know what you've done.

Thanks in advance,
Mike Goldweber

You have this embed tag within your object:


Try the following instead. I removed the positioning styling.

Cary, Thank you so much! Your suggestion did the trick. I really appreciate your help.

Sincerely,
Mike Goldweber

Cary is onto it with the cause and remedy.

You already know there are differences between the browsers and this is an ideal example. Browsers render code differently, but not so differently that it can't be fixed. The problem with software that generates code is that the makers often design it to be the most compatible, that is, work with the most likely browser people will be using and that is Internet Explorer. As web designers, we want to code pages so they will render properly on every possible browser but the only way to do that is either hand-code things or rely on software that we know generates compliant code.

Just looking at the source for your page, there is no doctype declaration, which means browsers will have to 'guess' what the code-base is and do their best to render it. Browsers will most likely guess a transitional page in this case, but this causes problems: the embed tag is not allowed. Nor are self-closing elements.

Example:



This is lifted from your gallery code; the trailing forward slash is not allowed in a transitional schema.

The embed tag is included because some browsers do not recognise the 'object' tag by itself, which is also why both tags have similar information; the hope is that one browser will recognise the object tag and use that and another the embed tag and use that. All this combines to make code-compliant browsers very confused as to which way to display things.

Another interesting issue is your style sheet reference in this page has no file extension, just a reference to 'style1'. The actual style1 page has no extension either, which is why this works; but it shouldn't really. For maximum compatibility, the style1 file should be renamed style1.css and the reference in the page to it changed to ../style1.css

Sorry for the long post but it is good to know why something doesn't work as expected so next time you can work around it.

Dave.