XHTML Doctype and IE6 question

Having a wierd problem

[karmov]

I found a nice example of how to make fun rollover CSS menus. I liked it, and altered it to do what I wanted it to do. Now each menu item has a left, right and bottom border that's 1px wide to frame each button in the menu. Right now everything works great and I'm content with it so far.

However, I've been validating some old code to XHTML 1.0 Transitional and now I want to add the doctype to the top of these pages. When I do, everything looks perfectly fine in Mozilla, Netscape, Opera, and Safari, but on IE6 on my PC, the right border to all of the buttons has disapeared. Everything looks fine with no doctype definition, but as soon as I put it in, it seems to push the right border off too far. I've run a quick test with fixed pixel width buttons to see if it's still there and it is if I make the buttons smaller. I can't do that since IE6 seems to render the width attribute differently than other browsers.

Any suggestions?

[papabaer]

Do a search for any (and all!) of the following: doctype switch, standards mode, quirks mode, IE box model.

Those will get you started. There is a lot to read... even more to understand. One of IE's many rendering flaws is its incorrect interpretation of the CSS box model. IE6 provided a fix through doctype switching. XHTML doctypes (properly formed) are among those that trigger IE6's standards mode.

[karmov]

Thank you papabaer, that helped my understanding of my problem a lot. I knew about the IE5 box model problems so I ran my stuff through IE5 as my worst case scenario and it worked ok.

So the IE6 box model says that it's rendering the box properly acording to CSS1 on the MSDN site. They say that the CSS box width value refers to the content only (not padding or borders). So when I set my width to 100% and add borders and padding, my buttons are actually greater than 100% width. None of the othe browsers are doing this.

I guess where I'm at now is that I understand what's happening, but I'm a bit lost as to solutions to the problem... I do realise I can just leave the doctype declarations out, but I'd really rather not. Any suggestions?

[karmov]

Yeah, just did a quick re-test on everything. IE6 is in fact the only one giving me grief... But what greif it's giving me. I'm open to any suggestions.

[karmov]

Forget it, I've found my problem. I don't like the solution, but I'll have to deal with it I guess. Again, thanks papabaer.

[g1smd]

And...

What is the problem and solution?

Why not post something here for other people who may face similar problems in the future?

[pageoneresults]

karmov, you might want to look at the code for this CSS menu and see what is different than yours. I was able to reproduce those buttons you are referring to across all CSS compliant browsers and I'm using XHTML 1.1. Everything validates and the borders show fine...

CSS Beveled Button Effect [webmasterworld.com]

P.S. Read all three pages of the thread as I updated the code as I was testing and getting feedback from the community.

[karmov]

Originally I had my width set to 100% which was allowing my menu items to work in everything bu IE6. I knew of the box model hack for IE5, but couldn't find anything for IE6. I played around with it for a while and set my width to a fixed pixel width which worked out fine for IE6 and other browsers but IE5 diplayed it as being too short (due to broken box model).

So now at least I've got it to a point where It renders reasonably properly by setting a fixed pixel width rather than 100% on all browsers except IE5 where I can use the box model hack to fix that problem. Haven't actually dont the hack yet, saving that for Monday, but I will also check out my code compares to pageoneresults to see if I can maybe find something there than would clean things up and hopefully not need the hack.

My appologies g1smd, I was in a rush and not thinking when I posted that last time. I don't mean to be inconsiderate to the community, I will do better :)

[Xuefer]

ie6
for doctype it don't know
will active backCompat mode, i.e. ie5 box model