IE6/7 doesn't support display: inline-block, IE6 doesn't support the child (parent > child) selector. So you probably should look into those points in your css...
kkyy
2009-03-25 12:39:33
A:
The parent > child issue sorted out a good few issues. Totally forgot about that thanks. But the main issue still exists.
kouPhax
2009-03-25 12:46:18
A:
Edit: I actually don't get correct rendering in IE8, which is what I address below:
For a start, you should put the <a> elements inside the elements rather than the other way round. Block level elements shouldn't really exist within inline elements. e.g.
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text"><a class="niw-button right-align" href="#">Cancel</a></div>
</div>
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text"><a class="niw-button" href="#">Cancel</a></div>
</div>
This fixes the positioning for me but there is a subsequent loss in styling. I haven't tinkered with the CSS to correct that yet but it should be straightforward. Secondly, you have an awful lot of classes to deal with a straightforward issue. Arguably you should only need one class in the outer div to identify what's happening inside, and then your CSS can descend from there.
Alistair Knock
2009-03-25 12:39:51
Then the entire button can't be clicked. Which breaks the solution slightly.
kouPhax
2009-03-25 12:46:54
It can be if styled correctly - the inner div for displayed icon is unnecessary as this style can be applied to the link itself, with appropriate padding all round and no margin on the a element. For the inner border, a span could be used on the link text.
Alistair Knock
2009-03-25 12:53:01
I tried that approach but it seems to cause the same amount of issues in IE6/7
kouPhax
2009-03-25 12:54:59
A:
I'm actually confused myself. How are they supposed to look? If you don't let us know what you're intending to do, it's very difficult to fix the problem.
shady
2009-03-25 12:42:58
+1
A:
EDIT: Now that I understand your image:
Just make your <a> elements block elements with display:block and put some kind of span inside of them to hold the icon. Or you could make the whole thing an image...
Perchik
2009-03-25 12:54:15
Actually I can't do that. The main container (in ym case the a) has a gradient background). The contents then needs to set an icon as it's background - it can't be one with one a set to block.
kouPhax
2009-03-25 13:00:11
Yes it can. Build the a with the gradient background. Put a span inside of it with the icon as the background. That's it.
Perchik
2009-03-25 13:51:58
Then you lose the inner border which is a requirement. I sort of resolved it by fixing the width of all buttons... should be acceptable for the customer. (finger crossed)
kouPhax
2009-03-25 14:01:00
I still don't see why you can't go with a simple flat image that changes on mouseover.
Perchik
2009-03-25 14:30:51
Because we have a large number of buttons each with differing Icons and text, each with variable widths. I tried the static approach and if I had to have 2 images per button (normal and hover) it would be like going back to the HTML of the early 90's
kouPhax
2009-03-26 08:19:58