differences in rendering xhtml and html

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I have been trying base my site on the Ruthsarian Lab's layout at

This design is in xhtml, whereas I would prefer to have my pages in
html4.  In converting to html, some visual changes have crept in - any
suggestions would be appreciated.

My design in xhtml is at

In html it is at

In converting xhtml to (valid) html, all I have done is to remove the
self-closing marks from the links in the header.  I believe that the
xhtml is valid except for missing '/' on two <img>s.

Some window-resizing issues notwithstanding, the xhtml displays as
intended in FF2, FF1.07 and Opera 8.5

The html is okay in FF2 and Opera 8.5, but in FF1.07 the vertical grey
border is lost - it becomes black.

In IE6, the border remains grey, but the title area is knocked out by a
few pixels on the right-hand side, on both html and xhtml.

How can I prevent these issues from occurring?

I know that I need to sort out text and window re-sizing issues, and
that there is probably some dubious mixing of px and em measurements,
but any other comments would be welcomed.



Re: differences in rendering xhtml and html

As far as I can see you are right that only the image tag code is not
valid. It should be like you said /> to close.  Try fixing those two
errors and see what happens.

It apears you pretty much followed the layout pattern in your code.  I
did noticed that the Ruthsarian layout is done in transitional xhtml
and you are using strict.  I'm not sure if that would make a
difference.  Only thing to do is to change the orginal to strict and
see if you get the same problem.

I didn't check the css, I'm guessing you used the one provided without
changing stuff like margins or padding.  That could cause the problem
that I see using IE.

Till later.

Nik wrote:
Quoted text here. Click to load it

Re: differences in rendering xhtml and html

smithj7 wrote:
Quoted text here. Click to load it

Thanks for your thoughts.

I don't think the closed img tags is significant, the layout didn't
change whenthey were introduced, and it is the xhtml that is working as
expected/desired.  i'll give it a go to make sure, though, likewise with
the strict/transitional.

The smae CSS files are linked into each document - I've added an
additional file 'home.css' to Ruthsarian's set, and kept all my
tampering in there.  I think I'll go back to the template and re-build
my page from that one element/style at a time.


Re: differences in rendering xhtml and html

Nik wrote:
Quoted text here. Click to load it

I solved the problem by using a simpler template; one that was created
in html to start with.  The IE issues were to do with some floating
elements I'd added - I think it was the interaction of float:right with
a negative margin.

The Mozilla issue was caused by the following rule in the CSS
html[xmlns] .mozclear
    border-bottom: 1px solid;
    border-color: transparent;
    margin-bottom: -1px;

And I'd obviously removed the <html xmlns ... > in converting to html.

Out of interest, can anyone tell me what this rule means? - it did its
stuff in F1.5 & 2, but not in 1.0.7.  What does the [xlmns] signify?

x-posted to .stylesheets, f'ups set.


Site Timeline