17th January 2009

CSS: Targeting Safari 3 only

Although Safari 3 tends to render layouts the same as the other leading popular browsers, it prefers to use it’s “aqua” button styling for standard sized form buttons.

One solution for this is to set a dimension (width or height) to the button.

To target Safari 3 in CSS you can use the following to add or override any existing attributes, such as the height of a button:

@media screen and (-webkit-min-device-pixel-ratio:0) {
	button {
		height: 40px;
	}
}

If required, multiple selectors can be added into a single block.

Browsers CSS 1 Comment »

29th October 2008

CSS: Extra Button Padding in IE

Today at work I was asked how to remove the extra padding added to buttons (both the button tag and input[type=button]) in Internet Explorer.

The Problem:

In the example below there is a standard button with 10px padding on all sides. Internet explorer chooses to add additional horizontal padding:

The solution:

After coming across this problem myself in the past, I eventually remembered that there are two CSS styles you can add to fix this bug feature in IE:

button {
	width: auto;
	overflow: visible;
}

Browsers CSS 5 Comments »

Newer Entries »

Categories

Twitter

About Me

“I have a geek lifestyle, except geeks don’t have a life. Or style!”

Hi, my name is Steve and this is my blog. I am a web developer based in the United Kingdom. I like (X)HTML, CSS, Flash, ActionScript3, PHP, JavaScript, MySQL, [paste trendy words here] and Mapping APIs.