CodingForums.com - View Single Post

Old Pedant · 10-05-2012, 08:35 PM

Hmmm...might be because the FLASH is in an <object> tag and the browser is treating that as a BLOCK element instead of an INLINE element?

You *MIGHT* be able to fix it using

Code:

<object style="display: inline;" ... >

If you weren't aware: <div>s and <form>s are block elements. Meaning they never will sit side by side, by default. <span>s and <input>s and <img>s are all inline elements, meaning they are all happy side by side.

Clearly in FF, Chrome, IE on Windows, <object> is treated as an inline element, but if any browser treated it as block element, then what you see makes sense.

Anyway, with CSS you can override the block/inline nature of any element by just specifying it as [icode]style="display: inline;"[/code] or style="display: block;"

But you could do yourself another big favor by NOT using absolute sizes for your widths. I already suggested using something like width: 85%; for your main image. Instead of the fixed 510px size for the <object> and small image, why not use something like width: 40%? Now your page will self adjust for any window size.

10-05-2012, 08:35 PM	PM User \| #9
Old Pedant Supreme Master coder! Join Date: Feb 2009 Posts: 23,248 Thanks: 59 Thanked 3,999 Times in 3,968 Posts	Hmmm...might be because the FLASH is in an <object> tag and the browser is treating that as a BLOCK element instead of an INLINE element? You MIGHT be able to fix it using Code: <object style="display: inline;" ... > If you weren't aware: <div>s and <form>s are block elements. Meaning they never will sit side by side, by default. <span>s and <input>s and <img>s are all inline elements, meaning they are all happy side by side. Clearly in FF, Chrome, IE on Windows, <object> is treated as an inline element, but if any browser treated it as block element, then what you see makes sense. Anyway, with CSS you can override the block/inline nature of any element by just specifying it as [icode]style="display: inline;"[/code] or `style="display: block;"` But you could do yourself another big favor by NOT using absolute sizes for your widths. I already suggested using something like width: 85%; for your main image. Instead of the fixed 510px size for the <object> and small image, why not use something like width: 40%? Now your page will self adjust for any window size. __________________ An optimist sees the glass as half full. A pessimist sees the glass as half empty. A realist drinks it no matter how much there is.