I am doing some testing and my test object aligns just how I want it to in IE but not in FF or the built in preview tab in HTML editor 2008. I want my object to be 150 px from both the right edge of the page and left edge of the page. When I view it in FF it seems to have doubled the px from the left and top but there is no spacing from the right. I am not using any external CSS and the object I am embedding is from Flash Blogger. Here's the code in my HTML editor. Please Point out my errors:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test page</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
</head>
<body>
<object style="right: 150px; Z-INDEX: 100; LEFT: 150px; WIDTH: 700px; POSITION: absolute; TOP: 100px; HEIGHT: 495px;" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" id="CoffeeCupBlogger" align="middle">
<param name="movie" value="myblog.swf"/>
<param name="quality" value="high"/>
<param name="scale" value="noscale"/>
<param name="salign" value="lt"/>
<param name="bgcolor" value="#ffffff"/>
<embed style="right: 150px; Z-INDEX: 100; LEFT: 150px; WIDTH: 700px; POSITION: absolute; TOP: 100px; HEIGHT: 495px;" src="myblog.swf" quality="high" bgcolor="#ffffff" name="CoffeeCupBlogger" scale="noscale" salign="lt" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/></object>
</body>
</html>
JS
Registered User
40 posts
BillR
Ambassador
3,144 posts
Your style is telling the top left corner of your object to move to 100 px down from the top (TOP: 100px;) and move right 150px (right: 150px;) and move left 150px (LEFT: 150px;) and that could cause some problems. Do you want the object moved right or left?
JS
Registered User
40 posts
billr wrote:
Your style is telling the top left corner of your object to move to 100 px down from the top (TOP: 100px;) and move right 150px (right: 150px;) and move left 150px (LEFT: 150px;) and that could cause some problems. Do you want the object moved right or left?
Your style is telling the top left corner of your object to move to 100 px down from the top (TOP: 100px;) and move right 150px (right: 150px;) and move left 150px (LEFT: 150px;) and that could cause some problems. Do you want the object moved right or left?
well I want it moved from the left edge of the page. However, the code that the HTML editor automatically produces when I moved the object just has a TOP and LEFT, but that still caused the problem in FF. I then added the RIGHT to see if that would fix it but still the same result with the messed up alignment. Here's a pic I am attaching to show you the differences. The pics are shrunk a bit and the code is slightly different but still the same result.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta name="generator" content="CoffeeCup HTML Editor 2008 - www.coffeecup.com">
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body bgcolor="#c0c0c0" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
<object style="Z-INDEX: 100; LEFT: 150px; POSITION: absolute; TOP: 100px; WIDTH: 400px; HEIGHT: 295px;" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" id="CoffeeCupBlogger" align="middle">
<param name="movie" value="myblog.swf"/>
<param name="quality" value="high"/>
<param name="scale" value="noscale"/>
<param name="salign" value="lt"/>
<param name="bgcolor" value="#ffffff"/>
<embed style="Z-INDEX: 100; LEFT: 150px; POSITION: absolute; TOP: 100px; WIDTH: 400px; HEIGHT: 295px;" src="myblog.swf" quality="high" bgcolor="#ffffff" name="CoffeeCupBlogger" scale="noscale" salign="lt" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/></object>
</body>
</html>
IE pic:
http://i265.photobucket.com/albums/ii238/roofriend/ietest.jpg
FF pic:
http://i265.photobucket.com/albums/ii238/roofriend/fftest.jpg
BillR
Ambassador
3,144 posts
Try something that will clean up your code and make it easier to use.
The code in the box will have all the object style in one statement at the top of the page, and also has some style that should make IE work properly.
Let me know how it works.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta name="generator" content="CoffeeCup HTML Editor 2008 - www.coffeecup.com">
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#blog {
position:absolute;
left:150px;
top:100px;
z-index:100;
width:400px;
height:295px;
}
</style>
</head>
<body bgcolor="#c0c0c0" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
<div id="blog">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" id="CoffeeCupBlogger" align="middle">
<param name="movie" value="myblog.swf"/>
<param name="quality" value="high"/>
<param name="scale" value="noscale"/>
<param name="salign" value="lt"/>
<param name="bgcolor" value="#ffffff"/>
<embed src="myblog.swf" quality="high" bgcolor="#ffffff" name="CoffeeCupBlogger" scale="noscale" salign="lt" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/></object>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta name="generator" content="CoffeeCup HTML Editor 2008 - www.coffeecup.com">
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#blog {
position:absolute;
left:150px;
top:100px;
z-index:100;
width:400px;
height:295px;
}
</style>
</head>
<body bgcolor="#c0c0c0" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
<div id="blog">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" id="CoffeeCupBlogger" align="middle">
<param name="movie" value="myblog.swf"/>
<param name="quality" value="high"/>
<param name="scale" value="noscale"/>
<param name="salign" value="lt"/>
<param name="bgcolor" value="#ffffff"/>
<embed src="myblog.swf" quality="high" bgcolor="#ffffff" name="CoffeeCupBlogger" scale="noscale" salign="lt" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/></object>
</div>
</body>
</html>
The code in the box will have all the object style in one statement at the top of the page, and also has some style that should make IE work properly.
Let me know how it works.
BillR
Ambassador
3,144 posts
I tested both Firefox 2.0.0.17 and IE7 using a file saved on my computer and both pages looked to have the same position.
JS
Registered User
40 posts
it seemed to have fixed the positioning issue but now I get different widths on IE and FF. It seems as if CC HTML Editor just does weird things to the codes and cant handle CSS too well. I was looking forward to using Flash Blogger because it seems like a very easy program to use to update a website frequently without having to add another page.
BillR
Ambassador
3,144 posts
Actually, CoffeeCup HTML editor does not change the code, and the CSS is handled by the web server and browser.
More likely, the issue is Internet Explorer that does not handle margins and paddings properly. The first entry in the style section that I created was designed to try to get IE to behave.
Try putting your work on your site, and give a link here. Likely someone will be able to help fine tune things.
More likely, the issue is Internet Explorer that does not handle margins and paddings properly. The first entry in the style section that I created was designed to try to get IE to behave.
Try putting your work on your site, and give a link here. Likely someone will be able to help fine tune things.
JS
Registered User
40 posts
billr wrote:
Actually, CoffeeCup HTML editor does not change the code, and the CSS is handled by the web server and browser.
More likely, the issue is Internet Explorer that does not handle margins and paddings properly. The first entry in the style section that I created was designed to try to get IE to behave.
Try putting your work on your site, and give a link here. Likely someone will be able to help fine tune things.
Actually, CoffeeCup HTML editor does not change the code, and the CSS is handled by the web server and browser.
More likely, the issue is Internet Explorer that does not handle margins and paddings properly. The first entry in the style section that I created was designed to try to get IE to behave.
Try putting your work on your site, and give a link here. Likely someone will be able to help fine tune things.
Thanks for the help Bill R. Actually I have noticed that the Editor DOES change the code. There are some instances where Im in the code mode, save, then go to look at it in preview, go back to code mode and some of the codes have been altered or code added. Dont have a site yet. Still working on it locally before I get a host.
I have a pretty good layout already, but I was trying to avoiding having to add page after page everytime I add content. With Flash Blogger, I would've been able to add content all the time and just keep one page.
BillR
Ambassador
3,144 posts
Are you going to preview, or using the visual editor tab? Going into the visual editor will change the code, but I have never seen the HTML editor make a change to the code just by using the preview.
JS
Registered User
40 posts
billr wrote:
Are you going to preview, or using the visual editor tab? Going into the visual editor will change the code, but I have never seen the HTML editor make a change to the code just by using the preview.
Are you going to preview, or using the visual editor tab? Going into the visual editor will change the code, but I have never seen the HTML editor make a change to the code just by using the preview.
Yeah, actually I did switch to the visual mode but didnt move anything. Just kinda used it as the preview.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
