a tag styles not working in ie6
-
28-06-2021 - |
Question
I have a page that displays two links side by side. This works on every browser except IE6. Here's the link to the fiddle. Does anyone know why this happens, and how to fix it?
Result on IE6:
Solution
That's because IE 7 and lower doesn't support display:inline-block
on a default block
element.
If you want an element with display:inline-block
you can:
- Use a default
inline
element (for example<span>
) and setdisplay:inline-block
to it - Use a default
block
element (for example<div>
) and setdisplay:inline
to it
You have <div>
elements, so you need:
<!--[if lte IE 7]>
<style type="text/css">
.dialog-button, .horizontal-dialog-divider {
display: inline;
}
</style>
<![endif]-->
See it here: http://jsfiddle.net/uQUTc/1/
It works on IE7, but maybe on IE6 this trick doesn't work (I don't have it so I can't test it).
But seriously, why are you programming for IE6? It's very old and it isn't a compliant browser.
Edit:
If you want to align the elements, you can use
.dialog-button,.horizontal-dialog-divider,.dialog-text{vertical-align:middle}
See it here: http://jsfiddle.net/uQUTc/3/
OTHER TIPS
Because IE6 doesn't support display: inline-block
.
I think you'd be better to use a list element, with float:left
<ul>
<li>Ok</li>
<li>Cancel</li>
</ul>
ul li {list-style:none; float:left; padding:10px}