Permalink
Browse files

Add special case for <button> and <input> buttons: if the border is n…

…on-zero width, even if transparent, then IE adds an extra opaque white 1px border-like thing inside the real border. To get rid of this we have to increase the padding by the border width and then remove the border altogether. Closes #18.
  • Loading branch information...
1 parent 9bc05ef commit 35fa81c5a6eacb03a07928683bfbdc18ff53ff41 Jason Johnston committed Jul 25, 2010
Showing with 80 additions and 39 deletions.
  1. +23 −4 sources/BorderRenderer.js
  2. +57 −35 sources/BorderStyleInfo.js
View
@@ -82,12 +82,30 @@ PIE.BorderRenderer = PIE.RendererBase.newRenderer( {
/**
* Hide the actual border of the element. In IE7 and up we can just set its color to transparent;
- * however IE6 does not support transparent borders so we have to get tricky with it.
+ * however IE6 does not support transparent borders so we have to get tricky with it. Also, some elements
+ * like form buttons require removing the border width altogether, so for those we increase the padding
+ * by the border size.
*/
hideBorder: function() {
var el = this.element,
- rs = el.runtimeStyle;
- if( PIE.isIE6 ) {
+ cs = el.currentStyle,
+ rs = el.runtimeStyle,
+ tag = el.tagName,
+ sides, side, i;
+
+ if( tag === 'BUTTON' || ( tag === 'INPUT' && el.type in { 'submit':1, 'button':1, 'reset':1 } ) ) {
+ rs.borderWidth = '';
+ sides = this.styleInfos.borderInfo.sides;
+ for( i = sides.length; i--; ) {
+ side = sides[ i ];
+ rs[ 'padding' + side ] = '';
+ rs[ 'padding' + side ] = parseInt( cs[ 'padding' + side ] ) +
+ parseInt( cs[ 'border' + side + 'Width' ] ) +
+ ( !PIE.isIE8 && i % 2 ? 1 : 0 ); //needs an extra horizontal pixel to counteract the extra "inner border" going away
+ }
+ rs.borderWidth = 0;
+ }
+ else if( PIE.isIE6 ) {
// Wrap all the element's children in a custom element, set the element to visiblity:hidden,
// and set the wrapper element to visiblity:visible. This hides the outer element's decorations
// (background and border) but displays all the contents.
@@ -106,7 +124,8 @@ PIE.BorderRenderer = PIE.RendererBase.newRenderer( {
el.appendChild( cont );
rs.visibility = 'hidden';
}
- } else {
+ }
+ else {
rs.borderColor = 'transparent';
}
},
View
@@ -16,40 +16,41 @@ PIE.BorderStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
var w = {},
s = {},
c = {},
- el = this.element,
- cs = el.currentStyle,
- rs = el.runtimeStyle,
- rtColor = rs.borderColor,
- i = 0,
active = false,
- colorsSame = true, stylesSame = true, widthsSame = true,
- style, color, width, lastStyle, lastColor, lastWidth, side, ltr;
-
- rs.borderColor = '';
- for( ; i < 4; i++ ) {
- side = this.sides[ i ];
- ltr = side.charAt(0).toLowerCase();
- style = s[ ltr ] = cs[ 'border' + side + 'Style' ];
- color = cs[ 'border' + side + 'Color' ];
- width = cs[ 'border' + side + 'Width' ];
-
- if( i > 0 ) {
- if( style !== lastStyle ) { stylesSame = false; }
- if( color !== lastColor ) { colorsSame = false; }
- if( width !== lastWidth ) { widthsSame = false; }
- }
- lastStyle = style;
- lastColor = color;
- lastWidth = width;
+ colorsSame = true,
+ stylesSame = true,
+ widthsSame = true;
+
+ this.withActualBorder( function() {
+ var el = this.element,
+ cs = el.currentStyle,
+ i = 0,
+ style, color, width, lastStyle, lastColor, lastWidth, side, ltr;
+ for( ; i < 4; i++ ) {
+ side = this.sides[ i ];
- c[ ltr ] = new PIE.Color( color );
+ ltr = side.charAt(0).toLowerCase();
+ style = s[ ltr ] = cs[ 'border' + side + 'Style' ];
+ color = cs[ 'border' + side + 'Color' ];
+ width = cs[ 'border' + side + 'Width' ];
- width = w[ ltr ] = new PIE.Length( s[ ltr ] === 'none' ? '0' : ( this.namedWidths[ width ] || width ) );
- if( width.pixels( this.element ) > 0 ) {
- active = true;
+ if( i > 0 ) {
+ if( style !== lastStyle ) { stylesSame = false; }
+ if( color !== lastColor ) { colorsSame = false; }
+ if( width !== lastWidth ) { widthsSame = false; }
+ }
+ lastStyle = style;
+ lastColor = color;
+ lastWidth = width;
+
+ c[ ltr ] = new PIE.Color( color );
+
+ width = w[ ltr ] = new PIE.Length( s[ ltr ] === 'none' ? '0' : ( this.namedWidths[ width ] || width ) );
+ if( width.pixels( this.element ) > 0 ) {
+ active = true;
+ }
}
- }
- rs.borderColor = rtColor;
+ } );
return active ? {
widths: w,
@@ -64,14 +65,35 @@ PIE.BorderStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
getCss: function() {
var el = this.element,
cs = el.currentStyle,
- rs = el.runtimeStyle,
- rtColor = rs.borderColor,
css;
- rs.borderColor = '';
- css = cs.borderWidth + '|' + cs.borderStyle + '|' + cs.borderColor;
- rs.borderColor = rtColor;
+ this.withActualBorder( function() {
+ css = cs.borderWidth + '|' + cs.borderStyle + '|' + cs.borderColor;
+ } );
return css;
+ },
+
+ /**
+ * Execute a function with the actual border styles (not overridden with runtimeStyle
+ * properties set by the renderers) available via currentStyle.
+ * @param fn
+ */
+ withActualBorder: function( fn ) {
+ var rs = this.element.runtimeStyle,
+ rsWidth = rs.borderWidth,
+ rsStyle = rs.borderStyle,
+ rsColor = rs.borderColor,
+ ret;
+
+ rs.borderWidth = rs.borderStyle = rs.borderColor = '';
+
+ ret = fn.call( this );
+
+ rs.borderWidth = rsWidth;
+ rs.borderStyle = rsStyle;
+ rs.borderColor = rsColor;
+
+ return ret;
}
} );

0 comments on commit 35fa81c

Please sign in to comment.