PDA

View Full Version : Internet Explorer: Different markup and behavior



hiroprotagonist
9 Aug 2012, 4:38 AM
Guys,

I experienced that the markup that is created for IE 7 and 8 is completely different from the markup for Chrome, Firefox and IE9. Here is what I am trying to accomplish and how, and hope you guys can give me some idea how to do it right (or at least not two times):

1. I need a layout that consists of multiple columns having multiple areas. Most of the content are buttons and style html. I use regions and and vbox, hbox, not too sophisticated.
2. The buttons shall look like windows 8 metro style. For that reason I used css to restyle the available buttons to match the style.

While IE9 and FF renders 1:1, the rendering process in IE8 and IE7 used different CSS classes and html structure (small sample below).

Now my question(s): It looks pretty clean to use the CSS stuff for restyling.
- Do I really have to do something completely different for IE 8 and 7 and do the whole work again (as CSS classes used in markup are pretty different)?
- Is there any way how I can accomplish IE7+, FF without duplicating the styling and layouting?

Any help is highly appreciated,

hiro.

IE8 sample (as you can see, a lot of TDs within some divs):


<div class="x-box-inner " id="homenavigation-1021-innerCt" role="presentation" style="width: 241px; height: 184px;">
<DIV style="POSITION: absolute; WIDTH: 20000px; HEIGHT: 1px; TOP: 0px; LEFT: 0px" id=homenavigation-1021-targetEl>
<DIV style="BACKGROUND-IMAGE: none; BORDER-RIGHT-WIDTH: 1px; MARGIN: 0px; WIDTH: 109px; BORDER-TOP-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; TOP: 0px; LEFT: 0px" id=button-1022 class="x-btn y--home-button-distance y--home-button-size-large y--home-button-border-none y--home-button-red x-box-item x-btn-default-small x-noicon x-btn-noicon x-btn-default-small-noicon">
<TABLE>
<TBODY>
<TR>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: 0px -6px" id=button-1022-frame1TL class="x-frame-tl x-btn-tl x-btn-default-small-tl x-btn-default-small-noicon-tl" role=presentation></TD>
<TD style="BACKGROUND-POSITION: 0px 0px; HEIGHT: 3px" id=button-1022-frame1TC class="x-frame-tc x-btn-tc x-btn-default-small-tc x-btn-default-small-noicon-tc" role=presentation></TD>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: right -9px" id=button-1022-frame1TR class="x-frame-tr x-btn-tr x-btn-default-small-tr x-btn-default-small-noicon-tr" role=presentation></TD></TR>
<TR>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: 0px 0px" id=button-1022-frame1ML class="x-frame-ml x-btn-ml x-btn-default-small-ml x-btn-default-small-noicon-ml" role=presentation></TD>
<TD style="WIDTH: 103px; BACKGROUND-POSITION: 0px 0px" id=button-1022-frame1MC class="x-frame-mc x-btn-mc x-btn-default-small-mc x-btn-default-small-noicon-mc" role=presentation><EM id=button-1022-btnWrap><BUTTON hideFocus style="WIDTH: 103px; HEIGHT: 114px" id=button-1022-btnEl class=x-btn-center role=button type=button autocomplete="off"><SPAN style="WIDTH: 103px" id=button-1022-btnInnerEl class=x-btn-inner>Tracking Sheet</SPAN><SPAN id=button-1022-btnIconEl class="x-btn-icon "></SPAN></BUTTON></EM></TD>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: right 0px" id=button-1022-frame1MR class="x-frame-mr x-btn-mr x-btn-default-small-mr x-btn-default-small-noicon-mr" role=presentation></TD></TR>
<TR>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: 0px -12px" id=button-1022-frame1BL class="x-frame-bl x-btn-bl x-btn-default-small-bl x-btn-default-small-noicon-bl" role=presentation></TD>
<TD style="BACKGROUND-POSITION: 0px -3px; HEIGHT: 3px" id=button-1022-frame1BC class="x-frame-bc x-btn-bc x-btn-default-small-bc x-btn-default-small-noicon-bc" role=presentation></TD>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: right -15px" id=button-1022-frame1BR class="x-frame-br x-btn-br x-btn-default-small-br x-btn-default-small-noicon-br" role=presentation></TD></TR></TBODY></TABLE></DIV>
<DIV style="MARGIN: 0px; TOP: 135px; LEFT: 0px" id=container-1023 class="x-container x-box-item x-container-default x-box-layout-ct">
<DIV style="WIDTH: 241px; HEIGHT: 80px" id=container-1023-innerCt class="x-box-inner " role=presentation>
<DIV style="POSITION: absolute; WIDTH: 20000px; HEIGHT: 1px; TOP: 0px; LEFT: 0px" id=container-1023-targetEl>
<DIV style="BACKGROUND-IMAGE: none; BORDER-RIGHT-WIDTH: 1px; MARGIN: 0px; WIDTH: 66px; BORDER-TOP-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; TOP: 0px; LEFT: 0px" id=button-1024 class="x-btn y--home-button-distance y--home-button-size-small y--home-button-border-red y--home-button-gray x-box-item x-btn-default-small x-noicon x-btn-noicon x-btn-default-small-noicon">
<TABLE>
<TBODY>
<TR>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: 0px -6px" id=button-1024-frame1TL class="x-frame-tl x-btn-tl x-btn-default-small-tl x-btn-default-small-noicon-tl" role=presentation></TD>
<TD style="BACKGROUND-POSITION: 0px 0px; HEIGHT: 3px" id=button-1024-frame1TC class="x-frame-tc x-btn-tc x-btn-default-small-tc x-btn-default-small-noicon-tc" role=presentation></TD>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: right -9px" id=button-1024-frame1TR class="x-frame-tr x-btn-tr x-btn-default-small-tr x-btn-default-small-noicon-tr" role=presentation></TD></TR>
<TR>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: 0px 0px" id=button-1024-frame1ML class="x-frame-ml x-btn-ml x-btn-default-small-ml x-btn-default-small-noicon-ml" role=presentation></TD>
<TD style="WIDTH: 60px; BACKGROUND-POSITION: 0px 0px" id=button-1024-frame1MC class="x-frame-mc x-btn-mc x-btn-default-small-mc x-btn-default-small-noicon-mc" role=presentation><EM id=button-1024-btnWrap><BUTTON hideFocus style="WIDTH: 60px; HEIGHT: 55px" id=button-1024-btnEl class=x-btn-center role=button type=button autocomplete="off"><SPAN style="WIDTH: 60px" id=button-1024-btnInnerEl class=x-btn-inner>Projects</SPAN><SPAN id=button-1024-btnIconEl class="x-btn-icon "></SPAN></BUTTON></EM></TD>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: right 0px" id=button-1024-frame1MR class="x-frame-mr x-btn-mr x-btn-default-small-mr x-btn-default-small-noicon-mr" role=presentation></TD></TR>
<TR>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: 0px -12px" id=button-1024-frame1BL class="x-frame-bl x-btn-bl x-btn-default-small-bl x-btn-default-small-noicon-bl" role=presentation></TD>
<TD style="BACKGROUND-POSITION: 0px -3px; HEIGHT: 3px" id=button-1024-frame1BC class="x-frame-bc x-btn-bc x-btn-default-small-bc x-btn-default-small-noicon-bc" role=presentation></TD>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: right -15px" id=button-1024-frame1BR class="x-frame-br x-btn-br x-btn-default-small-br x-btn-default-small-noicon-br" role=presentation></TD></TR></TBODY></TABLE></DIV>
<DIV style="BACKGROUND-IMAGE: none; BORDER-RIGHT-WIDTH: 1px; MARGIN: 0px; WIDTH: 57px; BORDER-TOP-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; TOP: 0px; LEFT: 76px" id=button-1025 class="x-btn y--home-button-distance y--home-button-size-small y--home-button-border-blue y--home-button-gray x-box-item x-btn-default-small x-noicon x-btn-noicon x-btn-default-small-noicon">
<TABLE>
<TBODY>
<TR>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: 0px -6px" id=button-1025-frame1TL class="x-frame-tl x-btn-tl x-btn-default-small-tl x-btn-default-small-noicon-tl" role=presentation></TD>
<TD style="BACKGROUND-POSITION: 0px 0px; HEIGHT: 3px" id=button-1025-frame1TC class="x-frame-tc x-btn-tc x-btn-default-small-tc x-btn-default-small-noicon-tc" role=presentation></TD>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: right -9px" id=button-1025-frame1TR class="x-frame-tr x-btn-tr x-btn-default-small-tr x-btn-default-small-noicon-tr" role=presentation></TD></TR>
<TR>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: 0px 0px" id=button-1025-frame1ML class="x-frame-ml x-btn-ml x-btn-default-small-ml x-btn-default-small-noicon-ml" role=presentation></TD>
<TD style="WIDTH: 51px; BACKGROUND-POSITION: 0px 0px" id=button-1025-frame1MC class="x-frame-mc x-btn-mc x-btn-default-small-mc x-btn-default-small-noicon-mc" role=presentation><EM id=button-1025-btnWrap><BUTTON hideFocus style="WIDTH: 51px; HEIGHT: 55px" id=button-1025-btnEl class=x-btn-center role=button type=button autocomplete="off"><SPAN style="WIDTH: 51px" id=button-1025-btnInnerEl class=x-btn-inner>Sign In</SPAN><SPAN id=button-1025-btnIconEl class="x-btn-icon "></SPAN></BUTTON></EM></TD>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: right 0px" id=button-1025-frame1MR class="x-frame-mr x-btn-mr x-btn-default-small-mr x-btn-default-small-noicon-mr" role=presentation></TD></TR>
<TR>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: 0px -12px" id=button-1025-frame1BL class="x-frame-bl x-btn-bl x-btn-default-small-bl x-btn-default-small-noicon-bl" role=presentation></TD>
<TD style="BACKGROUND-POSITION: 0px -3px; HEIGHT: 3px" id=button-1025-frame1BC class="x-frame-bc x-btn-bc x-btn-default-small-bc x-btn-default-small-noicon-bc" role=presentation></TD>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: right -15px" id=button-1025-frame1BR class="x-frame-br x-btn-br x-btn-default-small-br x-btn-default-small-noicon-br" role=presentation></TD></TR></TBODY></TABLE></DIV>
<DIV style="BACKGROUND-IMAGE: none; BORDER-RIGHT-WIDTH: 1px; MARGIN: 0px; WIDTH: 88px; BORDER-TOP-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; TOP: 0px; LEFT: 143px" id=button-1026 class="x-btn y--home-button-distance y--home-button-size-small y--home-button-border-gray y--home-button-gray x-box-item x-btn-default-small x-noicon x-btn-noicon x-btn-default-small-noicon">
<TABLE>
<TBODY>
<TR>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: 0px -6px" id=button-1026-frame1TL class="x-frame-tl x-btn-tl x-btn-default-small-tl x-btn-default-small-noicon-tl" role=presentation></TD>
<TD style="BACKGROUND-POSITION: 0px 0px; HEIGHT: 3px" id=button-1026-frame1TC class="x-frame-tc x-btn-tc x-btn-default-small-tc x-btn-default-small-noicon-tc" role=presentation></TD>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: right -9px" id=button-1026-frame1TR class="x-frame-tr x-btn-tr x-btn-default-small-tr x-btn-default-small-noicon-tr" role=presentation></TD></TR>
<TR>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: 0px 0px" id=button-1026-frame1ML class="x-frame-ml x-btn-ml x-btn-default-small-ml x-btn-default-small-noicon-ml" role=presentation></TD>
<TD style="WIDTH: 82px; BACKGROUND-POSITION: 0px 0px" id=button-1026-frame1MC class="x-frame-mc x-btn-mc x-btn-default-small-mc x-btn-default-small-noicon-mc" role=presentation><EM id=button-1026-btnWrap><BUTTON hideFocus style="WIDTH: 82px; HEIGHT: 55px" id=button-1026-btnEl class=x-btn-center role=button type=button autocomplete="off"><SPAN style="WIDTH: 82px" id=button-1026-btnInnerEl class=x-btn-inner>Learn More</SPAN><SPAN id=button-1026-btnIconEl class="x-btn-icon "></SPAN></BUTTON></EM></TD>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: right 0px" id=button-1026-frame1MR class="x-frame-mr x-btn-mr x-btn-default-small-mr x-btn-default-small-noicon-mr" role=presentation></TD></TR>
<TR>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: 0px -12px" id=button-1026-frame1BL class="x-frame-bl x-btn-bl x-btn-default-small-bl x-btn-default-small-noicon-bl" role=presentation></TD>
<TD style="BACKGROUND-POSITION: 0px -3px; HEIGHT: 3px" id=button-1026-frame1BC class="x-frame-bc x-btn-bc x-btn-default-small-bc x-btn-default-small-noicon-bc" role=presentation></TD>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: right -15px" id=button-1026-frame1BR class="x-frame-br x-btn-br x-btn-default-small-br x-btn-default-small-noicon-br" role=presentation></TD></TR></TBODY></TABLE></DIV></DIV></DIV></DIV>
<DIV style="MARGIN: 0px; TOP: 215px; LEFT: 0px" id=container-1027 class="x-container x-box-item x-container-default x-box-layout-ct">
<DIV style="WIDTH: 241px; HEIGHT: 80px" id=container-1027-innerCt class="x-box-inner " role=presentation>
<DIV style="POSITION: absolute; WIDTH: 20000px; HEIGHT: 1px; TOP: 0px; LEFT: 0px" id=container-1027-targetEl>
<DIV style="BORDER-RIGHT-WIDTH: 1px; MARGIN: 0px; WIDTH: 77px; BORDER-TOP-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; TOP: 0px; LEFT: 0px" id=button-1028 class="x-btn y--home-button-distance y--home-button-size-small y--home-button-border-red y--home-button-gray x-box-item x-btn-default-small x-noicon x-btn-noicon x-btn-default-small-noicon">
<TABLE>
<TBODY>
<TR>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: 0px -6px" id=button-1028-frame1TL class="x-frame-tl x-btn-tl x-btn-default-small-tl x-btn-default-small-noicon-tl" role=presentation></TD>
<TD style="BACKGROUND-POSITION: 0px 0px; HEIGHT: 3px" id=button-1028-frame1TC class="x-frame-tc x-btn-tc x-btn-default-small-tc x-btn-default-small-noicon-tc" role=presentation></TD>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: right -9px" id=button-1028-frame1TR class="x-frame-tr x-btn-tr x-btn-default-small-tr x-btn-default-small-noicon-tr" role=presentation></TD></TR>
<TR>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: 0px 0px" id=button-1028-frame1ML class="x-frame-ml x-btn-ml x-btn-default-small-ml x-btn-default-small-noicon-ml" role=presentation></TD>
<TD style="WIDTH: 71px; BACKGROUND-POSITION: 0px 0px" id=button-1028-frame1MC class="x-frame-mc x-btn-mc x-btn-default-small-mc x-btn-default-small-noicon-mc" role=presentation><EM id=button-1028-btnWrap><BUTTON hideFocus style="WIDTH: 71px; HEIGHT: 55px" id=button-1028-btnEl class=x-btn-center role=button type=button autocomplete="off"><SPAN style="WIDTH: 71px" id=button-1028-btnInnerEl class=x-btn-inner>Reporting</SPAN><SPAN id=button-1028-btnIconEl class="x-btn-icon "></SPAN></BUTTON></EM></TD>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: right 0px" id=button-1028-frame1MR class="x-frame-mr x-btn-mr x-btn-default-small-mr x-btn-default-small-noicon-mr" role=presentation></TD></TR>
<TR>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: 0px -12px" id=button-1028-frame1BL class="x-frame-bl x-btn-bl x-btn-default-small-bl x-btn-default-small-noicon-bl" role=presentation></TD>
<TD style="BACKGROUND-POSITION: 0px -3px; HEIGHT: 3px" id=button-1028-frame1BC class="x-frame-bc x-btn-bc x-btn-default-small-bc x-btn-default-small-noicon-bc" role=presentation></TD>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: right -15px" id=button-1028-frame1BR class="x-frame-br x-btn-br x-btn-default-small-br x-btn-default-small-noicon-br" role=presentation></TD></TR></TBODY></TABLE></DIV>
<DIV style="BORDER-RIGHT-WIDTH: 1px; MARGIN: 0px; WIDTH: 68px; BORDER-TOP-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; TOP: 0px; LEFT: 87px" id=button-1029 class="x-btn y--home-button-distance y--home-button-size-small y--home-button-border-blue y--home-button-gray x-box-item x-btn-default-small x-noicon x-btn-noicon x-btn-default-small-noicon">
<TABLE>
<TBODY>
<TR>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: 0px -6px" id=button-1029-frame1TL class="x-frame-tl x-btn-tl x-btn-default-small-tl x-btn-default-small-noicon-tl" role=presentation></TD>
<TD style="BACKGROUND-POSITION: 0px 0px; HEIGHT: 3px" id=button-1029-frame1TC class="x-frame-tc x-btn-tc x-btn-default-small-tc x-btn-default-small-noicon-tc" role=presentation></TD>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: right -9px" id=button-1029-frame1TR class="x-frame-tr x-btn-tr x-btn-default-small-tr x-btn-default-small-noicon-tr" role=presentation></TD></TR>
<TR>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: 0px 0px" id=button-1029-frame1ML class="x-frame-ml x-btn-ml x-btn-default-small-ml x-btn-default-small-noicon-ml" role=presentation></TD>
<TD style="WIDTH: 62px; BACKGROUND-POSITION: 0px 0px" id=button-1029-frame1MC class="x-frame-mc x-btn-mc x-btn-default-small-mc x-btn-default-small-noicon-mc" role=presentation><EM id=button-1029-btnWrap><BUTTON hideFocus style="WIDTH: 62px; HEIGHT: 55px" id=button-1029-btnEl class=x-btn-center role=button type=button autocomplete="off"><SPAN style="WIDTH: 62px" id=button-1029-btnInnerEl class=x-btn-inner>Register</SPAN><SPAN id=button-1029-btnIconEl class="x-btn-icon "></SPAN></BUTTON></EM></TD>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: right 0px" id=button-1029-frame1MR class="x-frame-mr x-btn-mr x-btn-default-small-mr x-btn-default-small-noicon-mr" role=presentation></TD></TR>
<TR>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: 0px -12px" id=button-1029-frame1BL class="x-frame-bl x-btn-bl x-btn-default-small-bl x-btn-default-small-noicon-bl" role=presentation></TD>
<TD style="BACKGROUND-POSITION: 0px -3px; HEIGHT: 3px" id=button-1029-frame1BC class="x-frame-bc x-btn-bc x-btn-default-small-bc x-btn-default-small-noicon-bc" role=presentation></TD>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: right -15px" id=button-1029-frame1BR class="x-frame-br x-btn-br x-btn-default-small-br x-btn-default-small-noicon-br" role=presentation></TD></TR></TBODY></TABLE></DIV>
<DIV style="BORDER-RIGHT-WIDTH: 1px; MARGIN: 0px; WIDTH: 66px; BORDER-TOP-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; TOP: 0px; LEFT: 165px" id=button-1030 class="x-btn y--home-button-distance y--home-button-size-small y--home-button-border-gray y--home-button-gray x-box-item x-btn-default-small x-noicon x-btn-noicon x-btn-default-small-noicon">
<TABLE>
<TBODY>
<TR>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: 0px -6px" id=button-1030-frame1TL class="x-frame-tl x-btn-tl x-btn-default-small-tl x-btn-default-small-noicon-tl" role=presentation></TD>
<TD style="BACKGROUND-POSITION: 0px 0px; HEIGHT: 3px" id=button-1030-frame1TC class="x-frame-tc x-btn-tc x-btn-default-small-tc x-btn-default-small-noicon-tc" role=presentation></TD>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: right -9px" id=button-1030-frame1TR class="x-frame-tr x-btn-tr x-btn-default-small-tr x-btn-default-small-noicon-tr" role=presentation></TD></TR>
<TR>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: 0px 0px" id=button-1030-frame1ML class="x-frame-ml x-btn-ml x-btn-default-small-ml x-btn-default-small-noicon-ml" role=presentation></TD>
<TD style="WIDTH: 60px; BACKGROUND-POSITION: 0px 0px" id=button-1030-frame1MC class="x-frame-mc x-btn-mc x-btn-default-small-mc x-btn-default-small-noicon-mc" role=presentation><EM id=button-1030-btnWrap><BUTTON hideFocus style="WIDTH: 60px; HEIGHT: 55px" id=button-1030-btnEl class=x-btn-center role=button type=button autocomplete="off"><SPAN style="WIDTH: 60px" id=button-1030-btnInnerEl class=x-btn-inner>Improve</SPAN><SPAN id=button-1030-btnIconEl class="x-btn-icon "></SPAN></BUTTON></EM></TD>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: right 0px" id=button-1030-frame1MR class="x-frame-mr x-btn-mr x-btn-default-small-mr x-btn-default-small-noicon-mr" role=presentation></TD></TR>
<TR>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: 0px -12px" id=button-1030-frame1BL class="x-frame-bl x-btn-bl x-btn-default-small-bl x-btn-default-small-noicon-bl" role=presentation></TD>
<TD style="BACKGROUND-POSITION: 0px -3px; HEIGHT: 3px" id=button-1030-frame1BC class="x-frame-bc x-btn-bc x-btn-default-small-bc x-btn-default-small-noicon-bc" role=presentation></TD>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: right -15px" id=button-1030-frame1BR class="x-frame-br x-btn-br x-btn-default-small-br x-btn-default-small-noicon-br" role=presentation></TD></TR></TBODY></TABLE></DIV></DIV></DIV></DIV></DIV>



FF sample (obviously mainly done with divs)


<div role="presentation" class="x-box-inner " id="homenavigation-1021-innerCt" style="height: 356px; width: 540px;">
<div style="position:absolute;width:20000px;left:0px;top:0px;height:1px" id="homenavigation-1021-targetEl">
<div id="button-1022" style="border-width: 1px; left: 0px; top: 0px; margin: 0px;" class="x-btn y--home-button-distance y--home-button-size-large y--home-button-border-none y--home-button-red x-box-item x-btn-default-small x-noicon x-btn-noicon x-btn-default-small-noicon">
<em id="button-1022-btnWrap">
<button autocomplete="off" role="button" hidefocus="true" class="x-btn-center" type="button" id="button-1022-btnEl" style="height: 116px;">
<span style="" class="x-btn-inner" id="button-1022-btnInnerEl">Tracking Sheet</span><span class="x-btn-icon " id="button-1022-btnIconEl"></span>
</button></em></div>
<div id="container-1023" class="x-container x-box-item x-container-default x-box-layout-ct" style="left: 0px; top: 135px; margin: 0px;">
<div role="presentation" class="x-box-inner " id="container-1023-innerCt" style="width: 540px; height: 80px;"><div style="position:absolute;width:20000px;left:0px;top:0px;height:1px" id="container-1023-targetEl">
<div id="button-1024" style="border-width: 1px; left: 0px; top: 0px; margin: 0px;" class="x-btn y--home-button-distance y--home-button-size-small y--home-button-border-red y--home-button-gray x-box-item x-btn-default-small x-noicon x-btn-noicon x-btn-default-small-noicon">
<em id="button-1024-btnWrap">
<button autocomplete="off" role="button" hidefocus="true" class="x-btn-center" type="button" id="button-1024-btnEl" style="height: 57px;"><span style="" class="x-btn-inner" id="button-1024-btnInnerEl">Projects</span><span class="x-btn-icon " id="button-1024-btnIconEl"></span></button></em></div>
<div id="button-1025" style="border-width: 1px; left: 180px; top: 0px; margin: 0px;" class="x-btn y--home-button-distance y--home-button-size-small y--home-button-border-blue y--home-button-gray x-box-item x-btn-default-small x-noicon x-btn-noicon x-btn-default-small-noicon">
<em id="button-1025-btnWrap">
<button autocomplete="off" role="button" hidefocus="true" class="x-btn-center" type="button" id="button-1025-btnEl" style="height: 57px;"><span style="" class="x-btn-inner" id="button-1025-btnInnerEl">Sign In</span><span class="x-btn-icon " id="button-1025-btnIconEl"></span></button></em></div>
<div id="button-1026" style="border-width: 1px; left: 360px; top: 0px; margin: 0px;" class="x-btn y--home-button-distance y--home-button-size-small y--home-button-border-gray y--home-button-gray x-box-item x-btn-default-small x-noicon x-btn-noicon x-btn-default-small-noicon">
<em id="button-1026-btnWrap">
<button autocomplete="off" role="button" hidefocus="true" class="x-btn-center" type="button" id="button-1026-btnEl" style="height: 57px;"><span style="" class="x-btn-inner" id="button-1026-btnInnerEl">Learn More</span><span class="x-btn-icon " id="button-1026-btnIconEl"></span></button></em></div></div></div></div>
<div id="container-1027" class="x-container x-box-item x-container-default x-box-layout-ct" style="left: 0px; top: 215px; margin: 0px;">
<div role="presentation" class="x-box-inner " id="container-1027-innerCt" style="width: 540px; height: 80px;">
<div style="position:absolute;width:20000px;left:0px;top:0px;height:1px" id="container-1027-targetEl">
<div id="button-1028" style="border-width: 1px; left: 0px; top: 0px; margin: 0px;" class="x-btn y--home-button-distance y--home-button-size-small y--home-button-border-red y--home-button-gray x-box-item x-btn-default-small x-noicon x-btn-noicon x-btn-default-small-noicon"><em id="button-1028-btnWrap">
<button autocomplete="off" role="button" hidefocus="true" class="x-btn-center" type="button" id="button-1028-btnEl" style="height: 57px;"><span style="" class="x-btn-inner" id="button-1028-btnInnerEl">Reporting</span><span class="x-btn-icon " id="button-1028-btnIconEl"></span></button></em></div>
<div id="button-1029" style="border-width: 1px; left: 180px; top: 0px; margin: 0px;" class="x-btn y--home-button-distance y--home-button-size-small y--home-button-border-blue y--home-button-gray x-box-item x-btn-default-small x-noicon x-btn-noicon x-btn-default-small-noicon"><em id="button-1029-btnWrap">
<button autocomplete="off" role="button" hidefocus="true" class="x-btn-center" type="button" id="button-1029-btnEl" style="height: 57px;"><span style="" class="x-btn-inner" id="button-1029-btnInnerEl">Register</span><span class="x-btn-icon " id="button-1029-btnIconEl"></span></button></em></div>
<div id="button-1030" style="border-width: 1px; left: 360px; top: 0px; margin: 0px;" class="x-btn y--home-button-distance y--home-button-size-small y--home-button-border-gray y--home-button-gray x-box-item x-btn-default-small x-noicon x-btn-noicon x-btn-default-small-noicon">
<em id="button-1030-btnWrap">
<button autocomplete="off" role="button" hidefocus="true" class="x-btn-center" type="button" id="button-1030-btnEl" style="height: 57px;"><span style="" class="x-btn-inner" id="button-1030-btnInnerEl">Improve</span><span class="x-btn-icon " id="button-1030-btnIconEl"></span></button></em></div></div></div></div></div></div>

evant
9 Aug 2012, 4:41 AM
This is done on purpose. Older browser don't have support for CSS border radius, so to get a rounded frame we need to wrap it in these ugly elements to frame it. Unfortunate, but there's no point adding all that extra overhead for newer browsers that don't need it.

hiroprotagonist
9 Aug 2012, 5:55 AM
I expected that it is done on purpose and it does make sense to avoid this on newer browsers as it is surely cleaner. Have you any samples or documentation where the differences are?
ExtJs is not only used because it adds a lot to the table but certainly for reducing cross browser issues. I hope you have some hints for me.

thanks,
Hiro