Hello, while I am not new to web design, I am new to developing an XHTML 1.0 Strict site using divs and not tables. I am trying to revamp my website to use this, and it is proving a challenge making it compliant in Firefox, IE 6, and IE 7.
Currently, I am up against adding a Flash 9 movie to my site, and get it to show properly in Firefox and IE. It does show up. However, it makes the div double the size, pushing the movie down and leaving a large block of empty area.
Also, I would like to know a good way to make this validate as W3's validator does not like the <no script> tags it seems within the container div of the movie.
I have looked for several days on the Internet for similar issues, and have found none. Several of your articles on here have answered my questions before without me having to post, so I am hoping that someone will be able to help me now.
Code for the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Rexibit - King of Show Designs</title>
<link href="/files_for_inclusion/css/main_site.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="files_for_inclusion/scripts/rounded_corners_lite.js"></script>
<script type="text/javascript" src="files_for_inclusion/scripts/home_round_border.js"></script>
<script type="text/javascript">AC_FL_RunContent = 0;</script>
<script type="text/javascript" src="files_for_inclusion/scripts/AC_RunActiveContent.js"></script>
<script type="text/javascript" src="files_for_inclusion/scripts/AC_RunActiveContent.js"></script>
</head>
<body>
<div id="container">
<div id="content" class="clearfix">
<div id="header">
<!-- Rexibit.com - King of Show Graphic Design -->
</div>
<div>
<div id="contentHolder" class="clearfix">
<div id="banner" class="round">
<div>
<script type="text/javascript">
if (AC_FL_RunContent == 0) {
alert("This page requires AC_RunActiveContent.js.");
} else {
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
'width', '464',
'height', '200',
'src', 'images/images_presentation/banner.swf',
'quality', 'high',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'false',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'bannerMovie',
'bgcolor', '#cccc66',
'name', 'bannerMovie',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'bannerMovie',
'salign', ''
); //end AC code
}
</script>
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0','width','464','height','200','id','bannerMovie','allowscriptaccess','sameDomain','allowfullscreen','false','movie','images/images_presentation/banner','quality','high','bgcolor','#cccc66','loop','false','scale','showall','align','middle' ); //end AC code
</script>
<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="464" height="200" id="bannerMovie">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="images/images_presentation/banner.swf" />
<param name="quality" value="high" />
<param name="loop" value="false" />
</object>
</noscript>
</div>
</div>
<div id="news" class="round">
<div id="sectionTitle">
Recent News
</div>
<div class="newsItem round">
<div class="newsTitle">
Sample News
</div>
<div class="newsDate">
06.15.2008
</div>
<div class="newsBlurb">
This is a sample news item
</div>
</div>
<div class="newsItem round">
<div class="newsTitle">
Sample News 2
</div>
<div class="newsDate">
06.15.2008
</div>
<div class="newsBlurb">
This is a sample news item
</div>
</div>
<div class="newsItem round">
<div class="newsTitle">
Sample News
</div>
<div class="newsDate">
06.15.2008
</div>
<div class="newsBlurb">
This is a sample news item
</div>
</div>
</div>
<div id="navigation" class="clearfix">
<ul>
<li class="nav1">Home</li>
<li class="nav">Gallery</li>
<li class="nav">Tutorials</li>
<li class="nav">Templates</li>
<li class="nav">Forum</li>
<li class="nav">Contact</li>
</ul>
</div>
<div id="recentGalleryAdditions" class="round">
Recent Gallery Additions
</div>
<div id="recentTutorials" class="round">
Recent Tutorials
</div>
<div id="recentTemplates" class="round">
Recent Templates
</div>
</div>
<div id="footer">
<?php echo '©Rexibit 2005-'; echo date("Y"); ?>
</div>
</div>
</div>
</body>
</html>Code for the Style Sheet
/* Page Structure */
body {margin: 0px; padding: 0px; font: .8em Verdana, Arial, Helvetica, sans-serif; background-color:#999933;}
img.body, body img {border: 0px;}
#container {margin: 0px auto; width: 778px;}
#content {width: 100%;}
#contentHolder {background-image:url(/images/images_presentation/content_background.jpg); background-repeat: repeat-y; padding: 0px 33px;}
#header {background-image:url(/images/images_presentation/header.jpg); background-repeat: no-repeat; display:block; height: 100px; width: 100%;}
#banner {margin-top: 15px; margin-bottom: 15px; background-color:#CCCC66; width: 464px; height: 200px; display: block; float: left; text-align: center;}
#banner div {margin: 0px;}
#news {margin-top: 15px; margin-left: 15px; margin-bottom: 15px; background-color:#CCCC66; width: 233px; height: 200px; display: block; float: left;}
#navigation {clear: both; margin-bottom: 15px; width: 100%; height: 25px; display: block; text-align: center;}
#navigation ul {margin: 0px 10%;}
#navigation ul li {padding: 2.8px 5px; font-size: 1em; list-style-type: none; letter-spacing: 2px; display: block; text-decoration: none; text-align: center; border: groove 1px #000000; background-color: #CCCC66; float: left;}
#recentGalleryAdditions {margin-bottom: 15px; background-color: #CCCC66; width: 227px; height: 200px; display: block; float: left;}
#recentTutorials {margin-left: 15px; margin-bottom: 15px; background-color: #CCCC66; width: 227px; height: 200px; display: block; float: left;}
#recentTemplates {margin-left: 15px; margin-bottom: 15px; background-color: #CCCC66; width: 227px; height: 200px; display: block; float: left;}
#footer {background-image:url(/images/images_presentation/footer.jpg); background-repeat: no-repeat; display:block; height: 44px; text-align: center; padding: 5px 0px; font-size: .8em; width: 100%;}
#sectionTitle {font-size: 1em; text-decoration: underline; text-transform: uppercase; margin-bottom: 10px; text-align: center;}
.nav1 {margin-left: 0px;}
.nav {margin-left: 10px;}
.round {}
.newsItem {background-color: #CCCC99; margin: 2px; padding: 5px; border-top: #999933 solid 1px; border-bottom: #999933 solid 1px;}
.newsTitle {font-size: .8em; text-transform: uppercase; font-style: italic; border-bottom: solid 1px #999933; margin-bottom: 2px; padding-bottom: 2px;}
.newsDate {font-size: .8em; text-align: right; font-style: italic;}
.newsBlurb {font-size: .8em;}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */If you require more information, please ask.
