don't understand why this happens

hi all,
i am working on our web site www.thedarklurking.com

i am using css edit to create my css pages, and 2 different books, yes i am new to this and it is getting frustrating. i am editing on a mac with safari, i have done a few pages, uploaded them to the web and i can view them all as they appear to be created, on my friends laptop, he can't see all of the bio's, actually they roll overs don't even work, he is using pc internet explorer, and on my business partners, the trailer (although it is large) doesn't play either.
i have put the css code below which to you guys might be ugly and long, all i want to do is make a clean web site for our movie, and its getting disheartening.

bret


/* The Dark Lurking pagelayout and style */
/* page layout and colours*/

body {
background-color: black;
color: gray;
}

/*links styles*/

a:link {color: gray;
font: 20px "Courier New", Courier, mono;
}
a:visited {
color: darkgray;
}
a:hover {
color: red;
left: -1px;
}
/*front page boxes */
#introbox1 {
width: 1000px;
top: 50px;
left: 3cm;
height: auto;
position: relative;
}
#introbox2{

width: auto;
height: auto;
position: relative;
top: 300px;
left: -20px;
}
#introbox3{

width: 700px;
left: 3cm;
height: auto;
position: relative;
visibility: visible;
top: 40px;
color: #0f0;
border: 3px double #737373;
font: italic 25px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
margin: 5px;
padding: 5px;
text-align: center;
}



/*navigation header box*/
#headerbox {
width: 10in;
border: 1px groove white;
left: 3cm;
position: relative;
font-size: 35px;
height: .4in;
margin: 10px;
padding: 10px;
text-align: center;
}
/* index content box */
#indexbox {
width: auto;
height: auto;
visibility: visible;
margin: auto;
padding: 5px;
position: relative;
top: 10px;
}
/* intro content box 1 */
#introbox {
width: 10in;
height: auto;
padding: 10px;
visibility: visible;
border: 5px ridge gray;
position: relative;
left: 3.2cm;
}

/* actor profile roll overs */
#pix {position: absolute; top: 150px; left: 10px;}
dt {margin: 10px;}
img {border: none;}

/* mouseout state (default) hide larger pictures */
#pix a img.hid {
width: auto; height: auto;
position: absolute; top: -10px; left: 320px;
visibility: hidden;
}

/* mouse over state (hover) reveal larger pics */
#pix a img.hid { background: white;}
#pix a:hover img.hid { visibility: visible;}

 

can you post direct link to the page?
i am not able to access your site

 

I'm not able to access the site either, but I can guess from the code.

MSIE only supports :hover on anchor elements. You're trying to change the image's visibility when hovering over the anchor... I think you should ditch the images inside the anchors that you have and make them background images. Give an ID attribute to each of the LIs.

<ul id="nav">
<li id="home">
</ul>

That would work if you're using two images. A better method would be combining your hovered states and normal states into one image, and just change the position.

So if the dimensions were 100x20 then you could either go with 200x20 or 100x40 (whether you decide to put the hover state as vertical or horizontal).

If you had 100x20 dimensions and 100x40 image then just swap the position to bottom left if your hover state is on the bottom. Would be much easier seeing what you have though.