Could someone explain why this is happening?

I decided to convert my page over to XHTML from HTML. When I did, it started messing with all sorts of things. I don't really understand why any of these things are happening (although I've figured out how to fix them). I'm not so much concerned with the cure so much as wanting to understand the underlying principles at work here. So, here's the issues:

1) When I converted the page to XHTML, I ended up with the following effect (seen at http://www.nriyounglife.org/xhtmlindex.htm ). Essentially, it messed with the sizing of things. The width of some of my <div> boxes and font size were increased in IE. However, when tested in Firefox, no issues. Hmmmmm, i thought. Pixels should be pixels should be pixels. So, I took a look at my style sheet to see what might be causing the issue. Padding? Nope. Borders? Nope. Margins? Nope. Then i remembered this bit of code:



I had added that to the HTML based page to make Mozilla and IE browsers use the same box model. Now however, it was causing IE and Mozilla browsers to display them differently. When I removed the code, it caused both Mozilla and IE to display boxes too large. So both browsers were displaying the page wrong in XHTML vs HTML, but at least they were displaying the page the same in both types of browsers. Ok, easy fix, change the width and height settings in the XHTML page. However, I don't understand why the page acted this way in the browsers to begin with. Why would moving from HTML to XHTML cause this issue at all? Why does that bit of code cause Mozilla and IE to render boxes differently in XHTML when it's supposed to make them use the same box model? Why are both Mozilla and IE rendering 172px wider in XHTML than in HTML without the above code? The examples for comparision:

HTML: http://www.nriyounglife.org (orignal page)
XHTML (with the above CSS entry): http://www.nriyounglife.org/xhtmlindex.htm
XHTML (without the above code, and height and width adjusted): http://www.nriyounglife.org/xhtmlindexnocode.htm

Look at the examples in IE and Mozilla to see the effect I'm describing.

On a related note, the size of the horizontal header and the navigation box at the bottom of the page were unaffected by the change. I figure this is due to the fact they do not have a height specified, and their width is either not specified (header) or set to a relative value (bottom nav box). Their CSS is as follows:





2) Converting to XHTML causes the text size to change. The class being used in all versions of the page is as follows:



The text in the .main class is the only text affected by the transition to XHTML, but then again, the text in the .main class is the only text with a relative value vs. an absolute pixel value. Also note the text size difference between browsers using the same font-size value. In short, HTML vs XHTML is displaying the text size differently. AND, in XHTML, Mozilla and IE are displaying the text size differently given the same font-size value. (In HTML, both mozilla and IE display the text size the same.)

IE seems to display the text one level larger than Mozilla in XHTML. However, the font-size property is still set to "smaller". The fix is easy enough: simply specify a pixel value rather than a relative value for font-size. However, I would like to leave the text size up to the visitor so people can resize the text to suite their needs. Any ideas why the transition to XHTML would mess with how the browsers display the font size, as well as why the browsers display the same CSS property differently in XHTML?

*Phew!* Ok, long friggin' post. I apologize if it was too long, but I wanted to supply enough detail for anyone willing to help to understand the issue completely. Thanks in advance for any insight you all can share! (I need a nap now )

Mark

There is not an easy answer, because in essense it goes back to cross-browser compatability, and IE being a little quirky. I have been researching another XHTML error for another friend and may have come up with some things that at least in part may offer some explanation. Rather than reposting the entire content, review what I wrote here:

This is the specific error I was looking into:
http://www.stevestechresource.com/str/t ... 5/225.html (read the resulting threads -- I post there as The Webmaster)
The answer I refered to above is in this one:
http://www.stevestechresource.com/str/t ... 5/261.html

In addition, this post may also offer some added insight:
http://mail-archive.objectweb.org/xmlc/ ... 00026.html

I'm only beginning to look at this issue so I really don't have much more information than that at this time. Hope some of that helps.

Usually adding a DOCTYPE causes IE to try and be a good browser and run in standards complient mode, but what actually happens is so clouded and seemingly random, most poele choose to take out any DOCTYPE's and go into 'quirksmode'.

Of course this causes more trouble with validation etc, so I propuse you place the DOCTYPE declaration in a special sort of conditional comment: downlevel-revealed conditional comment, good luck.

that's some interesting reading ATNO/TW. i clearly don't understand enough about what's going on with a browser when different DTD's and such are used.

From reading through those couple of forums supplied, it looks like it's an issue with how IE handles XHTML, which makes sense when I think back to the original issue. Mozilla displayed correctly in the first try at the transition to XHTML, but IE got all screwed up with the new DTD.

Y'know, before I started making pages, I really liked IE. But the longer I work on web design, the more of a pain in the a$$ IE is becoming. In IE's defense, they haven't had any significant updgrades to it in a couple of years. I soooooooo hope this latest version of IE coming out this summer is more standards compliant!

Mark

For anyone else who reads through this thread, the links posted in the first post no longer function. Since it seems to be a browser issue rather than a coding issue on my part, I went ahead and implemented the changes needed and converted to XHTML. I also validated my CSS in the process. The final results can be seen at http://www.nriyounglife.org if your'e curious. All pages on the site have been validated both for XHTML and CSS.

The good news? After dealing with the above issues, the pages look much better in both Mozilla and IE, IMO. XHTML seems to be rendered more consistently in both types of browsers than HTML.

Mark

Yes -- I did mean to add that -- I wanted to let you know I thought your site is coming along very nicely, and it is extremely impressive to watch you take the initiative to learn HTML and Style so thoroughly in order to accomplish your goals. God bless you and your site!

thank you so much for your feedback! I also would like to thank you for all your help with trying to learn this stuff. I definitely could not have accomplished even the little bit I've gotten done with this site without your help (as well as several other regulars here). You certainly have earned that Ozzu Oscar for most helpful poster! I hope I can be as helpful to someone else someday!

Mark

That's why I do it *smiles -- others helped me learn at the beginning as well. I like to give back what I've received since now I can.