Solved

<body> tag css not working in FireFox and Safari

Posted on 2007-12-04
16
1,348 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
Industry Leaders: 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

To Patch or not to Patch? That is the question!

Don't get caught out like thousands of others around the world in the recent Ransomware Fiasco!
Discuss..
- Why it's not a good idea to wait before Patching
- Sensible approaches to Patching discussed
- Add your feedback, comments and suggestions

Question has a verified solution.

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

Several part series to implement Internet Explorer 11 Enterprise Mode
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The viewer will learn how to dynamically set the form action using jQuery.
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.

710 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