Avatar of dmullis
dmullis
Flag for United States of America asked on

Div positions itself on the left of IE, but the right in Firefox?

Please look at this page in IE and Firefox:

 http:www.quickprobusinesswebsites.com

You are looking for the orange word "FLASH!" to appear, for only 3 seconds that was programed in Javascript.
In IE the word comes from the far left and Firefox from the middle of the page.

Right now I have no positioning listed in the CSS  as you can see IE and Firefox are so off now with only HTML and Javascript. I have tried padding with no margin, margin with no padding, moving the DIV itself every where, using position absolute with top and left.
1.)How can I control the position of this DIV period in any browser - mainly problems with the TOP padding, margin, etc
2.) How can I make the position of this div similar in both browsers - it is WAY off.
Here is the code:

External CSS and Javascript:

<style type="text/css">
   /*<![CDATA[*/

#flash{
font-family:Verdana;
position:absolute;
font-weight:bold;
color:#FFC275;
}

/*]]>*/
    </style>

<script language="JavaScript" type="text/JavaScript">

//This script created by Steve Bomer (steveb03@yahoo.com)
//Modified by Deidre Mullis

//Change the message below
var themessage="FLASH!"
var fontsize=10
//Below determines how long the message will appear before disappearing. 3000=3 seconds
var appearfor=2000

function position_at_top()
{
if (document.layers)
document.flash.top=pageYOffset
else if (document.all)
{
flash.innerHTML='<div><font face="Verdana">'+themessage+'</font></div>'
setTimeout("flash.style.top=document.body.scrollTop+10;flash.style.left=document.body.scrollLeft+10",100)
}
else if (document.getElementById){
document.getElementById("flash").innerHTML='<div><font face="Verdana">'+themessage+'</font></div>'
document.getElementById("flash").style.top=pageYOffset
}
}

function expand()
{
if (document.layers){
document.flash.document.write('<div  style="font-size:'+fontsize+'px"><font face="Verdana">'+themessage+'</font></div>')
document.flash.document.close()
}
else if (document.all)
flash.style.fontSize=fontsize+'px'
else if (document.getElementById)
document.getElementById("flash").style.fontSize=fontsize+'px'
fontsize+=5
if (fontsize>90){
if (document.layers)
setTimeout("document.flash.visibility='hide'",appearfor)
else if (document.all)
setTimeout("flash.style.visibility='hidden'",appearfor)
else if (document.getElementById)
setTimeout("document.getElementById('flash').style.visibility='hidden'",appearfor)
return
}
else
setTimeout("expand()",50)
}

</script>

_________________________________________________________________________________________

HTML:

<body onload="position_at_top();expand();">

<div id="flash"></div>

</body>















Fonts TypographyCSS

Avatar of undefined
Last Comment
dmullis

8/22/2022 - Mon
VirusMinus

I don't see a flash text appear anywhere in IE6, IE7 & FF

Had a quick look at your HTML by doing a view source and there is a lot of white space before the DOCTYPE which *must* be on the first line to have any effect on how browsers render the page. Try using the strict DOCTYPE for browsers to behave more like each other and closer to standards.

dmullis

ASKER
Hi Virus Minus,

My bad. Wrong address. This is the correct page:

 http://www.quickprobusinesswebsites.com/index.pageid=128


( I am having to work with a content management system and when you view source, a lot of the navigational code such as buttons , etc. is not my code. Unfortunately, I am unable to change the doc type they have set.  They are re-coding the system for a new release so people will be able to do this in the future).
VirusMinus

your bad again dmullis :) the link is http://www.quickprobusinesswebsites.com/index.cfm?pageid=128

having a look at it now..
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
dmullis

ASKER
Hi VirusMinus,

I was playing around with this question and answer and believe I have it solved to some extent. I can't locate the question number but the Title is "Text effects: up instead of down" if you want to look it up.

I changed the JavaScript to read style.middle instead of style.top - that put it in the middle of the page which is okay but I have no control over how far from the top it is-position:absolute: will work with left but not top. ??

To move it from the left I was able to use CSS:

#flash{
font-family:Verdana;
position:absolute;
left:400px;
font-weight:bold;
color:#FFC275;}

I still don't understand why I can't position  a certain distance from the top with CSS?
absolute:position;
top:xxx px; does nothing?

If you know, please let me know. I can stand it in the middle of the page like I have it now by making the Javascript code style.center, but I just wondered why I don't have much control with the CSS.
ASKER CERTIFIED SOLUTION
VirusMinus

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
VirusMinus

or

#flash{
font-family:Verdana;
float: left;
margin-left:400px;
margin-top: 100px;
font-weight:bold;
color:#FFC275;}
dmullis

ASKER
Both of those give me control over the left but not the top. I have to have position absolute also or the type/content moves off the page. lol.

Deidre
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
dmullis

ASKER
Okay! Yes it does work. It is positioning itself from the top of the document.style.middle since I changed it instead of document.style.top, so yes it does work!

Thanks!
VirusMinus

ok what about position: relative ?

also using position (absolute or relative) and float together is conflicting. use either one.

also note: something can be positioned absolutely only inside something that is position relative. Similarly something can be positioned relatively only inside something that is absolutely positioned.
VirusMinus

Great! glad to be of help.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
dmullis

ASKER
This is what I wound up using in order for the type not to move up or down, left or right even when just using float left - the content still moved - was pushed around by the javascript.

#flash{
font-family:Verdana;
position:absolute;
float: left;
padding-left:150px;
padding-top:300px;
font-weight:bold;
color:#FFC275;}
dmullis

ASKER
Thank you for your comments above though, I will play with it further based on what you said.
I am not that practised in CSS or Javascript yet.