My CSS is screwing up SB, embedded video too small in window

classic Classic list List threaded Threaded
2 messages Options
JVK
Reply | Threaded
Open this post in threaded view
|

My CSS is screwing up SB, embedded video too small in window

JVK
I've been tinkering with my web site for the past couple days and modifying my CSS file. I did SOMETHING weird to upset Shadowbox but I have no idea what!

I have two pages with images that trigger embedded Vimeo and Youtube videos; the previous version of these pages on my server (with the older CSS file) work fine and the embeds fill up the Shaodwbox window (both sized to 640x360). But with my new CSS, the embedded video appears much smaller inside the SB window, almost like a picture-in-picture effect. I tested several variables and I'm pretty sure it's something I did in the new CSS file, perhaps interfering with a shadowbox.css rule?

Thanks in advance!

Here's all my code:

On the page - in the <head>:

<link rel="stylesheet" type="text/css" href="shadowbox-3.0.3/shadowbox.css">
<script type="text/javascript" src="shadowbox-3.0.3/shadowbox.js"></script><script type="text/javascript"> Shadowbox.init({ language: 'en', }); </script>
On the page - a sample Vimeo link:

rel="shadowbox;width=640;height=360" title="Conceptive Reel"
        href="http://player.vimeo.com/video/78032121?title=0&byline=0&portrait=0&color=f20020" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen
img src="images/Video_thumb_reel-2.jpg" alt="Reel" width="585" height="162" border="0"

(some <> tags removed so that images will not appear)

My full CSS code:

* {
        margin: 0;
        padding: 0px;
        width: auto;
        height: auto;
}

h1 {
        color: #fff;
        text-align: left;
        font-family: "source-sans-pro",sans-serif;
        font-style: normal;
        font-weight: 200;
        font-size: 36pt
}

p {
        font: 11pt/1.25 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
        color: #d4d4d4;
}

.p_italic {
        color: #f7d046;
        font: italic bold 12px/1.25 Georgia, "Times New Roman", Times, serif;
}

.p bold {
        color: #fff;
        font-weight: bold;
}

h2 {
        font: 18pt "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
        color: #fff;
}

#container{
        margin: auto;
        width: 960px;
        height: auto;
       
}

#header {
        width: 100%;
        background-color: #000;
}

#header_index {
        width: 100%;
        background-color: #fff;
}
#contents {
        top: 0px;
        padding-right: 30px;
        padding-left: 30px;
        padding-bottom: 0px;
        z-index: auto;
        position: relative;
        width: auto;
       
}
#contents_whats_new {
        top: 0px;
        padding-right: 0px;
        padding-left: 30px;
        padding-bottom: 0px;
        z-index: auto;
        position: relative;
        width: auto;
        height: 162px;
        padding-top: 0px;
        background-color: #000000;
        color: #FFFFFF;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 600;
        text-align: left;
        vertical-align: middle;
        line-height: 8em;
        font-size: 14pt;
}
#content_casestudy {
width: 910px;

}

#content_text_wide {
width: 900px;

}

#content_text {
        width: 100%;
        height: 83px;
        padding-bottom: 0px;
}

#content_text_work {
        width: auto;
        height: 80px;
        padding-bottom: 0px;
        background-image: url(images/background_work.jpg);
        padding-left: 30px;
        text-align: left;
        vertical-align: bottom;
}


#contents_image {
        position: relative;
        vertical-align: middle;
        left: 0px;
        right: 0px;
        width: 585px;
        float: right;
        /* [disabled]clear: none; */
}

#content_text_index {
        width: auto;
        position: relative;
        top: 20px;
        padding-left: 30px;
        padding-right: 30px;
        height: auto;
        color: #FFFFFF;
}

/* @group Nav container */

.subMenu {
        background-color: #9f0014;
}

#navcontainer {
        width: 100%;
        height: 40px;
        background-color: #f20020;
}
#navcontainer ul
{
        margin-left: 0;
        background-color: #f20020;
        color: #fff;
        float: left;
        list-style-type: none;
        padding-top: 4px;
        padding-bottom: 4px;
        font-family: "source-sans-pro",sans-serif;
        font-style: normal;
        font-weight: 600;
        font-size: 14pt;
        vertical-align: middle;
}



#navcontainer ul li
 {
        display: inline;
}



#navcontainer ul li a
{
background-color: #f20020;
color: White;
text-decoration: none;
float: left;
        border-right: 1px solid #fff;

        padding-right: 30px;
        padding-left: 30px;
}

#navcontainer ul li a:hover
{
background-color: #9f0015;
color: #fff;
}

#navcontainer ul li.last {
        border-right-style: none;
}

/* @end */

#footer {
        background-color: #000;
        height: 80px;
        padding-top: 20px;
        padding-left: 10px;
}

/* @group Small footer nav */



#footerlist li {
float: left;
        border-right: 1px dotted #a7a7a7;
        list-style-type: none;
}

#footerlist li a {
        color: #fff;
        font: 10pt "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
        padding-left: 15px;
        padding-right: 15px;
        text-decoration: none;
}



#footerlist li.last {
        border-right-style: none;
}



/* @end */

.bio_text {
                font: 10pt/1.25 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
        color: #d4d4d4;
}

.bio_text_bold {
        font-weight: bold;
        color: #fff;
}

.td_padded {
        padding: 8px;
}
#container #contents_bckgd #contents #content_text_wide table tr td p em {
        font-family: Georgia, Times New Roman, Times, serif;
}
#index_text {
        font-family: "Source Sans Pro";
        font-size: 32px;
        font-style: normal;
        font-weight: 300;
        color: #777777;
        padding-left: 214px;
        padding-right: 16px;
        padding-top: 10px;
        line-height: 1.5em;
}
JVK
Reply | Threaded
Open this post in threaded view
|

Re: My CSS is screwing up SB, embedded video too small in window

JVK
If it helps, here is the test page live on my site. It uses the newer CSS so you can see how screwed up all the Shadowbox windows are when you click on one of the videos:

http://conceptiveinc.com/work_test.html