Topic: Works in Safari but not Firefox (tried setting height/width in CSS)

I've read the forums and set the height and width in the css, but the gallery will not show up.

Any suggestions? Here's my html and css.

<!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" lang="en" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Title</title>
        <link rel="stylesheet" href="css/portfolio3.css" type="text/css" media="all" />
        <!--[if IE 6]>
        <link rel="stylesheet" href="css/ie6.css" type="text/css" media="all" />
        <![endif]-->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
        <script type="text/javascript">
            var flashvars = {};
            flashvars.galleryURL = "gallery.xml";
            var params = {};        
            params.wmode = "transparent";
            params.allowfullscreen = true;
            params.allowscriptaccess = "always";
            params.bgcolor = "222222";
            swfobject.embedSWF("simpleviewer.swf", "flashContent", "100%", "100%", "9.0.124", false, flashvars, params);
        </script>
    </head>
    <body>
<div class="shell">
        <!-- Header -->
        <div id="header">
            <!-- Navigation -->
            <div id="navigation">
                <ul>
                    <li><a href="#" class="active"><span><em>Home</em></span></a></li>
                    <li><a href="#"><span><em>About</em></span></a></li>
                    <li><a href="#"><span><em>Portfolio</em></span></a></li>
                    <li><a href="#"><span><em>Blog</em></span></a></li>
                    <li class="last"><a href="#"><span><em>Contact</em></span></a></li>
                </ul>
            </div>
            <!-- END Navigation -->
            <!-- Logo & Description -->
            <h1 id="logo"><img src="css/images/pamela.png" /></h1>
            <!-- END Logo & Description -->
            <div class="cl">&nbsp;</div>
        </div>
        <!-- END Header -->    
        <!-- Features -->
        <div id="features">
        <div id="flashContent">SimpleViewer requires JavaScript and the Flash Player. <a href="http://get.adobe.com/flashplayer/">Get Flash</a>
        </div>
            <div class="cl">&nbsp;</div>
        </div>
        <!-- END Features -->
        <div class="cl">&nbsp;</div>
        <!-- Content -->
        <div id="content">
            <div class="cl">&nbsp;</div>
            <!-- Column Left -->
            <div class="col-left">
                <h2>Text</h2>
                <p>Text text text text text text. </p>    
            </div>
            <!-- END Column Left -->
            <!-- Column Right -->
            <div class="col-right">
                <h2>Text</h2>
                <p>Text text text text text text. </p>
            </div>
            <!-- END Column Right -->
            <div class="cl">&nbsp;</div>
            <div class="separator">&nbsp;</div>    
            <div class="cl">&nbsp;</div>
        </div>
        <!-- END Content -->
        <!-- Footer -->
        <div id="footer">
            <p class="ar">&copy; Copyright Information 2010</p>
        </div>
        <!-- END Footer -->
    </div>
    <!-- END Shell -->
</body>
</html>
/*
    Style
*/

html { height: 100%;}

body { 
    font: 12px/18px Arial,sans-serif; 
    color: #fff; 
    text-align: left; 
    background: #000 url(images/background_1.gif) repeat-x 0 0;
    height : 100%;
    width : 100%;
}

a { color: #efca4b; text-decoration: underline; }
a:hover { cursor: pointer; text-decoration: none; }
a img { border: 0; }

.fl { float: left; display: inline; }
.fr { float: right; display:inline; }
.ac { text-align: center; }
.ar { text-align: right; }
.al { text-align: left; }
.cl { clear: both; height: 0; line-height: 0; font-size: 0; text-indent: -4000px; }
.hidden { display: none; }
.notext { font-size: 0; line-height: 0; text-indent: -4000px; }
.shell { width: 953px; margin: 0 auto; }

h1 a,h2,h3,h4 { font-family: Georgia, Times, serif; color: #ffc500; }
h2 { font-size: 17px; }
p { padding-bottom: 15px; }

/*
    Header
*/

#header { height: 88px; padding-top: 45px; }
#navigation { float: right; display: inline; width: 486px; }
#navigation ul { list-style: none outside; }
#navigation li { float: left; display: inline; margin-right: 10px; background: none; }
#navigation li.last { margin: 0; }

#navigation li a, 
#navigation li a span { 
    float: left; 
    display: inline; 
    height: 31px; 
    text-transform: lowercase; 
    padding-left: 13px; 
    text-decoration: none;
    font: 13px/26px "Lucida Sans", Lucida, Arial, sans-serif;
    color: #fff;
    background-position: 0 0;
    background-repeat: no-repeat;
}

#navigation li a span em { 
    font-style: normal; 
    display: inline-block; 
    height: 31px;
    background-position: center bottom; 
    background-repeat: no-repeat; 
}

#navigation li a span { padding-left: 0; padding-right: 13px; background-position: right 0; }

#navigation li a:hover,
#navigation li a.active,
#navigation li a:hover span,
#navigation li a.active span { background-image: url(images/navigation_1.gif); color: #ffc500; }

#navigation li a:hover span em, #navigation li a.active span em { background-image: url(images/nav-pointer.gif); }

h1#logo { 
font: 26px/26px Georgia, Times, serif; 
margin-left: 100px;
margin-top: -50px;
}
h1#logo a { text-decoration: none; }
h1#logo a:hover { text-decoration: underline; }

/*
    Features
*/

#features { height:100%; width: 100%; }

/*
    Content
*/

#content { border-top: 1px dashed #333; border-bottom: 1px dashed #333; }
#content ul { list-style: none outside; padding: 10px 0 35px 0; }

#content ul li { 
    display: block;
    padding-left: 7px;
    line-height: 12px;
    padding-bottom: 10px; 
    margin-left: 3px; 
    background: url(images/list-bg.gif) no-repeat 0 4px; 
}

#content ul li a { color: #6b7ead; line-height: 12px; }

.col-left { float: left; display: inline; width: 440px; border-right: 1px dashed #333; padding: 20px 20px 5px 0; }
.col-right { float: right; display: inline; width: 435px; padding: 20px 20px 5px 0; }

/*
    Footer
*/

#footer { padding: 15px 0 50px; color: #d1c1c1; font-family: Verdana; font-size: 9px; }
#footer a{ color: #d1c1c1; }

Any help would be greatly appreciated!

Re: Works in Safari but not Firefox (tried setting height/width in CSS)

please post the URL of the gallery that is having the issue.

Mike Richards
SimpleViewer Support Team.

Re: Works in Safari but not Firefox (tried setting height/width in CSS)

I been working locally, just put it up on temporary hosting.

http://ramsites.net/~grimslandkm/site/portfolio3.html

Re: Works in Safari but not Firefox (tried setting height/width in CSS)

Any luck?

Re: Works in Safari but not Firefox (tried setting height/width in CSS)

If you go to http://ramsites.net/~grimslandkm/site/simpleviewer.swf it works so it must be in your html or css, but I'm not seeing the issue at the moment. I would try setting a fixed width and height for swfobject instead of 100%.

swfobject.embedSWF("simpleviewer.swf", "flashContent", "100%", "100%", "9.0.124", false, flashvars, params);

If doesn't work if you upload the index.html that comes in the download does it work?

You need to remove imagePath="images/" thumbPath="thumbs/" from your gallery.xml

Mike Richards
SimpleViewer Support Team.

Re: Works in Safari but not Firefox (tried setting height/width in CSS)

I'm having exact the same problem.
It works in IE, Chrome, Safari and Opera, but not in Firefox.
I've been trying these codes, none of them worked

swfobject.embedSWF("fotos/simpleviewer.swf", "flashContent", "750", "700", "9.0.124", false, flashvars, params);
swfobject.embedSWF("fotos/simpleviewer.swf", "flashContent", "750px", "700px", "9.0.124", false, flashvars, params);
swfobject.embedSWF("fotos/simpleviewer.swf", "flashContent", "100%", "100%", "9.0.124", false, flashvars, params);

What am I doing wrong?

Regards, Strega

Re: Works in Safari but not Firefox (tried setting height/width in CSS)

Problem solved.

You can't place the javascript in the body tag, it HAS to be in the head section.

Regards, Strega

Re: Works in Safari but not Firefox (tried setting height/width in CSS)

I have this exact problem and i don't get the % property working correctly sad

If i put the script in the head section, i get the "Flash Version Required" message

Edit: I've said nothing xD

I had a very old version in my HD and i didn't notice i was trying on this smile

Last edited by tiku (2010-03-02 13:08:56)