Help with a simple video player layout please

HTML & CSS
1

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:




<!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">
		
<!-- Video Holder --> 
        <div id='video-holder' rel='http://www.youtube.com/v/0Bmhjf0rKe8&amp;hl=en&amp;fs=1' title='The First Video'></div>
        
        <ul>
            <li rel='http://www.youtube.com/v/0Bmhjf0rKe8&amp;hl=en&amp;fs=1' title='The First Video'>video 1<br />Quick Title</li>
            <li rel='http://www.youtube.com/v/tgbNymZ7vqY&amp;hl=en&amp;fs=1' title='The Second Video'>video 2<br />Quick Title</li>

            <li rel='http://www.youtube.com/v/0Bmhjf0rKe8&amp;hl=en&amp;fs=1' title='The Third Video'>video 3<br />Quick Title</li>
            <li rel='http://www.youtube.com/v/tgbNymZ7vqY&amp;hl=en&amp;fs=1' title='The First Video'>video 4<br />Quick Title</li>
            <li rel='http://www.youtube.com/v/0Bmhjf0rKe8&amp;hl=en&amp;fs=1' title='The Second Video'>video 5<br />Quick Title</li>
            <li rel='http://www.youtube.com/v/tgbNymZ7vqY&amp;hl=en&amp;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

2

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

also always use full doctype.

try this


<!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">

<!-- Video Holder --> 
        <div id='video-holder' rel='http://www.youtube.com/v/0Bmhjf0rKe8&amp;hl=en&amp;fs=1' title='The First Video'></div>
		
        <div id="listing">
        <ul>
       <li rel='http://www.youtube.com/v/0Bmhjf0rKe8&amp;hl=en&amp;fs=1' title='The First Video'>video 1<br />Quick Title</li>
     <li rel='http://www.youtube.com/v/tgbNymZ7vqY&amp;hl=en&amp;fs=1' title='The Second Video'>video 2<br />Quick Title</li>
    <li rel='http://www.youtube.com/v/0Bmhjf0rKe8&amp;hl=en&amp;fs=1' title='The Third Video'>video 3<br />Quick Title</li>
    <li rel='http://www.youtube.com/v/tgbNymZ7vqY&amp;hl=en&amp;fs=1' title='The First Video'>video 4<br />Quick Title</li>
    <li rel='http://www.youtube.com/v/0Bmhjf0rKe8&amp;hl=en&amp;fs=1' title='The Second Video'>video 5<br />Quick Title</li>
      <li rel='http://www.youtube.com/v/tgbNymZ7vqY&amp;hl=en&amp;fs=1' title='The Third Video'>video 6<br />Quick Title</li>
        </ul>
</div>

</div>

</body>
</html>

vineet

3

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

4

thank you guys

5

I just run pages through

validator.w3.org
to spot those… just my 2c

6

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

7

So are there any templates out there for this?

My new Enzyte website.

8

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 :slight_smile: