Menu
How to fix display:inline-block; on IE6 ?
My html Page http://www.faressoft.org/tutorialTools/slideShow/
can I get the same result in other way ?
567
An inline element will not accept height and width. It will just ignore it. So the height and width that you have entered in css will be ignored that is why the empty div is not visible. moreover try using inline-block, it will solve the issue.
The display: inline-block Value Compared to display: inline , the major difference is that display: inline-block allows to set a width and height on the element. Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not.
An inline-block elements will respect a width . People used to¹ build column layout systems with inline-block , because it basically can do what floats could do here, except without the need to worry about clearing the float², allowing people to take advantage of wrapping which happens a bit more elegantly than float.
display: inline means that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width.
You have to re-specify display:inline; on block level elements in your IE style sheets.
HTML:
<div class="ImageSlideShow">blah</div>
REGULAR CSS:
.ImageSlideShow { display:inline-block; }
IE CSS:
<!--[if lt IE 8]>
<style>
.ImageSlideShow { display:inline; zoom:1; }
</style>
<![endif]-->
See: http://work.arounds.org/using-inline-block-ie7-and-ie6/
BONUS:
You should also specify display:inline; for .ImageSlideShow .ImageNum {} to alleviate another IE bug.
177
* html p { display: inline; zoom: 1; }
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
In IE6 you can set display:inline-bock only to real inline elements like span or a.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
