Solved

<body> tag css not working in FireFox and Safari

Posted on 2007-12-04
16
1,336 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
  • 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Google chrome pages randomly timing out 3 47
Unwanted gap in IE11 between header and menu 9 20
Remove greater than sign 3 46
CSS issue 8 2
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

867 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now