Buttons inside td-element look stretched in IE6

[Marko Gronroos]

The buttons look a bit stretched in IE6 and their dark border isn't too pretty.

[Marko Gronroos]

Image showing stretched buttons

[Jouni Koivuviita]

This is a known issue with IE/XP. Native buttons (using the button element) with long text will always look like this, we can't fix them. Custom themes can override the native look of the buttons, but we won't be fixing these to the default theme.

[Joonas Lehtinen]

Proposed fix: change those particular buttons to links. Magi, could you do this?

[Marc Englund]

"Fixed" in [4941] (buttons changed to link-style)

[Mauno Haukila]

Button strethes only if it's inside td-element.
It can be fixed by setting .

* html .i-button {
  width:1px;
  overflow: visible;
}

[Joonas Lehtinen]

Reopening to ensure that Maunos fix will get applied

[Mauno Haukila]

I didn't meant it should be fixed to toolkit. I just commented so that this hack can be found with search.
Note that this fixes ie6 only. Ie7 has same bug but this fix can make it worse (thus * html).
It depends on layout, example it broke all Vertical-OrderedLayouts? where Buttons where right_aligned (ie7 only). Buttons rendered too far so I had to add ie7 specific hack to that situation ;) (position: relative, left: -50px).
Ie8beta1 works without this hack (and breakes if applied).

[Joonas Lehtinen]

We could inject

 width:1px;
  overflow: visible;

Directly to style-attribute of button-element in javascript only in IE6. Would this be the correct way to go?

[Mauno Haukila]

No need to inject (* html works only with ie6).
IE7 is still affected to the same bug, it needs "overflow:visible" to be partially fixed. It still makes containing td-element too big:

[Marc Englund]

Sort of fixed in [5012] (MAunos last comment, "makes containing td-element too big" not fixed)

/* fixes streched buttons in IE6 */
* html .i-button {
	overflow: visible;
	padding-left: 10px;
	padding-right: 10px;
}
/* fixes streched buttons in IE7 */
*+html .i-button {
	overflow: visible;
	padding-left: 10px;
	padding-right: 10px;
}

[Joonas Lehtinen]

Did you test this on IE8-beta1?

Also, please test with [5013] that makes quite a few changes to button.css

[Marc Englund]

Clarifying current state of this:

IE6: ok IE7: button _looks_ ok, but reserves too much space; no known fix for this yet

Not tested with any beta browsers.

[Marc Englund]

More: known fixes only work in quirksmode, like this one: http://jehiah.cz/sandbox/button.html

[Marc Englund]

Fixed in [5020] (!)

[Joonas Lehtinen]

Reopening as the buttons still looks horrible in IE6/IE7. See screenshot. Test with #1921 test app.

[Marc Englund]

We do not currently have a fix for this; a workaround would be to make IE use the unthemed windows buttons, but since other controls (e.g NativeSelect?) are using the themed variant, the UI would be somewhat inconsistent.

Also note that this is only a problem if you make huge buttons.

[Marc Englund]

Windows real native vs. themed button

[Joonas Lehtinen]

Then - no can do. Most probably there is no need for button.setSizeFull() anyways.