Minor bit of HTML help required (relating to tables). (1 Viewer)

[pissypants]

Oh hai, can you help please?

MY HTML knowledge isn't great, but usually I can smush together some bits of code from other sources, tweak them and make it work.

So here's this page: http://www.legalaxie.net/index3.html

As you can see (unless you're on an apple mobile device) there's a soundcloud player under the logo at the top of the page.

However on apple devices that can't handle the flash, the page looks like this: https://www.dropbox.com/s/5bal04rn2w69qiq/photo (3).jpg

Notice how the disappearance of the flash-based player breaks the image. The cell containing the player is empty, and so all the other image slices fall out of place.

Can someone take a glance at the page's source code and suggest how I can make the cell hold it's size even if the flash-based audio player isn't loaded by an apple mobile device?

Thanks!

 

[dionsiseire]

Try putting

 

at the end of the soundcloud code before the closing of the column.

<td colspan="15">

<object height="18" width="100%"> <param name="movie" value="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F826601&amp;auto_play=false&amp;player_type=tiny&amp;font=Arial&amp;color=f562fb"></param> <param name="allowscriptaccess" value="always"></param> <param name="wmode" value="transparent"></param><embed wmode="transparent" allowscriptaccess="always" height="18" src="https://player.soundcloud.com/playe...yer_type=tiny&amp;font=Arial&amp;color=f562fb" type="application/x-shockwave-flash" width="71%"></embed> </object>&nbsp;</td>

 

[warcam]

Oh hai, can you help please?

MY HTML knowledge isn't great, but usually I can smush together some bits of code from other sources, tweak them and make it work.

So here's this page: http://www.legalaxie.net/index3.html

As you can see (unless you're on an apple mobile device) there's a soundcloud player under the logo at the top of the page.

However on apple devices that can't handle the flash, the page looks like this: https://www.dropbox.com/s/5bal04rn2w69qiq/photo (3).jpg

Notice how the disappearance of the flash-based player breaks the image. The cell containing the player is empty, and so all the other image slices fall out of place.

Can someone take a glance at the page's source code and suggest how I can make the cell hold it's size even if the flash-based audio player isn't loaded by an apple mobile device?

Thanks!

Stick a transparent gif in there of the exact dimensions associated with the player (spacer.gif is a common one).

 

[Theseus Mock]

You've specified that big image as a background image in a <div> but then there appears to a table with chunked pieces of the image(!) overlaid on top of it. Why not overlay your other elements on top of the main image?

 

[pissypants]

You've specified that big image as a background image in a <div> but then there appears to a table with chunked pieces of the image(!) overlaid on top of it. Why not overlay your other elements on top of the main image?

I did the page as image slices because it isn't a standard web font, and the specific colour of the main text required the use of graphic effects on the text to make it legible - so that's why they are rendered as image slices in cells, rather than text over a background image.

I wanted to use the transparency already inbuilt in the media player to stop it from having ugly background coloured corners, and found that by laying the original image behind it as a background, it filled the gaps in the image seamlessly. I was aware there was probably a better way to do this, but not with my very limited HTML knowledge.

So if I use just the background image, with no image slices overlaid, how is it possible to make the text links (that are actually images) work at the bottom of the page (at the moment I've only coded the "contact" link to work) without having to align images over the background image in a really fiddly manner.

Anyway, i guess what I'm saying is, how do I code it so that the cell containing the media player can be fixed at a specific size, regardless of whether or not the media player itself loads. (it would also need to be transparent, but I guess it would be, by default, anyway).

 

[pissypants]

Try putting

*

at the end of the soundcloud code before the closing of the column.

<td colspan="15">

<object height="18" width="100%"> <param name="movie" value="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F826601&auto_play=false&player_type=tiny&font=Arial&color=f562fb"></param> <param name="allowscriptaccess" value="always"></param> <param name="wmode" value="transparent"></param><embed wmode="transparent" allowscriptaccess="always" height="18" src="https://player.soundcloud.com/playe...alse&player_type=tiny&font=Arial&color=f562fb" type="application/x-shockwave-flash" width="71%"></embed> </object>*</td>

Stick a transparent gif in there of the exact dimensions associated with the player (spacer.gif is a common one).

Thanks both, will try these.
But wouldn't the spacer gif also take up room in the cell? I don't think the media player will float over it. I gues i need to figure out how to have a backround image in the cell...

 

[Theseus Mock]

Another thing to try, kick the flash based soundcloud embed off the page and use their HTML5 offering instead http://blog.soundcloud.com/2011/11/03/html5/

 

[pissypants]

Another thing to try, kick the flash based soundcloud embed off the page and use their HTML5 offering instead http://blog.soundcloud.com/2011/11/03/html5/

Good suggestion, and was already considered. The style of the html5 player is too lumbering for the page though.

 

[pissypants]

Stick a transparent gif in there of the exact dimensions associated with the player (spacer.gif is a common one).

Could you suggest the html for the spacer.gif in this code, and where to put it?:

<td colspan="15">
<object height="18" width="100%"> <param name="movie" value="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F826601&amp;auto_play=false&amp;player_type=tiny&amp;font=Arial&amp;color=f562fb"></param> <param name="allowscriptaccess" value="always"></param> <param name="wmode" value="transparent"></param><embed wmode="transparent" allowscriptaccess="always" height="18" src="https://player.soundcloud.com/player...p;color=f562fb" type="application/x-shockwave-flash" width="71%"></embed> </object></td>

 

[pissypants]

ok , in the end I got it by adding this to the cell properties:

<td width="pixels or percentage" height="pixels or percentage">
...</td>

 

[pete]

am actually amazed nobody weighed in with the "you don't use tables for layout" line

 

[pissypants]

am actually amazed nobody weighed in with the "you don't use tables for layout" line

You do when you know fuck all about HTML and Photoshop will do all the tabling work for you!

Here it is in all it's glory now: http://www.legalaxie.net/

 

[pete]

You do when you know fuck all about HTML and Photoshop will do all the tabling work for you!

Here it is in all it's glory now: http://www.legalaxie.net/

oh everyone does it, but you know how these things go...

 

[pissypants]

Had to change it back now. It's absolutely fucked looking in Internet explorer. Can any boffin tell me why?

www.legalaxie.net/index2.html

 

[warcam]

Had to change it back now. It's absolutely fucked looking in Internet explorer. Can any boffin tell me why?

www.legalaxie.net/index2.html

Try..
Fix the width and height of the cell, use a spacer as background.

<td width="x" height="y" style="background: url(spacer.gif) no-repeat center">soundcloud widget yoke </td>

or

<td width="x" height="y"><img src="spacer.gif" />soundcloud widget yoke</td>

The spacer should then take up full available width.

Problem with tables is so many apparently unrelated items on the page could be affecting it.
Auto generated html also tends to suck. If you can, try using the dreamweaver or something to create the html, at least it tries to use divs.

 

[pissypants]

Try..
Fix the width and height of the cell, use a spacer as background.

<td width="x" height="y" style="background: url(spacer.gif) no-repeat center">soundcloud widget yoke </td>

or

<td width="x" height="y"><img src="spacer.gif" />soundcloud widget yoke</td>

The spacer should then take up full available width.

Problem with tables is so many apparently unrelated items on the page could be affecting it.
Auto generated html also tends to suck. If you can, try using the dreamweaver or something to create the html, at least it tries to use divs.

Thanks I'll try giving every cell a specific dimension.
It looks perfect in every other browser, but absolutely fucked in IE.

 

[Theseus Mock]

okay, got your fix.

Stick this style attribute into your object tag:

<object style="display:block" height="18" width="100%">

 

[pissypants]

okay, got your fix.

Stick this style attribute into your object tag:

<object style="display:block" height="18" width="100%">

Thanks man. Did I do this correctly?

I changed it from:

<td colspan="18" width="606" height="18">
<object height="18" width="100%"> <param name="movie" value="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F826601&amp;auto_play=false&amp;player_type=tiny&amp;font=Arial&amp;color=f562fb"></param> <param name="allowscriptaccess" value="always"></param> <param name="wmode" value="transparent"></param><embed wmode="transparent" allowscriptaccess="always" height="18" src="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F826601&amp;auto_play=false&amp;player_type=tiny&amp;font=Arial&amp;color=f562fb" type="application/x-shockwave-flash" width="71%"></embed> </object><style="background-image: url('http://www.legalaxie.net/spacer.gif')</td>

to

<td colspan="18" width="606" height="18">
<object style="display:block" height="18" width="100%"> <param name="movie" value="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F826601&amp;auto_play=false&amp;player_type=tiny&amp;font=Arial&amp;color=f562fb"></param> <param name="allowscriptaccess" value="always"></param> <param name="wmode" value="transparent"></param><embed wmode="transparent" allowscriptaccess="always" height="18" src="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F826601&amp;auto_play=false&amp;player_type=tiny&amp;font=Arial&amp;color=f562fb" type="application/x-shockwave-flash" width="71%"></embed> </object><style="background-image: url('http://www.legalaxie.net/spacer.gif')</td>

.. and it was still gammy on Internet Explorer. Perfect in Chrome, and in Opera and Safari on an iPod touch.....

 

[Theseus Mock]

.. and it was still gammy on Internet Explorer. Perfect in Chrome, and in Opera and Safari on an iPod touch.....

Ah, that fix I posted was to fix the middle-center image being push down by the flash player in Firefox. So that's it looking okay in everything except IE? I just checked it in IE7 (in work here) and it's horribly mangled. I think it would be best to cut your losses and tell IE users to fuck off.

 

[pete]

I went to the doctor and said "It hurts when I do this." <raises arm above head> And the doctor said '"Well don't do it, then."

Wise words.