IE7 padding issue

MOH · 09-02-2011 7:08pm #1

I've got a number of buttons on a page which are set up as button > span > span (they're being generated that way, I can't control that).

I've got the buttons and nested spans styled with:

height: 0px;
overflow: hidden;

and on the buttons:

background-image: whatever;
width: AAApx;
padding-top: NNpx;

so the button image will be displayed and the text won't, but will still be available to bots and text browsers. (where AAA = image width, NN it's height).

This works fine on everything except IE, where the buttons aren't displaying. I'm assuming this is the IE box model issue, it's not adding the padding to the height. Except this is happening in IE7, with a valid doctype, which I thought had fixed this?

cormee · 10-02-2011 9:28am

MOH wrote: »
I've got a number of buttons on a page which are set up as button > span > span (they're being generated that way, I can't control that).

I've got the buttons and nested spans styled with:
height: 0px;
overflow: hidden;
and on the buttons:
background-image: whatever;
width: AAApx;
padding-top: NNpx;
so the button image will be displayed and the text won't, but will still be available to bots and text browsers. (where AAA = image width, NN it's height).

This works fine on everything except IE, where the buttons aren't displaying. I'm assuming this is the IE box model issue, it's not adding the padding to the height. Except this is happening in IE7, with a valid doctype, which I thought had fixed this?

Not sure I understand the situation fully, why is the span height set to 0?

Also have you tried display: inline-block with the button?

MOH · 10-02-2011 4:32pm

cormee wrote: »

Not sure I understand the situation fully, why is the span height set to 0?

Also have you tried display: inline-block with the button?

The button text is in the button background-image, but also in text in the span. I want to hide the text normally, hence the height:0/overflow:hidden (but it's still accessible to a text browser/bot).

I'll try the display - I'd actually just noticed that some anchors styled the same way work fine in IE, and I think they're display: block.

MOH · 10-02-2011 6:54pm

Meh, no joy. Forgetting about the embedded spans, which I don't think are the problem, try the following test (sorry about the inline CSS):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
</head>
<body>
<div style="width: 650px; height: 200px; background-color: red;">
	<div style="border: 0; height: 50px; width: 10px; float: left; background-color: blue;"></div>
	<button style="border-width: 0 1px 0 0 ; height: 50px; width: 100px; float: left " title="1" >1</button>
	<button style="border-width: 0 1px 0 0 ; height: 50px; width: 100px; float: left; padding: 10px 0 0 0" title="2">2</button>
	<button style="border-width: 0 1px 0 0 ; height:  0px; width: 100px; float: left; padding: 50px 0 0 0; overflow: hidden; " title="3">3</button>
	<button style="border-width: 0 1px 0 0 ; height:  0px; width: 100px; float: left; padding: 50px 0 0 0;; overflow: hidden; display: block" title="4">4</button>
	<button style="border-width: 0 1px 0 0 ; height:  0px; width: 100px; float: left; padding: 50px 0 0 0;; overflow: hidden; display: inline-block" title="5"></button>
	<div style="border: 0; height: 68px; width: 10px; float: left; background-color: blue;"></div>	
</div>	
</body>
</html>

FF renders 5 identical buttons, Chrome and Opera makes the last 3 a pixel higher (though I think that's just a default padding-bottom of 1px) but IE7 doesn't display the last 3 buttons at all.

Without a DOCTYPE, IE7 does display the last 3, but for some reason makes them about 68px high.

I think I'll just have to set a height in an IE specific stylesheet, I just thought for some reason that IE7 was better at this than 6.

[edit]
Looks like it's <button> specific - it works as expected for anchors.

matt-dublin · 10-02-2011 9:32pm

erm, im not sure what you're trying to achieve here?

can you explain what you're trying to do?

instead of using buttons would you not be better wrapping anchors around images and providing correct alt and title tags?

MOH · 11-02-2011 1:54am

matt-dublin wrote: »

erm, im not sure what you're trying to achieve here?

can you explain what you're trying to do?

instead of using buttons would you not be better wrapping anchors around images and providing correct alt and title tags?

Sorry, yeah, I'm not really explaining it very well.
It's a Magento site, so without messing around with tons of template files I can't really change the html that's being generated.

Most of the "buttons" on the screen are either anchors or <button> elements containing two nested spans (button > span > span), the inner one of which contains the button text. No idea why there's two spans.

I'm using background images on the anchor/button, and want to hide the text (but still have it visible to bots/text readers).

Setting {height:0; padding-top: 20px; overflow:hidden} will do the job nicely, making the anchor/button 20px high but hiding the text, in FF, Opera, and Chrome, text appears fine in Lynx.
It works fine for the anchors in IE7, but not the buttons.

Most, but not all of the buttons, have correct alt/title tags, but I can't rely on them being there.

It's just irritating that it works fine everywhere else and partly in IE, but there's something about the <button>s that's not working. And I don't know if I'm just doing something stupid or it's just IE being IE.

Something like {height: 20px; line-height: 999px; overflow: hidden} might do the same trick, I'll try that tomorrow.

Surely there's a common way of doing this? Other than writing the HTML properly

MOH · 11-02-2011 11:19am

Right, sorry for confusing everyone, I knew I was doing something stupid. A bit of sleep works wonders.

What I'm doing is fine for the <a>s, and works for them in all browsers, so that's grand.

For the <button><span><span> - I'm already applying the {height:0; overflow: hidden} to the inner span which contains the text, so that's already hidden. I don't actually need to do anything to the <button>, apart from set the height and apply the bkg image.

IE7 padding issue

Comments