Embedded Javescript won't respond to CSS alignment

Hello all!

Bit of an issue here. I redesigned my splash page to feature a clock of the current time. I want to center this clock with a horizontal rule below.

The problem is that nothing I do centers the thing! It will respond to margin and positioning declarations. But other declarations, such as text-align: center or margin-left: auto (etc.) don’t work. HTML center tags aren’t affecting the text either.

Here’s the code in the HTML file:

<div id="header">
<h5 class="enlarge"><script type="text/javascript">
<!--

var d = new Date();
var curr_hour = d.getHours();
var curr_min = d.getMinutes();

var curr_sec = d.getSeconds();
var curr_msec = d.getMilliseconds();

document.write(curr_hour + ":" + curr_min + ":" 
+ curr_sec + ":" + curr_msec);

//-->
</script></h5>

And the relevant CSS:

#header {
	top: -20px;
	font-size: 30pt;
	font-weight: bold;
}

h1, h2, h3, h4, h5, h6 {
	position: absolute;
	margin: 80px 0 0 0;
	font-size: 135%;
	color: white;
}

h5.enlarge {
     font-size: 200%;
}

Ideas?

Hi kp606, Welcome to SitePoint :slight_smile:

What I see missing from the code you posted is a containing block for your Absolute Positioned h5. Since it is nested in your header then that would be the logical place to establish the containing block. That is done by simply setting position:relative; on the header.

The problem is that nothing I do centers the thing!
I’m sure there is a better way to go about it besides the AP’d h5. When centering elements with auto margins they must have a width but auto margins do not work with absolute positioning.

Let’s just do away with that absolute positioning on the h5 so we can use text-align:center; on the header div to center the h5. You really don’t need to use an h5 either but that is beside the point.

Try this instead

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>
<style type="text/css">
#wrapper {
    width:800px;
    margin:40px auto;
    padding:10px;
    background:lime;
}
#header {
    width:800px;
    margin:0 0 20px;
    font-size:40px;
    font-weight: bold;
    background:red;
    text-align:center;
}
h5.enlarge{
    margin:0;
    font-size:200%;
    color: white;
}
p{margin:0 0 20px;}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h5 class="enlarge"><script type="text/javascript">
        <!--
        
        var d = new Date();
        var curr_hour = d.getHours();
        var curr_min = d.getMinutes();
        
        var curr_sec = d.getSeconds();
        var curr_msec = d.getMilliseconds();
        
        document.write(curr_hour + ":" + curr_min + ":" 
        + curr_sec + ":" + curr_msec);
        
        //-->
        </script></h5>
    </div>
    <p>Filler text below the header</p>
    <p>Filler text below the header</p>
    <p>Filler text below the header</p>
    <p>Filler text below the header</p>
    <p>Filler text below the header</p>
    <p>Filler text below the header</p>
</div>
</body>
</html>

Thank you Rayzur!