i got a piece of html
<img style="cursor: pointer; width: auto; height: auto; display: inline;" src=".gif" alt="rapunzel" title="rapunzel" align="right">
and even if i set display: inline; in its style, when i'm trying to get its css display property like this:
alert($('img:first').css('display'))
or
var el=document.getElementsByTagName('img')[0]
alert(document.defaultView.getComputedStyle(el,null)['display'])
it always gives me value block.
what's wrong?
i got a piece of html
<img style="cursor: pointer; width: auto; height: auto; display: inline;" src="http://www.kidsgen./fables_and_fairytales/images/rapunzel.gif" alt="rapunzel" title="rapunzel" align="right">
and even if i set display: inline; in its style, when i'm trying to get its css display property like this:
alert($('img:first').css('display'))
or
var el=document.getElementsByTagName('img')[0]
alert(document.defaultView.getComputedStyle(el,null)['display'])
it always gives me value block.
what's wrong?
Share Improve this question edited Apr 13, 2013 at 23:49 İsmet Alkan 5,4474 gold badges43 silver badges64 bronze badges asked Apr 13, 2013 at 23:26 SuperYegoriusSuperYegorius 80410 silver badges26 bronze badges 2-
3
Use an inspector and trace the style, maybe there is a
display: block !importantsomewhere – David Nguyen Commented Apr 13, 2013 at 23:29 -
i've just checked image styles in firebug. there are no such styles as
display: block !importantordisplay: block– SuperYegorius Commented Apr 13, 2013 at 23:42
2 Answers
Reset to default 4The align='right' property assignment is causing the img element to have its display property set to 'block'. Your code without the align='right' propery will alert 'inline' on jsFiddle.
<body>
<img style="cursor: pointer; width: auto; height: auto; display: inline;" src="http://www.kidsgen./fables_and_fairytales/images/rapunzel.gif" alt="rapunzel" title="rapunzel" />
</body>
alert($('img:first').css('display')); // alerts 'inline'
A relevant piece of extra information is img tags are in fact inline elements by default. However, with align='right' set inside the img tag, I was unable to set the display property back to inline even by inserting this line of code:
$('img:first').css('display', 'inline');
Its because you have align="right" in the image tag;
That CSS rule is used to align block elements (Learn more).