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"> </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"> </div>
</div>
<!-- END Features -->
<div class="cl"> </div>
<!-- Content -->
<div id="content">
<div class="cl"> </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"> </div>
<div class="separator"> </div>
<div class="cl"> </div>
</div>
<!-- END Content -->
<!-- Footer -->
<div id="footer">
<p class="ar">© 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!