473,320 Members | 2,164 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Div Style = Safari HELP!!

16
I keep making a solid image in photoshop and want to overlay my flash ontop of it (so it has a nice background bleed) anyways the code I am using is :

[HTML]<div style="width: 800px; height: 485px; overflow:hidden; font-size:12px; color:#000000; position:absolute; &gt;&lt;object classid=; left: 433px; top: 284px;"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="800" height="500" id="testdiv" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="main.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed src="main.swf" quality="high" bgcolor="#ffffff" width="800" height="500" name="main" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></div>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle"><div align="center"><br />
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="5" bgcolor="#000000"><img src="images/spacer.gif" width="1" height="1" /></td>
</tr>
<tr>
<td height="186"><div align="center"><img src="images/site/main.jpg" width="864" height="777" /></div></td>
</tr>
<tr>
<td height="5" bgcolor="#000000"><img src="images/spacer.gif" width="1" height="1" /></td>
</tr>
</table>[/HTML]

I am still so new to all this so I am not sure what I am doing, but either way, it seems fine in IE. But when I test it on my Mac with Safari it is pushing the flash piece off like 50 pixels or so.

Please any help at all :) thank you!
Oct 28 '08 #1
18 4329
drhowarddrfine
7,435 Expert 4TB
A snippet is not helpful. We need to see the complete markup. In any case, it will be Safari that is showing what you wrote and IE showing what it think you wrote, but IE will be (and almost always is) wrong.
Oct 28 '08 #2
blaqpig
16
Sorry about that, here is the full code (index.html)

[HTML]<!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">
<head>
<title>untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
body {
background-color: #000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
position: absolute;
height: 100%;
width: 100%;
overflow:hidden;
}
font {
}
div {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: x-small;
font-style: normal;
color: #FFFFFF;
}
.style1 {color: #000000}
.style2 {color: #FFFFFF}
</style>
</head>
<body>
<div style="width: 800px; height: 485px; overflow:hidden; font-size:12px; color:#000000; position:absolute; &gt;&lt;object classid=; left: 433px; top: 284px;"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="800" height="500" id="testdiv" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="main.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed src="main.swf" quality="high" bgcolor="#ffffff" width="800" height="500" name="main" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></div>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle"><div align="center"><br />
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="5" bgcolor="#000000"><img src="images/spacer.gif" width="1" height="1" /></td>
</tr>
<tr>
<td height="186"><div align="center"><img src="images/site/main.jpg" width="864" height="777" /></div></td>
</tr>
<tr>
<td height="5" bgcolor="#000000"><img src="images/spacer.gif" width="1" height="1" /></td>
</tr>
</table>
<br />
<span class="style1"><span class="style2">COPYRIGHT &copy; 2008. ALL RIGHTS RESERVED</span>. <br />
</span><br />
</div></td>
</tr>
</table>

</body>
</html>[/HTML]

Can you not overlay flash? If you can am I doing my code wrong? what is the correct way to do it. Again thank you for the help :)
Oct 28 '08 #3
David Laakso
397 Expert 256MB
Since it seems you have an image, a flash thing, and one line of text, a table is not needed as there is no tabular data. And since I am incapable of figuring out what you are attempting from the convoluted table construct you presented, I am just going to guess you're after something or other like this [1].

Cursory tested in Mac OS X 10.4.11 Opera, Mac Safari, WebKit nightly, Camino, Mac SeaMonkey; and, in XP IE/6.0 and IE/7.0.

Best, and hope this helps...

[1] Flash O'Rama
Oct 29 '08 #4
blaqpig
16
haha yes just having my flash lay over my photoshop background, so you are saying I am doing the div style correct, its just that i dont need all the tables?
Oct 29 '08 #5
David Laakso
397 Expert 256MB
You do not have any tabular data, therefore you do not need a table. CSS is, among other things, about the separation of style from content. Your division had the styles inline -- not separated from the content -- in essence not much different than a table. I used a totally different positioning method than yours, and moved the styles for it from the body of the document to the head of the document. It will be up to you to now move those styles from the head of the document to an external style sheet, totally removed from the content, other than by a link to it.
Oct 29 '08 #6
AutumnsDecay
170 100+
What in the...

That code... Hurt.

The easiest way for you to do this, and you can put this into any part of a webpage, as long as you modify it's properties is:

(In the head of the document)

[HTML]
<style>

.maindiv
{
width:600px;
height: 800px;
background:url('images/image.jpg');
background-repeat: no-repeat;
border: 1px solid #000000;
text-align:center;
}

</style>
[/HTML]

And then in the body of the document you'd put:

[HTML]
<body>
<center>
<div class="maindiv">
<embed src="yourflashdocument.swf" loop="true" width="400" height="400">
</embed>
</div>
</center>
</body>
[/HTML]

Keep in mind that the width, height, url referencing, true or false statements, etc.. are all subject to the way you design your content.

And for the love of God, please indent and tab your code. It's much easier to read that way. And you'll thank yourself in the future for doing it.

Hope this helps.
Oct 30 '08 #7
David Laakso
397 Expert 256MB
@AutumnsDecay:
While your suggestion would resolve the OPs issue, the method you suggest maintains his table based structure for a page that has no tabular data. This is contrary to what many of us believe nowadays to be good practice.
Oct 30 '08 #8
blaqpig
16
Thank you all for the help. I am sorry :( I really am new to code and have no clue at all what I am doing, I just know the basics and that is al. Is there a standard that CSS should be in an external shit and not in the head like it was previously? Does it have an advantage?
Oct 30 '08 #9
AutumnsDecay
170 100+
David, I'm not sure I understand what you mean when you refer to his data as "non tabular".

Could you please shed some light on the situation?
Oct 30 '08 #10
David Laakso
397 Expert 256MB
Is there a standard that CSS should be in an external sheet and not in the head like it was previously? Does it have an advantage?
There are 3 methods of locating the CSS:
[1] inline: when a unique style is applied to a single element.
[2] internal: when a single web page has a unique style from the rest of the site.
[3] external: when the styles will be applied to many pages.

Your page uses both inline [1] CSS styling (in the body of the document) and internal [2] CSS styling in the head of the document. You have done nothing intrinsically wrong (other than using the 90s practice of using a table when a table is not needed for the content you presented).

My page uses only internal [2] CSS styling (all styles in the head of the document). No tabular data in the content; consequently no table is used.

I advocated (suggested, if you will) moving all styles to an external [3] style sheet. My perhaps erroneous assumption is you are going on to bigger and better things in the sense of a site containing many pages rather than the one simple page you presented. Thus, among other advantages (such as total separation of style from content), enabling you to quickly and easily change the look of your entire web site by changing one CSS file.

You have three choices-- it is your call (all 3 assume you ditch the the uneccessary table):
a/ Use what you already have: inline [1] styling and internal [2] styling (weakest option IMO).
b/ Use what I did: internal styling [2] (a better option than a/ IMO).
c/ Use only: external styling [3] (best learning/best practice option IMO).

@AutumnDay
Goggle-- subject line: what is tabular data?
Keep in mind a table should be used within a table-less CSS layout. But only for any tabular data in the content. The OP has no tabular data. No tabular data-- no table.
Oct 30 '08 #11
JamieHowarth0
533 Expert 512MB
@David:

As far as I can see, Autumn's solution was clear and concise and didn't make use of a table?

codegecko
Oct 31 '08 #12
David Laakso
397 Expert 256MB
@David:

As far as I can see, Autumn's solution was clear and concise and didn't make use of a table?

codegecko
I like Autumn's solution (using a background image). I stand corrected, if I misunderstood his intent. I assumed, or at least thought at the time, he meant positioning the background image division within the OPs table.
Oct 31 '08 #13
blaqpig
16
thanks for all the help! I really appreciate it. Just curious is there a code to make something 100% centered in the screen? Like if I was just loading one image to load directly in the center of the screen.
Nov 3 '08 #14
blaqpig
16
would there be a reason using the supplied code from David, that my flash piece is perfectly aligned in Safari, but when I check it on the PC it seems to be cutting off the top (about missing 50 pixels pushed upwards) no clue why but doesnt make sense it shows proper in safari?
Nov 7 '08 #15
David Laakso
397 Expert 256MB
There might be any number of reasons. Could you provide a clickable link to your page-- difficult to know what the problem/fix is without seeing it...
Nov 7 '08 #16
blaqpig
16
Hello thanks for the response, ok it can be seen here ** Link Removed at OP's Request **


the CSS code I am using is :

Expand|Select|Wrap|Line Numbers
  1. @charset "UTF-8";
  2. /* CSS Document */
  3. html, body {
  4. background : #000000;
  5. color : #fff;
  6. margin : 0;
  7. padding : 0;
  8. }
  9. body {
  10.     font : 100% Arial, sans-serif;
  11. }
  12. p {
  13.     font-size : 70%;
  14.     margin : 5px 0 20px 0;
  15.     text-align : left;
  16. }
  17. #wrap {
  18. border : 1px solid white;
  19. position : relative;
  20. width : 888px;
  21. margin : 20px auto;
  22. }
  23. #border {
  24. border : 1px solid white;
  25. position : relative;
  26. width : 780px;
  27. margin : 20px auto;
  28. }
  29. #index {
  30.     background : #000;
  31.     width : 888px;
  32.     height : 20px;
  33.     position : absolute;
  34.     left : 1px;
  35.     top : 517px;
  36.     color: #000;
  37.     overflow : hidden;
  38. }
  39. #flash {
  40.     background : #000;
  41.     width : 780px;
  42.     height : 675px;
  43.     position : absolute;
  44.     left : 0px;
  45.     top : 0px;
  46.     color: #000;
  47.     overflow : hidden;
  48. }
  49. #copyright {
  50.     font-size: 70%;
  51.     margin : 50px 0 20px 0;
  52.     text-align : center;
  53. }
  54.  
The reason there is like 1 wrap and 1 border (basically the same) because I want to have 2 pages a tad bit different so they are not going to be the same dimensions. Same goes for index and flash (so I can define 2 separate things).

I am sure I am doing that all wrong, but I cant figure out why on IE the top part of the flash is getting cut off.
Nov 7 '08 #17
David Laakso
397 Expert 256MB
When you provide the uri it is not necessary to cut and paste the CSS to the forum.

You can't change the markup and css and expect to get the same result. Whether the changes I've made will correct IE/6 and IE/7 remain to be seen. My PC is out of commission; consequently, I am unable to check it in IE.

Note that the doctype has been changed from transitional to strict; and, that the paths used are different than yours. Please see:

HTML
CSS
Nov 7 '08 #18
blaqpig
16
I figured it out! I was defining my flash as 2 different widths and heights (forgot to edit it). At least its solved!

Thank you again David for the all help it is much appreciated!

Also sorry for posting the CSS code, I was unsure how else you were going to view it if I didnt paste it.
Nov 7 '08 #19

Sign in to post your reply or Sign up for a free account.

Similar topics

3
by: Greg Copeland | last post by:
Okay, I have: class Base( object ): def __init__( self ): self._attrib = "base" print "Base" def real( self ): print "Base.real() is calling base.virtual()" self.virtual()
6
by: Ryan | last post by:
Is there any way to have two style sheets applied to my web page without using frames? ex. having them apply to individual frames within a menu? Thanks
1
by: TJD | last post by:
Can you set global page settings and then define unique settings such as paragraph styles in the same external style sheet?
0
by: lltaylor | last post by:
Hello, I am in the process of creating a Portal Site, and so far so good, except I am having problems getting my style sheets to work. i am using the ASP.NET Portal Starter Kit as a reference,...
4
by: jspsfo | last post by:
I cannot get my new css layout (http://footprints.organique.com/ij-css-only2.html) to render properly in Safari. It's fine in opera/IE/firefox/netscape but all messed up in safari.. Can...
3
by: Joe Cox | last post by:
I am having a problem with style properties for dynamic images in Mac OS X Safari. By dymanic images, I mean images allocated with the javascript 'new Image()' call. With static images (created...
2
by: jonathandowns | last post by:
i'm trying to put a css border around this box, and it's not working properly in safari and firefox (works fine in IE). can anyone help me fix this? here is a grab so you can see the problem: ...
2
by: Mick Walker | last post by:
I am totally new, never done any CSS (ok a tiny bit) before, so please bear with me.... I have been looking at the following: http://www.brainjar.com/css/positioning/absolutedemo.html And am...
1
by: ineuw | last post by:
In Firefox 2.0, I successfully changed the border effect of the standard Select box from sunken to a flat image, using the following CSS: select.fonts { border: 1px solid #acacac;} This...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.