<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.1 Transitional//EN">
had to be change to
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
Well, if it works, it works, but your document is using a "half doctype" in both cases and is still rendering in Quirks mode, which will continue to give you cross browser grief. The first steps in cross browser compatibility:
- Use a full doctype to render in Standards Compliance mode. Choosing the best doctype for your site [webmasterworld.com] and Why most of us should NOT use XHTML [webmasterworld.com].
- Once you understand SCP and it's value, validate your documents [validator.w3.org].
Thank you for your reply, I have edited it to now show:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Regarding validation, I was having trouble getting Index page to validate as I have a little work to do, but intend to revalidate it when complete.
OK, I decided to use 'loose' in the end. The others broke certain aspects of my site so clearly I need to look into updating some of my code and incorporating more css.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
So back to my original problem, which has now arose again. Is there a way of rewriting the css so that it works for IE as well as FF and Opera (in which it currently works fine) ?
Many thanks in advance.
Here as elsewhere, you need to explain what "doesn't work" means. It's obvious to you, because you're looking right at it. But "doesn't work" can hide a multitude of sins including not displaying at all, displaying in the wrong place, being influenced by things that aren't supposed to affect it... and so on.
I mean that the corner banner is meant to sit in the top right hand corner of the site and (but not importantly) not scroll when the page does, therefore remaining in the top right hand corner.
This works in FF and Opera but in IE it's positioning is completely wrong. It appears in a completely different part of the page and furthermore it is almost fully hidden beneath another feature (a css positioned .js feature).
The above query can be cancelled as I managed to place the object correctly but have settled for a scrolling action as opposed to fixed.
However, if anyone with CSS knowledge knows how to code the corner banner/image so that it remains fixed in both FF and IE I'd be very grateful.
Incidentally, I'm now using <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> and I'm pleased to say my site validates.