<body> tag css not working in FireFox and Safari

Take a look at this url in both FIreFox and Internet Explorer

http://www.abdcweb.com/Demo/html/clientlist.html

It is supposed to:

1.  Fade background from white to black when the page loads
2.  Fade content in after background fade is complete

When the user clicks on a menu link other than our work:

1.  Fade content out before exit
2.  Fade background to white before exit
3.  jump user to other html page

IT WORKS THE WAY IT SHOULD IN EXPLORER!  However the background doesn't fade in or out.

The background is associated with the body tag.  I get the same issue with www.abdcweb.com.  It does not align the <body> tag CSS text-align: center.  

What are the best practices to get around this and make these things work in mozilla browsers?


============================
JAVASCRIPT CODE FILE
============================

// JavaScript Document
// Created by Alex Banks Development Company
// www.abdcweb.com


//This script initiates colors as white.
red = 255;
green = 255;
blue = 255;
inc = 10;
delay = 30;
ie5  = (document.all && document.getElementById);
ns6 = (!document.all && document.getElementById);
opac = 0;
opac2 = 100;
contentLayer = "ct";
selectedURL = "";

//This Function Fades the Background Color To Black
//Control timeing of fade with the delay value
function FadeBlack()
{
      red -= inc;
      green -= inc;
      blue -= inc;
      if (red <= 0)
      {
            FadeContentIn();
            return;
      }
      document.bgColor = get_hex_color (red, green, blue);
      setTimeout ("FadeBlack()", delay);
}
 
function FadeContentIn() {
    if(opac < 100){
        opac+=inc;
        if(ie5) document.getElementById('ct').filters.alpha.opacity = opac;
        if(ns6) document.getElementById('ct').style.MozOpacity = opac/100;
        setTimeout('FadeContentIn()', delay);
    }
}

function FadeContentOut() {
    if(opac2 > 0){
        opac2-=inc;
        if(ie5) document.getElementById('ct').filters.alpha.opacity = opac2;
        if(ns6) document.getElementById('ct').style.MozOpacity = opac2/100;
        setTimeout('FadeContentOut()', delay);
    } else {
            FadeWhite();      
      }
}

function NavClick(URL) {
      selectedURL = URL;
      FadeContentOut();
}

//This Function Fades the Background Color To Black
//Control timeing of fade with the delay value
function FadeWhite()
{
      red += inc;
      green += inc;
      blue += inc;
      if (red >= 255)
      {
            GetURL(selectedURL);
            return;
      }
      document.bgColor = get_hex_color (red, green, blue);
      setTimeout ("FadeWhite()", delay);
}

function GetURL(URL) {
      window.location = URL;      
}

//This functino will translate color values to Hexidecimal Format
function get_hex_color (r, g, b)
{
      var hexstring = "0123456789abcdef";
      var hex_color =
            hexstring . charAt (Math . floor (r / 16))
      +      hexstring . charAt (r % 16)
      +      hexstring . charAt (Math . floor (g / 16))
      +      hexstring . charAt (g % 16)
      +      hexstring . charAt (Math . floor (b / 16))
      +      hexstring . charAt (b % 16);
      return hex_color;
}
hoyaabanksAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

TNameCommented:
>I get the same issue with www.abdcweb.com.  It does not align the <body> tag CSS text-align: center.

According to the specifications, "text-align: center"  is NOT supposed to align block content (only inline content), it will work in IE for block content, but tht's not standard behaviour.
To center block content, use "margin: auto" on the element to be centered, e.g. in this case:
  "margin: 0 auto"  for the wrapper div  (or give the form a limited width and assign "margin: 0 auto" to the form...)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Göran AnderssonCommented:
> IT WORKS THE WAY IT SHOULD IN EXPLORER!

As always, if the page renders differently in Intertnet Explorer and Firefox, Firefox renders it correctly, and IE doesn't.

You should start with cleaning up the code. You have two body tags in it.

In your css, you have forgotten the units on the measurements in the clip style. Change

clip:rect(0,800,800,0);

to:

clip:rect(0,800px,800px,0);

> It does not align the <body> tag CSS text-align: center.

Of course not. It shouldn't. There is a bug in IE that makes it apply text alignment to block elements also.

To center a div in the page, use auto margins:

.CenteredContent { width: 400px; margin-left: auto; margin-right: auto; }
0
Göran AnderssonCommented:
The bcColor property is deprecated. Use css instead:

document.style.backgroundColor = get_hex_color (red, green, blue);

The get_hex_color function doesn't return a correct color code. It's missing the # at the beginning of the string:

function get_hex_color (r, g, b)
{
      var hexstring = "0123456789abcdef";
      var hex_color =
      '#'
      +      hexstring . charAt (Math . floor (r / 16))
      +      hexstring . charAt (r % 16)
      +      hexstring . charAt (Math . floor (g / 16))
      +      hexstring . charAt (g % 16)
      +      hexstring . charAt (Math . floor (b / 16))
      +      hexstring . charAt (b % 16);
      return hex_color;
}
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

TNameCommented:
@hoyaabanks

I'm somewhat puzzeled: was my answer not the first valid solution for one of the problems you mentioned?

0
hoyaabanksAuthor Commented:
Actually I shouldn't have marked as solved.  I was very confident with


document.style.backgroundColor

However this throws an error in IE and simply does not work in FireFox.  It says that document.style is null or not an object.  How can I change the style of the page background in the javascript?

0
TNameCommented:
Try document.body.style.backgroundColor
or
document.getElementsByTagName('body')[0].style.backgroundColor

Also, in the html, you should also replace bgcolor="050505" with style="background-color:#050505;"
0
hoyaabanksAuthor Commented:
If Setting Margin to auto makes yoru content centerd horozontally within the body tag, how to you center content vertically?

Example

<body>
   <div>

   </div>
0
hoyaabanksAuthor Commented:
Example
<style>
#myContent {
   margin: auto;
    height: 500px;
    width: 500px;
    border: thin solid #999999;
}
</style>

<body>
<div id="myContent">Hello World</div>
</body>


===============
How do I get t his div to align in the middle Ivert, horz) part of the page.
0
TNameCommented:
Vertically centering is a very different matter and often a problem, as there is no general solution: it depends on several factors.
*In this situation*, I would use absolute positioning and center vertically AND horizontally by setting top/left and negative margin values (half the width/height). But this only works because the dimensions of the div are known...
Also, in case you want to place this div inside another element (e.g. another div), don't forget to position that parent element also, e.g. with "position:relative".



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>

#myContent {  
    height: 500px;
    width: 500px;
    border: thin solid #999999;
      position:absolute;
      top:50%;
      left:50%;
      margin-left:-250px;
      margin-top:-250px;
}
</style>
</head>
<body>
  <div id="myContent">Hello World</div>
</body>
</html>

0
hoyaabanksAuthor Commented:
Okay, thank you.  I am learning a lot about these layouts.  

My next question is How to align you div to the vertical center of a div?

Also can you recommend a resource or tutorial for advanced CSS layouts?  I am learning a ton here and I want everything I build to work accross browsers as well.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>

#myContent {  
      position: relative;
    height: 500px;
    width: 500px;
    border: thin solid #999999;
    top:50%;
    left:50%;
    margin-left:-250px;
    margin-top:-250px;
}
#wrapper {
      margin: auto;
      width: 650px;
      border: thin solid #FF0000;
}
</style>
<title>Centering Content</title></head>
<body>
<div id="wrapper">
  <div id="myContent">Hello World</div>
 </div>
</body>
</html>
0
TNameCommented:
>My next question is How to align you div to the vertical center of a div?

I'm not sure what you mean, but if you want to canter a div inside another div in your example, you should give the wrapper a heigth:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
#myContent {  
      position: relative;
    height: 500px;
    width: 500px;
    border: thin solid #999999;
    top:50%;
    left:50%;
    margin-left:-250px;
    margin-top:-250px;
}
#wrapper {
      margin: auto;
      width: 650px;
        height:650px;
      border: thin solid #FF0000;       
}
</style>
<title>Centering Content</title></head>
<body>
<div id="wrapper">
  <div id="myContent">Hello World</div>
</div>
</body>
</html>
0
hoyaabanksAuthor Commented:
Finally is it possible to position Div's within div's realitivly?

Exapmple.  Having the myContent Div always appear 10px from the top and 25px from the left of the wrapper div?
0
TNameCommented:
Just set the values for top and left to 10px and 25px and
either position the inner div relatively:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
#myContent {  
    position: relative;
    height: 500px;
    width: 500px;
    border: thin solid #999999;
    top:10px;
    left:25px;    
}
#wrapper {
      margin: auto;
      width: 650px;
        height:650px;
      border: thin solid #FF0000;       
}
</style>
<title>Centering Content</title></head>
<body>
<div id="wrapper">
  <div id="myContent">Hello World</div>
</div>
</body>
</html>


or position the inner div absolutely AND the outer div relatively:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
#myContent {  
    position: absolute;
    height: 500px;
    width: 500px;
    border: thin solid #999999;
    top:10px;
    left:25px;    
}
#wrapper {
      margin: auto;
      width: 650px;
        height:650px;
      border: thin solid #FF0000;       
        position:relative;
}
</style>
<title>Centering Content</title></head>
<body>
<div id="wrapper">
  <div id="myContent">Hello World</div>
</div>
</body>
</html>




0
TNameCommented:
Now could you please also answer my question from post 20409590:
  "was my answer not the first valid solution for one of the problems you mentioned?"
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.