Inline block doesn't work in internet explorer 7, 6 -
i have css code inline-block
. can tell me how make work in internet explorer 6 , 7. ideas? maybe i'm doing wrong? thank you!
#signup { color:#fff; border-bottom:solid 1px #444; text-transform:uppercase; text-align:center; } #signup #left { display: inline-block } #signup #right { background-image:url(images/signup.jpg); border-left: solid 1px #000; border-right: solid 1px #000; display: inline-block; padding:1% 2% width:16%; } #signup #right { font-size:100%; font-weight:bold } #signup #right p { font-size:90%; font-weight:bold } #signup a:hover { color:#fff; text-decoration:underline }
in ie6/ie7, display: inline-block
works on elements naturally inline (such span
s).
to make work on other elements such div
s, need this:
#yourelement { display: inline-block; *display: inline; zoom: 1; }
*display: inline
uses "safe" css hack apply only ie7 , lower.
for ie6/7, zoom: 1
provides haslayout. having "layout" prerequisite display: inline-block
work.
it possible apply workaround while keeping valid css, it's not worth thinking about, particularly if you're using vendor prefixed properties.
read this more information display: inline-block
(but forget -moz-inline-stack
, required ancient firefox 2).
Comments
Post a Comment