Solved

<body> tag css not working in FireFox and Safari

Posted on 2007-12-04
16
1,345 Views
Last Modified: 2013-12-07
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;
}
0
Comment
Question by:hoyaabanks
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 5
  • 2
16 Comments
 
LVL 28

Accepted Solution

by:
TName earned 250 total points
ID: 20409453
>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
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20409460
> 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
 
LVL 29

Assisted Solution

by:Göran Andersson
Göran Andersson earned 250 total points
ID: 20409474
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 28

Expert Comment

by:TName
ID: 20409590
@hoyaabanks

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

0
 

Author Comment

by:hoyaabanks
ID: 20409630
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
 
LVL 28

Expert Comment

by:TName
ID: 20409709
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
 

Author Comment

by:hoyaabanks
ID: 20417548
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
 

Author Comment

by:hoyaabanks
ID: 20417553
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
 
LVL 28

Expert Comment

by:TName
ID: 20418260
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
 

Author Comment

by:hoyaabanks
ID: 20421389
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
 
LVL 28

Expert Comment

by:TName
ID: 20424053
>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
 

Author Comment

by:hoyaabanks
ID: 20424212
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
 
LVL 28

Expert Comment

by:TName
ID: 20424434
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
 
LVL 28

Expert Comment

by:TName
ID: 20433693
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

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

735 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question