Firefox, Opera, IE and CSS2, XSL

[xptm]

I have designed a small site using CSS2 following only the W3C standars. I expected that site to work OK with all browsers, and for what i heard specially on Firefox.

I've tested the site with Firefox, Opera and IE and all three give diferent results. But what striked me is that only IE gave the expecteds results. To my knowledge i haven´t used any IE-specific features.

The site it's at http://gondufo.com.sapo.pt .

The same happens with XSL Tranformations. I have a put a test resume with XML/XSL that it's working on IE but not on Firefox.

It´s at http://amsmota.home.sapo.pt .

Can someone help, or at least comment on this?

[Shovel]

Not sure about the first one. There's a couple of validation errors on the CSS, but nothing related to layout, so I'd have expected it to be OK.

My only theory is that it's a box model issue. IE doesn't add up "Width" properly, unless IE6 is in "Standards" mode (which takes some persuading, from what I can tell). Therefore if you've got any margin or padding on that left-hand menu, IE may be adding up wrong (and so putting it where you've expected it to be), while FX has added it up right, and positioned it further down the page. If that's not the case then.. errm... no idea.

The second link was identical in IE and FX, except for IE being very chuggy on the background movement and Firefox working 'smoothly' by slower depending on how much of the screen is visible.

[xptm]

Thanks for your reply.

In http://amsmota.home.sapo.pt my FX gives me

This XML file does not appear to have any style information associated with it. The document tree is shown below.

Should i have to install some kind of plugin or extension? I have none...

I'll check the CSS2 one, at least by "trial-n-error"...

[plien69]

Make sure you use the correct XSL namespace in your stylesheet:
http://www.w3.org/1999/XSL/Transform

It's a common mistake that has caught out a lot of people attempting XML/XSL in Gecko.

[MonkeeSage]

CSS Page:

Don't have IE to test what it 'should' look like, and no description was given, so I'm not sure what the problem is.


XSLT Page:

This directive (or 'processing instruction' as W3C calls it):

Code: Select all

<?xml:stylesheet type="text/xsl" href="curriculo1.xsl" ?>

...should be:

Code: Select all

<?xml-stylesheet type="text/xsl" href="curriculo1.xsl" ?>

Should be hyphen rather than colon between 'xml' and ' stylesheet' -- the colon would signify that 'xml' is a namespace prefix and 'stylesheet' is an element in that namespace and the syntax wouldn't be recognized properly in the form of a directive (<?...?>), whereas 'xml-stylesheet' is an XML processor directive [instruction] for including stylesheets -- see here).

Make sure you change the namespace on your XSL files as plien69 mentioned also.


Shelumi`El
Jordan

S.D.G

[xptm]

I've corrected the xml/xsl and i think it´s ok now. I'm going to look at the CSS on the week-end.

Thanks guys.

[finuvir]

After your

Code: Select all

.leftnav {

declaration in the stylesheet you have an extra <code>}</code> which is halting the parser. That's causing your image caption to display unstyled. The

Code: Select all

padding-top: 20%;

in that same declaration is pushing the whole <code>div</code> down.

[xptm]

Thanks finuver, i've corrected those two situations, now i have almost the same results in IE and in FF. However, IE stills behave better (!!!) than FF, specially when i resize the browser window to small areas.

The IE browser allways mantain proporcional areas, including the scroll applet and the foto image. For example, the black footer allways appear at the botton.

The FF browser, if resized to small to a small area, put's the scroll appletr and the image below the footer.

I didn´t try with Opera this time. [edit] Yes i have, but in a SE P800 phone, and it beahves strangely, some sections adapt to the screen width but some don´t, specially theone with the photo. I'll try with the desktop version of Opera to compara, ehen i can. [/edit]

It's much better now anyhow, but if someone as more hints i'll be grateful.

Thanks all.

[wget]

Both pages lack a proper DOCTYPE.

You also appear to be using java for some nefarious reason, but that's beside the point.

[xptm]

Hi:

I'm afraid i don´t understand what do you mean. My last post was re the page at http://gondufo.com.sapo.pt , and that one has

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

And what do yue mean by "using java"?

[wget]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

That's not a proper DOCTYPE.

Read this and perhaps find a newer DTD:
http://www.alistapart.com/articles/doctype/

And what do yue mean by "using java"?

It was just a joke. I just looked through your code and found something called scroller.jar and that sent me back to 1998 java waveeffects nostalgia.

I'm not a huge fan of java on the www, you see.

[xptm]

I see that changing the doctype will change the page, and IE and FF "versions" will look (almost) alike. Unfornatly it changes the layout, so i have to remake some parts, when i have the time...

But thanks for your info, it seems i'm on the right track now...

Altought i'm a java programmer (among other languages) i didn't write the applet, i just get it from the web... When i write the "Credits" page i'll mention the author.

4/5 years ago i was not a fan of using Java GUI in the web. However, with the spreading of bigger connections speeds, i don't see any problems in using it...

Regards.

[wget]

I see that changing the doctype will change the page, and IE and FF "versions" will look (almost) alike.

The doctype will force both programs into standards compliant mode (and that's generally a good thing). In Mozilla/Firefox you can check what mode you're in by pressiong Ctrl-J.