Giving an inline element such as span a display of 'block' makes
it...display like a block element. Which means it will stretch to fit
its container (in this case the body), as all block elements do.
A few more thingsthat might help out:
If you want a block element to not do that, you can give it a specific
width, or else float it. Also, ditch the border="1" and replace it
with a border style (and preferably don't make the styles inline).
Most importantly, you can't have two elements with the same ID.
On Feb 11, 2:16 pm, surreal5335 <surrea...@hotmail.com> wrote:
> I went over a tutorial and I am using span and div tags to select the
> hover actions. the problem is both the div and the span elements dont
> end at the picture I am using, it is stretching all the way across
> screen. I was told before to use span to fix this problem over the <p>
> tag, which it workd then, but now it doesnt
>
> Here is my jquery :
>
> <script type="text/javascript">
>
> $(document).ready(function(){
> $("span").hover(function(){
> $("#stuff").animate({ height: 'hide', opacity: 'hide' }, 'slow');
> },function(){
> $("#stuff").animate({ height: 'show', opacity: 'show' }, 'slow');
> });
> })
>
> </script>
>
> <body>
>
> <span id="stuff" style="display: block" border="1">
> <img src="/image/excel.png">
> </span>
>
> <div id="stuff" style="display: block" border="1">
> <img src="/image/excel.png" style="display: block">
> </div>
> </body>
>
> Hope someone can shed some light on this continuing problem I keep
> having
> Thanks a lot
