The MU forums have moved to WordPress.org

WordPress MU Forums » Plugins and Hacks

Video Plugin Throws Design/Formatting Out of Whack in Firefox (5 posts)

  1. trivum
    Member
    Posted 16 years ago #

    I'm not sure if this is a plugin problem or a css problem, so I'll post it here.

    I have been trying various video plugins lately, but they all end up layering the video on top of other content when viewed in FIREFOX (Internet Explorer is okay).

    I've searched for answers both here and on the regular WP forums. I've found a number of people who have videos doing similar things, but the "answer" is invariably to use a plugin like coolplayer or viper quicktags. They don't solve anything for me however. In fact, I'm wondering if they are the problem.

    Of the two plugins, viper seems to be "better" for my design problem. It at least keeps the video in the general area of the content section (although it layers on top of any text there, and it layers down past the bottom of the post). Coolplayer shoots the video all the way to right, completely out of the content section into the side bar.

    Any suggestions for this? As I mentioned, everything is fine in Internet Explorer. The problem only occurs in Firefox. ... Might there be some CSS I could put in my css file only for Firefox?

    Thanks for any help/suggestions.

  2. peiqinglong
    Member
    Posted 16 years ago #

    it sounds like a CSS issue. Without actually seeing your site or the CSS it will be hard to trouble shoot. Also, IMO, it would be better to code for Firefox andthen make it IE compatble rather than code for IE and try to make Firefox compatible. You'll find yourself with less headaches. If Firefox is displaying your site wrong, there is a good chance Safari will be displaying it wrong also.

  3. theapparatus
    Member
    Posted 16 years ago #

    Agreed. Providing a link so we can see what is occurring would be a plus. (And is mentioned in the debugging script linked to from the readme file included with your download.)

  4. trivum
    Member
    Posted 16 years ago #

    Thanks for the feedback. I think it is, indeed, a CSS problem. I have been modifying the CSS of Brian Gardner's Blue Zinfandel 3-column, and so I thought I might have done something to it, but I also have the same problem when I switch to an unmodified version. I tried a completely different theme (something I should have thought to do earlier), and the problem went away. So it looks like the problem is in the theme somewhere.

    My site is closed off to public viewing as I try to build it, so I've thrown up a screenshot on a geocities page: http://www.geocities.com/avum5000/

    I'll also include the original css from the blue-zinfandel theme here to see if anyone can spot something that might be causing the problem. Thanks again for the help.

    /*
    Theme Name: BlueZin
    Theme URL: http://www.briangardner.com/themes/blue-zinfandel-wordpress-theme.htm
    Description: Blue Zinfandel 3-Column is a modern theme created for Wordpress.
    Author: Brian Gardner
    Author URI: http://www.briangardner.com
    Version: 1.0

    The CSS, XHTML and design is released under GPL:
    http://www.opensource.org/licenses/gpl-license.php

    Changelog:
    v1.0 - 05.16.07
    First Release of Blue Zinfandel 3-Column
    */

    body {
    background: #EFEFEF url(images/content.gif) top center repeat-y;
    color: #333333;
    font-size: 11px;
    font-family: Verdana, Helvetica, Sans-Serif;
    margin: 0px auto 0px;
    padding: 0px;
    }

    #wrap {
    background: #EFEFEF url(images/bg.gif) top center repeat-y;
    color: #333333;
    font-size: 11px;
    font-family: Verdana, Helvetica, Sans-Serif;
    margin: 0px auto 0px;
    padding: 0px;
    }

    /************************************************
    * Hyperlinks *
    ************************************************/

    a, a:visited{
    color: #507AA5;
    text-decoration: none;
    }

    a:hover{
    text-decoration: underline;
    }

    /************************************************
    * Header *
    ************************************************/

    #header {
    background: #FFFFFF;
    width: 960px;
    margin: 0px auto 0px;
    padding: 10px 0px 10px 0px;
    text-align: center;
    border-top: 5px solid #658DB5;
    text-transform: uppercase;
    }

    #header a {
    font-family: Times New Roman, Helvetica, Sans-Serif;
    font-size: 48px;
    color: #333333;
    text-decoration: none;
    padding: 0px 10px 0px 10px;
    margin: 0px;
    text-transform: uppercase;
    }

    #header a:hover{
    color: #333333;
    }

    /************************************************
    * Navbar *
    ************************************************/

    #navbar {
    background: #FFFFFF;
    width: 960px;
    margin: 0px auto 0px;
    padding: 10px 0px 10px 0px;
    text-align: center;
    border-top: 1px solid #C0C0C0;
    border-bottom: 1px solid #C0C0C0;
    }

    #navbar li {
    display: inline;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    }

    #navbar ul {
    margin: 0px;
    padding: 0px;
    }

    #navbar ul li a {
    font-family: Times New Roman, Helvetica, Sans-Serif;
    font-size: 22px;
    color: #333333;
    padding: 0px 10px 0px 10px;
    margin: 0px;
    text-decoration: none;
    text-transform: uppercase;
    }

    #navbar ul li a:hover {
    color: #658DB5;
    }

    /************************************************
    * Left Sidebar *
    ************************************************/

    #l_sidebar {
    float: left;
    width: 220px;
    margin: 0px 20px 0px 0px;
    padding: 20px 0px 20px 0px;
    display: inline;
    }

    #l_sidebar ul {
    list-style: none;
    margin: 0px;
    padding: 0px 0px 20px 0px;
    }

    #l_sidebar li {
    list-style: none;
    margin: 0px;
    padding: 0px;
    }

    #l_sidebar ul li {
    margin: 0px;
    padding: 5px 0px 0px 0px;
    }

    #l_sidebar ul li a {
    color: #507AA5;
    text-decoration: none;
    }

    #l_sidebar ul li a:hover {
    color: #507AA5;
    text-decoration: underline;
    }

    /************************************************
    * Right Sidebar *
    ************************************************/

    #r_sidebar {
    float: right;
    width: 220px;
    margin: 0px 0px 0px 0px;
    padding: 20px 0px 0px 0px;
    display: inline;
    }

    #r_sidebar p{
    padding: 2px 0px 16px 0px;
    margin: 0px;
    line-height: 20px;
    }

    #r_sidebar ul {
    list-style: none;
    margin: 0px;
    padding: 0px 0px 20px 0px;
    }

    #r_sidebar ul li {
    margin: 0px;
    padding: 5px 0px 0px 0px;
    }

    #r_sidebar ul li a {
    color: #507AA5;
    text-decoration: none;
    }

    #r_sidebar ul li a:hover {
    color: #507AA5;
    text-decoration: underline;
    }

    /************************************************
    * Content *
    ************************************************/

    #content {
    width: 960px;
    margin: 0px auto 0px;
    padding: 0px;
    }

    #content p{
    padding: 0px 0px 15px 0px;
    margin: 0px;
    line-height: 20px;
    }

    #content p img{
    float: left;
    border: none;
    margin-right: 15px;
    margin-bottom: 10px;
    }

    #content h1 {
    color: #333333;
    font-size: 22px;
    font-family: Times New Roman, Verdana, Arial, Sans-Serif;
    font-weight: normal;
    padding: 0px 0px 0px 0px;
    margin: 0px;
    }

    #content h1 a {
    color: #333333;
    text-decoration: none;
    }

    #content h1 a:hover {
    color: #658DB5;
    text-decoration: none;
    }

    #content h2 {
    color: #333333;
    font-size: 14px;
    font-family: Times New Roman, Verdana, Arial, Sans-Serif;
    font-weight: bold;
    padding: 5px 0px 5px 0px;
    margin: 0px;
    border-top: 1px dotted #C0C0C0;
    border-bottom: 1px dotted #C0C0C0;
    }

    blockquote{
    margin: 0px 25px 15px 25px;
    padding: 0px 25px 0px 10px;
    background: #E8E8E8;
    border-top: 2px solid #000000;
    border-bottom: 1px solid #000000;
    }

    #content blockquote p{
    margin: 0px 0px 10px 0px;
    padding: 10px 0px 0px 0px;
    }

    #contentmiddle {
    float: left;
    width: 440px;
    margin: 0px 0px 0px 0px;
    padding: 20px 20px 10px 20px;
    display: inline;
    }

    #contentmiddle p img{
    float: left;
    border: none;
    margin-right: 15px;
    margin-bottom: 10px;
    }

    #contentmiddle ol{
    margin: 0px 0px 0px 20px;
    padding: 0px 0px 10px 0px;
    }

    #contentmiddle ol li{
    margin: 0px 0px 0px 20px;
    padding: 0px 0px 5px 0px;
    }

    #contentmiddle ul{
    list-style-type: square;
    margin: 0px 0px 0px 20px;
    padding: 0px 0px 10px 0px;
    }

    #contentmiddle ul li{
    list-style-type: square;
    margin: 0px 0px 0px 20px;
    padding: 0px 0px 5px 0px;
    }

    .contentdate {
    background: #FFFFFF url(images/date.gif);
    float: left;
    width: 45px;
    height: 50px;
    margin: 0px;
    padding: 0px;
    }

    .contentdate h3 {
    color: #FFFFFF;
    font-size: 10px;
    font-weight: normal;
    padding: 1px 0px 0px 10px;
    margin: 0px;
    text-transform: uppercase;
    }

    .contentdate h4 {
    font-family: Times New Roman, Helvetica, Sans-Serif;
    color: #999999;
    font-size: 21px;
    font-weight: bold;
    padding: 5px 4px 0px 0px;
    margin: 0px;
    text-align: center;
    }

    .contenttitle {
    float: left;
    width: 385px;
    margin: 0px;
    padding: 0px 0px 0px 10px;
    }

    #content img.wp-smiley {
    float: none;
    border: none;
    padding: 0px;
    margin: 0px;
    }

    #content img.wp-wink {
    float: none;
    border: none;
    padding: 0px;
    margin: 0px;
    }

    .postspace {
    background: #EFEFEF url(images/spacer.gif);
    width: 440px;
    height: 32px;
    margin: 0px;
    padding: 0px;
    }

    /************************************************
    * Footer *
    ************************************************/

    #footer {
    background: #FFFFFF;
    width: 960px;
    margin: 0px auto 0px;
    padding: 10px 0px 10px 0px;
    text-align: center;
    border-top: 1px solid #C0C0C0;
    }

    /************************************************
    * Search Form *
    ************************************************/

    #searchdiv {
    margin: 0px;
    padding 0px;
    }

    #searchform {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    }

    #s {
    width: 190px;
    background: #EFEFEF url(images/search.gif);
    color: #333333;
    font-size: 11px;
    font-family: Verdana, Helvetica, Sans-Serif;
    padding: 3px;
    margin: 8px 0px 0px 0px;
    border: 1px solid #C0C0C0;
    }

    /************************************************
    * Comments *
    ************************************************/

    #commentblock {
    width: 400px;
    background: #EFEFEF;
    color: #000000;
    float: left;
    padding: 20px 20px 10px 20px;
    margin: 10px 0px 0px 0px;
    border-top: 2px solid #000000;
    border-bottom: 1px solid #000000;
    }

    #commentblock ol{
    list-style-type: square;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 10px 0px;
    }

    .commentdate {
    font-size: 12px;
    padding-left: 0px;
    }

    #commentlist li p{
    margin-bottom: 8px;
    line-height: 20px;
    padding: 0px;
    }

    .commentname {
    color: #333333;
    margin: 0px;
    padding: 5px 5px 5px 0px;
    }

    .commentinfo{
    clear: both;
    }

    .commenttext {
    clear: both;
    margin: 3px 0px 10px 0px;
    padding: 20px 10px 5px 10px;
    width: 350px;
    background: #FFFFFF url(images/comment.gif) no-repeat top;
    }

    .commenttext-admin {
    clear: both;
    margin: 3px 0px 10px 0px;
    padding: 20px 10px 5px 10px;
    width: 350px;
    background: #FFFFFF url(images/comment.gif) no-repeat top;
    }

    #commentsformheader{
    padding-left: 0px;
    }

    #commentsform{
    text-align: center;
    margin: 0px;
    padding: 0px;
    }

    #commentsform form{
    text-align: left;
    margin: 0px;
    }

    #commentsform p{
    margin: 0px;
    }

    #commentsform form textarea{
    width: 99%;
    }

    p.comments_link img{
    margin: 0px;
    padding: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    }

  5. trivum
    Member
    Posted 16 years ago #

    Anyone who might know how to fix this? Thanks.

About this Topic