Solved

<body> tag css not working in FireFox and Safari

Posted on 2007-12-04
16
1,334 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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

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.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
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.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

760 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

21 Experts available now in Live!

Get 1:1 Help Now