Help with a simple video player layout please

Printable View

Dec 19, 2009, 02:49
chris_stfc

Help with a simple video player layout please

Hi,

I'm trying to create a video player for my website. I've created it fine in IE, but in FF looks a bit all over the place:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Test</title> <style type="text/css"> body {background:#CCC; font:normal normal 12px Verdana, Arial, Helvetica, sans-serif;} #container {width:642px; padding:10px; border:#000 1px solid; background:#fff; color:#333; margin:0 auto;} #video-holder {width:320px; height:248px; display:block; border:#000 1px solid; float:left;} ul {float:right;} li {width:265px;list-style-type:none; border:#888 1px solid; padding:4px; margin:0 0 4px 0; background:#eee;} li {width:265px;list-style-type:none; border:#888 1px solid; padding:4px; margin:0 0 4px 0; background:#eee;} li:hover {background:#0066CC}; </style> </head> <body> <div id="container">  <div id='video-holder' rel='http://www.youtube.com/v/0Bmhjf0rKe8&hl=en&fs=1' title='The First Video'></div> <ul> <li rel='http://www.youtube.com/v/0Bmhjf0rKe8&hl=en&fs=1' title='The First Video'>video 1<br />Quick Title</li> <li rel='http://www.youtube.com/v/tgbNymZ7vqY&hl=en&fs=1' title='The Second Video'>video 2<br />Quick Title</li> <li rel='http://www.youtube.com/v/0Bmhjf0rKe8&hl=en&fs=1' title='The Third Video'>video 3<br />Quick Title</li> <li rel='http://www.youtube.com/v/tgbNymZ7vqY&hl=en&fs=1' title='The First Video'>video 4<br />Quick Title</li> <li rel='http://www.youtube.com/v/0Bmhjf0rKe8&hl=en&fs=1' title='The Second Video'>video 5<br />Quick Title</li> <li rel='http://www.youtube.com/v/tgbNymZ7vqY&hl=en&fs=1' title='The Third Video'>video 6<br />Quick Title</li> </ul> </div> </div> </body> </html>

Can anyone help please. I think i'm nearly there. Also in IE I use the li:hover method which works in FF but not IE. In this case is there a way around this as well?

Thank you very much
Dec 19, 2009, 04:42
vinpkl

you had closing </div> tag after </ul> but you dont have its opening tag <div> before <ul>

also always use full doctype.

try this

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <style type="text/css"> body{background:#CCC; margin:0px; padding:0px;} #container{width:642px; margin:0px auto; background-color:#FFffff; overflow:auto} #video-holder {width:320px; height:248px; display:block; border:#000 1px solid; float:left;} ul {margin-top:0px;} li {width:265px;list-style-type:none; border:#888 1px solid; padding:4px; margin:0 0 4px 0; background:#eee;} li {width:265px;list-style-type:none; border:#888 1px solid; padding:4px; margin:0 0 4px 0; background:#eee;} li:hover {background:#0066CC} #listing{float:left;} </style> </head> <body> <div id="container">  <div id='video-holder' rel='http://www.youtube.com/v/0Bmhjf0rKe8&hl=en&fs=1' title='The First Video'></div> <div id="listing"> <ul> <li rel='http://www.youtube.com/v/0Bmhjf0rKe8&hl=en&fs=1' title='The First Video'>video 1<br />Quick Title</li> <li rel='http://www.youtube.com/v/tgbNymZ7vqY&hl=en&fs=1' title='The Second Video'>video 2<br />Quick Title</li> <li rel='http://www.youtube.com/v/0Bmhjf0rKe8&hl=en&fs=1' title='The Third Video'>video 3<br />Quick Title</li> <li rel='http://www.youtube.com/v/tgbNymZ7vqY&hl=en&fs=1' title='The First Video'>video 4<br />Quick Title</li> <li rel='http://www.youtube.com/v/0Bmhjf0rKe8&hl=en&fs=1' title='The Second Video'>video 5<br />Quick Title</li> <li rel='http://www.youtube.com/v/tgbNymZ7vqY&hl=en&fs=1' title='The Third Video'>video 6<br />Quick Title</li> </ul> </div> </div> </body> </html>

vineet
Dec 19, 2009, 05:07
markbrown4

Quote:

Also in IE I use the li:hover method which works in FF but not IE. In this case is there a way around this as well?

IE6 only recognises :hover on anchors (a tags), if you're happy with the current style there's no reason why you couldn't add links to the list items and style those instead - which would work fine in IE6.

If you need to use hover on other elements - the simplest solution to get it working in IE6 would be to use a modified suckerfish script:
http://htmldog.com/articles/suckerfish/dropdowns/

There are other options too - here are two other good options.
http://code.google.com/p/ie7-js/
http://www.xs4all.nl/~peterned/csshover.html
Dec 19, 2009, 13:12
chris_stfc

thank you guys
Jan 6, 2010, 06:28
presotrader

I just run pages through

Quote:

validator.w3.org

to spot those... just my 2c
Jan 15, 2010, 13:27
EliJetson

Chris did you come up with all that code yourself or did you get a template from somewhere? I'm trying to create my own video player but don't really know where to start. Also I just ran my site through the validator presotrader posted and it says It has 26 errors lol.

Eli
Feb 28, 2010, 11:54
EliJetson

So are there any templates out there for this?

__________________________
My new Enzyte website.
Feb 28, 2010, 12:26
RyanReese

You could google for some templates, but I highly doubt he got his code from somewhere just because of the way the code is/looks :)