Multimedia for Firefox

[nEbulass -O p p aO p p a-]

My YouTube media bar won't appear for Firefox.
It works fine for Safari.

I have recently updated my Firefox to see if it would appear, but still no.
Does it have to do with the positioning in my code?

[Horntastic]

It's because of the large border you tried to put around the embed/object.
Try not to do anything but re-size the multimedia embed/object, as any properties like border or position or margins/padding tend to get applied twice on Firefox: once for the embed and once for the object. Make #multimedia 25px high then apply the border to that instead?

Oh, and you've kinda done some funny stuff with your borders and overflow...
In general, I try to avoid hiding html/body overflow, it makes the profile behave poorly in small windows.
Also putting borders around the html/body area is kinda odd and is probably why your media ends up so wide.
Idk this bit is just my 2 cents. n_n'

[nEbulass -O p p aO p p a-]

Horntastic

It's because of the large border you tried to put around the embed/object.
Try not to do anything but re-size the multimedia embed/object, as any properties like border or position or margins/padding tend to get applied twice on Firefox: once for the embed and once for the object. Make #multimedia 25px high then apply the border to that instead?

Oh, and you've kinda done some funny stuff with your borders and overflow...
In general, I try to avoid hiding html/body overflow, it makes the profile behave poorly in small windows.
Also putting borders around the html/body area is kinda odd and is probably why your media ends up so wide.
Idk this bit is just my 2 cents. n_n'

I want the media to be wide and fitting on the bottom of my profile. xD

"Make #multimedia 25px high then apply the border to that instead?"
Do you mean I should add 25px to the code I have now or change it to that specific one?

[Horntastic]

nEbulass -O p p aO p p a-

Horntastic

It's because of the large border you tried to put around the embed/object.
Try not to do anything but re-size the multimedia embed/object, as any properties like border or position or margins/padding tend to get applied twice on Firefox: once for the embed and once for the object. Make #multimedia 25px high then apply the border to that instead?

Oh, and you've kinda done some funny stuff with your borders and overflow...
In general, I try to avoid hiding html/body overflow, it makes the profile behave poorly in small windows.
Also putting borders around the html/body area is kinda odd and is probably why your media ends up so wide.
Idk this bit is just my 2 cents. n_n'

I want the media to be wide and fitting on the bottom of my profile. xD

"Make #multimedia 25px high then apply the border to that instead?"
Do you mean I should add 25px to the code I have now or change it to that specific one?

So, the media section has three main parts.
The main multimedia (#multimedia), the header (#multimedia h2), and the video (#multimedia embed/object).
Most browsers only regard the video as either embed or object, but Firefox seems to see it as both.
This means that when you apply certain properties to embed and object, Firefox doubles their effect.
For this reason, you should generally only apply sizing rules to the embed & object.
If you want to position the media, add borders, whatever, that needs to be done on the main #multimedia.

Basically, your media code-block needs to look like this:
(I also added better variable-width settings for the media so it should work on large monitors)

#multimedia {
border-top: 20px double black;
border-bottom: 20px double black;
position: absolute;
bottom: -95px;
left: -5px;
width: 100%!important;
background: transparent;
padding: 0px!important;
margin: 0!important;}
#multimedia embed, #multimedia object {
background: transparent!important;
width: 100%;
height: 25px;}
#site {
width: 100%; }

**because #site is a parent of #multimedia, you have to set its width to 100% before you can do #multimedia**

[nEbulass -O p p aO p p a-]

Horntastic

Basically, your media code-block needs to look like this:
(I also added better variable-width settings for the media so it should work on large monitors)

#multimedia {
border-top: 20px double black;
border-bottom: 20px double black;
position: absolute;
bottom: -95px;
left: -5px;
width: 100%!important;
background: transparent;
padding: 0px!important;
margin: 0!important;}
#multimedia embed, #multimedia object {
background: transparent!important;
width: 100%;
height: 25px;}
#site {
width: 100%; }

**because #site is a parent of #multimedia, you have to set its width to 100% before you can do #multimedia**

The bottom: -95px; was too low and the player didn't show up, just half the border. So I changed it to -55px; and it sort of looks fine now.
But then I viewed my profile on Safari and it showed me this - http://img708.imageshack.us/img708/9011/194075598422371183.png.

[Horntastic]

nEbulass -O p p aO p p a-

The bottom: -95px; was too low and the player didn't show up, just half the border. So I changed it to -55px; and it sort of looks fine now.
But then I viewed my profile on Safari and it showed me this - http://img708.imageshack.us/img708/9011/194075598422371183.png.

Gah I don't understand why it would do that ):
I think having the borders on html & body is a bad idea.
I tried putting them on #content and then making #site & #content 100% wide and tall, and that seems to be working?
http://www.gaiaonline.com/profiles/not_horntastic/5771010/
Major changes are to html/body (remove borders), #site, #content, and #multimedia.
You will have to reposition the other sections but at least it behaves the same on FF & Chrome/Safari now.

#profile {background: transparent; font-family: Arial; font-size: 6px; margin-top: 90px;}
#profile .avatar {filter: alpha(opacity=15) opacity: 0.15;}
#profile .avatar:hover {filter: alpha(opacity=90) opacity: 0.90;}
#avatar_menu, .pushBox {display:none !important;}

#gaia_header img {opacity: .8;}
#gaia_header #header_left,
#gaia_header #header_right {border-top: 10px double black; border-bottom: 10px double black; color: #000000;}
#gaia_header #header_left a:hover {color: grey!important; text-decoration: line-through; margin-top: 6px;}
#gaia_header #header_right a:hover {color: grey!important; text-decoration: line-through; margin-top: 6px;}
#gaia_header #header_left:after {content: '» NebuChi3~ '; color: #000000;}
#gaia_header a{color: #000000!important; filter:alpha(opacity=80) opacity: 0.8;}
#gaia_header #header_left {background: none;
color: #000000; font-family: Arial; font-size: 10px;}
#gaia_header #header_right {background: none;
color: #000000; font-family: Arial; font-size: 10px;}

html, body {cursor: crosshair;}
html, body {overflow: hidden; background: transparent url(http://ih1.redbubble.net/image.10503540.6563/sticker,375x360.png) fixed bottom left no-repeat;}


#site {width: 100%; height: 100%; position:absolute; margin: 0;}

#content {background:transparent; border: 15px double black; position: relative; padding: 0; top: -55px; height: 100%;}

#multimedia {border-top: 20px double black; border-bottom: 20px double black; position: absolute; bottom: -5px; left: 0px; height: 25px;
width: 100%!important; background: transparent; padding: 0px!important; margin: 0!important;}
#multimedia embed, #multimedia object {background: transparent!important; width: 100%; height: 25px;}

#about {border: 15px double black; margin-top: 25px; margin-left: 80px; width: 470px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;}

#friends {background: transparent; position: absolute; font-family: Arial; font-size: 15px; top: 35px; left: 200px; height: 450px; width: 130px; overflow: hidden; padding-right: 0px;}
#friendGroup {overflow: auto; overflow-x: hidden; height: 100%; width: 115%;}
#friendGroup li {filter: alpha(opacity=15) opacity: 0.15;}
#friendGroup li:hover {filter: alpha(opacity=90) opacity: 0.90;}

#details {font-family: Arial; font-size: 9px;}

#bar, #bar h2,
#about .links, #about h2, #alerts_banner,
#comments h2, #comments p, #comments,
#signature, #signature h2,
#journal, #journal h2, #journal h3,
#ignoreButton, #profile .caption,
#friendGroup h2, #commonFriends, #find_friends_banner, #friends .links,
#friends h2, #friends h3, #friends p,
#extendedProfileBody #header h1,
#multimedia h2,
#profile ul.items, #profile ul.items h2,
#wishlist, #wishlist h2,
#details h2, #details h3, #details hr,
#onlineButton, #offlineButton, #ignoreButton {display:none}

PS:
It's easy to make the Gaia logo white~
First, you need to invert the normal logo (I'd say MS paint but most image editors should be able to do it).
Then, upload it and use this code (after all your other header code):

#header_left {
background: transparent url(WHITE_LOGO_URL_HERE) 15px 0 no-repeat !important; }
#header_left img {
visibility: hidden; }
#header_left .spacer {
padding: 5px; }

EDIT
I just bumped into a property which could come in very handy for you.
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
The 100% size set combined with the box-sizing: border-box property could keep borders from adding unwanted width and therefore overflow to a section, which may be useful to you considering how you are trying to use borders and sizes here. If we could get such a property to work for us, you may not need to hide the overflow of html/body which would be a lot nicer stylistically if you ask me.
It is a CSS3 property which means it may not be supported in older IEs but I think that could be managed if you really care.
I've edited the code on my profile mule to reflect some thoughts on this, it seems to work well!
I managed to get rid of the hidden overflow for html & body - check the source of the page to see~
As expected though IE7 and possibly 8 don't like this property so you may be better off with the code I posted here... *sigh*