Flash movie(banner) center problem between browsers [Video Proof]

**eWish** · Mar 7 '08, 01:43 AM

I would suggest that you fix your errors in your CSS and add the proper DTD to your HTML then go from there.

--Kevin

**GloStix** · Mar 7 '08, 03:42 AM

Fair enough, I don't know what DTD is though.
I typed this stuff by hand I just use Dreamweaver to view it quickly

**GloStix** · Mar 7 '08, 03:53 AM

*FIXED HTML*

Code:

 
<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">

<head>
<title>James Mann - Portfolio</title>
<link rel="stylesheet" href="styles.css" type="text/css">
<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
<!--
body {
	background-color: #9cad32;
}
-->
</style></head>

<body>
<div id="topbar">
	<div id="buttonconatiner">
      <div id="buttons">
        
        <ul>
          <li class="selected"><a href="http://pdhtdev.johnabbott.qc.ca/students/2010/james_mann/portfolio/index.htm">Home</a></li>
            <li><a href="#">Media</a></li>
            <li><a href="websites.htm">Websites</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">About Me</a></li>
          </ul>
        </div>
	</div>
</div>

<div id="wrapper">
<div id="container">
<div id="banner">
<a href="#"></a>
</div>


<div id="flashtop">
<script type="text/javascript" src="flashobject.js"></script>
			  <div id="flashban" style="width: 700px; height: 150px"></div>

	  <script type="text/javascript" language="javascript">
				var fo = new FlashObject("flashbanner2.swf", "flashban", "700", "150", "7", "#000000, true");
				fo.addParam("allowScriptAccess", "sameDomain");
				fo.addParam("quality", "high");
				fo.addParam("scale", "noscale");
				fo.addParam("loop", "false");
				fo.addParam("wmode", "transparent");
				fo.write("flashban");
			  </script>
                     
    </div>


<div id="content">
<h1>Updates!</h1>
<p class="bigz"> Biography will be moved to the "About Me" page soon - "Websites" page up and with content - "Artwork" to be changed to "Media" because I will be posting my Music and Digital Artwork but currently Artwork/Projects/About Me are non-existent. Please email me any suggestion, email link at the bottom of the page.</p>

<h2>Biography</h2>


<p class="bigz"> I first started doing this type of stuff when I was about 14 years old. At that time I always heard about how powerful Photoshop was and how websites were getting better and better and it really interested me. I started learning basic html using free online resources until I could build basic sites. I used to make little flash videos back then so I made a site where I would show them(even if they were bad).</p>

 <p class="bigz">My friend who was also interested in this type of stuff told me about CSS and how it made making a site 200 times more easier(well, organized). We both started learning CSS at that point and I even made a little css webpage at 15. I didn't FULLY understand CSS but I knew how it was structered so I managed with online resources on hand. </p>
 
 <p class="bigz">Around the same time, I looked into Photoshop because it interested me; everyone was saying it was really powerful so I wanted to be able to use it. I went to tons and tons of forums learning photoshop techniques via online tutorials people made. The forums helped me because I offered to make signatures for people (picture shown below every forum post) and I would improve myself each one I made. I had a LOT of bad ones but eventually I got the hang of Photoshop because it was sort of a competition in the community and everytime we posted a signature we were critiqued and evaluted to improve the next time. Now I have a whole collection of good signatures I made for people.</p>
 
 <p class="bigz"> I also learned a program called FL Studio 7 which is a music making program which allows you to create music from scratch. I made tons of songs and everytime I got better and better and eventually I hit a point where the software wasn't powerful enough to create what I wanted(CPU Cycle hog). I moved to Reason(another music program) which is in my opinion more powerful so hopefully it will turn out better. My goal now is to make a site that will incorporate Flash movies, Photoshop tutorials/show off, Music show off website that everyone can post their own creations and people willl be able to comment on them. Anyway, that's me. </p>

</div>
</div>

<div id="footer">
&copy; <a href="mailto:jwm@videotron.ca">James Mann</a>, 2008, Montreal
</div>
</div>

</div>

</body>
</html>

*FIXED CSS*

Code:

 html,body {
	margin:0;
	padding:0;
}

a:visited {
	color:#CC9900;
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}

a {
	color:#CC9900;
	text-decoration:none;
}

p {
	line-height:17px;
	padding-left:10px;
	padding-right: 10px;
}

.bigz:first-letter {
	font-size:150%;
	line-height:0.8;
}

#container {
	width: 700px;
	font-family: serif;
	font-size:14px;
	color: #222222;
	margin:0 auto;
	border-left:solid 1px #333333;
	border-right:solid 1px #333333;
	overflow:hidden;
	
}

#wrapper {
	width:750px;
	margin:0 auto;
	background-image: url(images/repeat-y-back.gif);
	background-repeat:repeat-y;
	overflow:hidden;
}

body {
	text-align: center;
}

#banner {
	width: 700px;
	height: 150px;
	text-align:center;
	background-image: url(images/JamesBanner.gif);
}

h1 {
	color:#ffffff;
	display: block;
	width: 700px;
	padding-left:0px;
	padding-right:0px;
	padding-bottom:3px;
	padding-top:3px;
	margin-top:0px;
	margin-bottom:5px;
	border-top: solid 1px black;
	border-bottom: solid 1px black;
	background-color: #666666;
	background-image: url(images/heading.gif);
	font-size:16px;
	text-align:center;
	font-family: Verdana;
	font-style:italic;
	height:19px
}

h2 {
	color:#ffffff;
	display: block;
	width: 700px;
	padding-left:0px;
	padding-right:0px;
	padding-bottom:3px;
	padding-top:3px;
	margin-top:35px;
	margin-bottom:5px;
	border-top: solid 1px black;
	border-bottom: solid 1px black;
	background-color: #666666;
	background-image: url(images/heading.gif);
	font-size:16px;
	text-align:center;
	font-family: Verdana;
	font-style:italic;
	height:19px
}
	
#content {
	width: 700px;
	text-align:left;
	overflow:hidden;
}

#content1 {
	padding-left:10px;
	padding-right: 10px;
	width: 680px;
	text-align:left;
	overflow:hidden;
}

#footer {
	margin:0 auto;
	margin-top:0px;
	width:750px;
	height:50px;
	background-image: url(images/footer.gif);
	color: #CC9900;
	font-style:italic;
	font-size:12px;
	font-family: Arial;
	font-variant:small-caps;
	margin-top:10px;
	float:inherit;
}

/*NAVIGATION*/

#topbar {
	width:100%;
	height:30px;
	font-family:Verdana;
	font-variant:small-caps;
	text-decoration:underline;
	font-style:italic;
	background-color:#353535;
	background-image: url(images/button3.gif);
	overflow:hidden;
}

#buttonconatiner {
	width:700px;
	height:30px;
	margin:0 auto;
	overflow:hidden;
}

#buttons {
	margin:0 auto;
	height:30px;
	width:700px;
	text-align:center;
	overflow:hidden;
}
	
#buttons ul {
	height:30px;
	float:none;
	clear:both;
	padding:0px;
	margin-top:0px;
	margin-bottom:0px;
	margin-left:0px;
	margin-right:0px;
	overflow:hidden;
}
	
#buttons li {
	padding-top:3px;
	padding-bottom:0px;
	padding-left:0px;
	padding-right:0px;
	height:30px;
	width:140px;
	text-align:center;
	list-style-type: none;
	float:left;
	display:block;
	overflow:hidden;
}

.selected, .selected a {
	color:#e1a902;
	overflow:hidden;
	background-repeat:repeat-x;
	}
	
#buttons li:hover {
	background-color:#CC9900;
	background-image: url(images/button3sel.gif);
	height:30px;
	width:140px;
	text-decoration:underline;
	overflow:hidden;
}
	
ul a,a:visited,a:focus {
	color:#ffffff;
	text-decoration:none;
}



li {
	text-decoration:none;
}

/*FLASH BANNER*/	
#flashtop {
	position:absolute;
	width: 700px;
	height:150px;
	top:30px;
	text-align:center;
	margin:0 auto;
	z-index:99;
}

#flashban {
	position: absolute;
	width: 700px;
	height:150px;
	top:0px;
	text-align:center;
	margin:0 auto;
	z-index:99;
}

/* THUMBNAIL PREVIEWZZZ!*/

ul.gallery{
	list-style-type: none;
	margin-bottom: 20px;
}

ul.gallery li{
	width: 216px;
	margin: 5px;
	border: 1px solid #CCCCCC;
	background-color: #FFFFFF;
	text-align: center;
}

ul.gallery li a {
	border: 3px solid #FFFFFF;
	text-decoration: none;
	display:block;
	height: 170px;
	width: 210px;
}


ul.gallery li a:hover{
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
	background-color: #CCCCCC;

}

 ul.gallery span{
	color: #666666;
	background-color: #FFFFFF;
	float: left;
	width: 204px;
	text-align: center;
	padding: 3px;
	font-size: 10px;
	margin-top: 3px;
}

 ul.gallery a:hover span{
	background-color: #CCCCCC;
}

**GloStix** · Mar 7 '08, 10:29 PM

bump, It's really bugging me :(

**GloStix** · Mar 8 '08, 12:00 AM

Sorry for all the bumps but, bump...
I need somethin' T__T

**GloStix** · Mar 8 '08, 03:25 AM

Nobody? :( I thought it was going to be a simple fix =\

**GloStix** · Mar 8 '08, 07:36 PM

Please don't take the bumping personally.

**drhowarddrfine** · Mar 8 '08, 08:10 PM

Aahh, it's Saturday.

Remove the first line. The xml declaration only works in modern browsers. IE chokes on it and goes into quirks. As usualy, IE is the problem here. Not FF or Safari.

**drhowarddrfine** · Mar 8 '08, 08:22 PM

I don't have your flash file but the div is centered in Firefox.

**GloStix** · Mar 8 '08, 08:50 PM

Originally posted by drhowarddrfine

I don't have your flash file but the div is centered in Firefox.

The div is but for some reason the flash file goes out of the div and is displayed like what is shown on my video link.

Do you want the flash file?

**drhowarddrfine** · Mar 8 '08, 09:25 PM

No but did you make the corrections? The div is centered.

**GloStix** · Mar 8 '08, 09:36 PM

Originally posted by drhowarddrfine

No but did you make the corrections? The div is centered.

Should it not be centered?

I should remove lines 220, 221, 230 and 231?

Edit*
I tried it but it didn't change anything :(

**GloStix** · Mar 8 '08, 09:55 PM

Omg, It's even worse in IE

TechSmith Screencast

http://screencast.com/t/UEqttPvFwIR

World's leading screen capture + recorder from Snagit + Screencast by Techsmith. Capture, edit and share professional-quality content seamlessly.

**GloStix** · Mar 9 '08, 12:43 AM

It must be hard for you guys to debug this kind of stuff.

Flash movie(banner) center problem between browsers [Video Proof]

Flash movie(banner) center problem between browsers [Video Proof]

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment