Connecting Tech Pros Worldwide Help | Site Map
bytes > topic > html css > answers

Div Style = Safari HELP!!

Newbie
  
Join Date: Oct 2008
Posts: 16
#1: Oct 28 '08
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!
drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,561
#2: Oct 28 '08

re: Div Style = Safari HELP!!

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.
Newbie
  
Join Date: Oct 2008
Posts: 16
#3: Oct 28 '08

re: Div Style = Safari HELP!!

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 :)
Expert
  
Join Date: Aug 2008
Posts: 397
#4: Oct 29 '08

re: Div Style = Safari HELP!!

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
Newbie
  
Join Date: Oct 2008
Posts: 16
#5: Oct 29 '08

re: Div Style = Safari HELP!!

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?
Expert
  
Join Date: Aug 2008
Posts: 397
#6: Oct 29 '08

re: Div Style = Safari HELP!!

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.
Member
  
Join Date: Mar 2008
Posts: 60
#7: Oct 30 '08

re: Div Style = Safari HELP!!

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.
Expert
  
Join Date: Aug 2008
Posts: 397
#8: Oct 30 '08

re: Div Style = Safari HELP!!

@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.
Newbie
  
Join Date: Oct 2008
Posts: 16
#9: Oct 30 '08

re: Div Style = Safari HELP!!

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?
Member
  
Join Date: Mar 2008
Posts: 60
#10: Oct 30 '08

re: Div Style = Safari HELP!!

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?
Expert
  
Join Date: Aug 2008
Posts: 397
#11: Oct 30 '08

re: Div Style = Safari HELP!!

Quote:

Originally Posted by blaqpig

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.
codegecko's Avatar
Moderator
  
Join Date: May 2007
Location: United Kingdom
Posts: 395
#12: Oct 31 '08

re: Div Style = Safari HELP!!

@David:

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

codegecko
Expert
  
Join Date: Aug 2008
Posts: 397
#13: Oct 31 '08

re: Div Style = Safari HELP!!

Quote:

Originally Posted by codegecko

@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.
Newbie
  
Join Date: Oct 2008
Posts: 16
#14: Nov 3 '08

re: Div Style = Safari HELP!!

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.
Newbie
  
Join Date: Oct 2008
Posts: 16
#15: Nov 7 '08

re: Div Style = Safari HELP!!

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?
Expert
  
Join Date: Aug 2008
Posts: 397
#16: Nov 7 '08

re: Div Style = Safari HELP!!

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...
Newbie
  
Join Date: Oct 2008
Posts: 16
#17: Nov 7 '08

re: Div Style = Safari HELP!!

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.
Expert
  
Join Date: Aug 2008
Posts: 397
#18: Nov 7 '08

re: Div Style = Safari HELP!!

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
Newbie
  
Join Date: Oct 2008
Posts: 16
#19: Nov 7 '08

re: Div Style = Safari HELP!!

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.
Reply

« previous question | next question »

/bytes/development

/bytes/it

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,295 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved