Keskustelu: Nettisivujen teko: CSS ongelmia eri selainten kanssa

* {
	margin:0;
  padding:0;
}
html body {
  height: 100%;
}

a {
  color: black;
  text-decoration: none;
}
a:hover {
  color: black;
  text-decoration: underline;
}

body {
  margin: 0px;
  padding: 0px;
  background-image:url(images/background.jpg);
	background-repeat:repeat;
	background-color:#333333;
}
#all {
  min-width: 100%;
  width: 100%;
  min-height: 100%;
  position: absolute;
  height: 100%;

}
#content {
  width: 100%;
}

#header {
  background-image: url(images/header_bg.jpg);
	background-repeat: repeat-x;
	text-align: center;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
  width: 100%;
}
#leftcol {
  float: left;
  width: 18%;
  height: 50%;
  text-align: left;
  margin-right: 3px;
}
#rightcol {
  float: right;
  width: 18%;
  height: 50%;
  margin-left: 5px;
}
#sisalto {
  width: 63%;
  height: auto;
  text-align: left;
}
#footer {
  margin-top: 130px;
  float: right;
  position: relative;
  bottom: 0px;
  height: 240px;
  width: 100%;
  text-align: center;
}
#picture {
  float: left;
}

.nowplaying{
  position: absolute;
  left: 18%;
	width: 70%;
	height: 120px;
	text-align: left;
	background-image: url(images/np_bg2.jpg);
	background-repeat: no-repeat;
}

div.nowplaying img{
	margin:5px;
	border:2px solid #333333;
}

.news {
	position: relative;
	top: 120px;
	width:auto;
	height:auto;
	background-color: #CCCCCC;
	margin-bottom: 10px;
	filter:alpha(opacity=80);
	opacity:0.8;
	border: 2px solid #333333;
}

.toivokap {
	width:auto;
	height:auto;
	background-color: #CCCCCC;
	margin-bottom: 10px;
	filter:alpha(opacity=80);
	opacity:0.8;
	border: 2px solid #333333;
}

/*tekstit*/


p{
  font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #222222;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 5px;
}


h2{
	color:#CCCCCC;
	font-family:Impact, Arial, Verdana, Helvetica;
	font-size:16px;
	letter-spacing:0.1em;
	font-weight:lighter;
	background-repeat: no-repeat;
	margin-top: 10px;
	padding-left: 20px;
}


h3{
	color:#D61112;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	padding-top: 5px;
	padding-left: 20px;
}


h4{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
}


#side-a{
	float: right;
	width: auto;
	background-color: #333333;
	margin-bottom:5px;
	margin-right:5px;
	padding:5px;
	border: 2px solid #CCCCCC;
	filter:alpha(opacity=80);
	opacity:0.8;
  margin-top: 10px;
}


span.highlight
{
	background-color:#333333
}


/*** Nav bar styles ***/

ul a { color:#CCCCCC;}
ul.nav,
.nav ul{

/*Remove all spacings from the list items*/
	margin: 0;
	padding: 0;
	cursor: default;
	list-style-type: none;
	font-family:Impact, Arial, Verdana, Helvetica;
	font-size:16px;
	color:#CCCCCC;
}


ul.nav{
	width: auto;
}

ul.nav>li{
	margin: 0;
	padding: 0;
}


/*ul.nav li>ul{
Make the sub list items invisible
	display: block;
	font-size:10px;
	font-family:Arial, Helvetica, sans-serif;
}
*/
/*
ul.nav li:hover>ul{
/*When hovered, make them appear
	display : block;
}
*/

.nav ul li a{
/*Make the hyperlinks as a block element, sort of a hover effect*/
	display: block;
	padding: 2px 10px;
  color:#CCCCCC;
}


/*** Menu styles (customizable) ***/

ul.nav,
.nav ul,
.nav ul li a{
	background-color: #333;
	color: #CCC;
}

ul.nav li:hover,
.nav ul li a:hover{
	background-color: #990000;
	color: #CCC;
}

ul.nav li:active,
.nav ul li a:active{
	background-color: #990000;
	color: #CCC;
}

ul{

}

.nav a{
	text-decoration: none;
	color:#CCCCCC;
}

/************** toivo kappale määritteet **************/

td#toivo {
  width: 33%;
  vertical-align: text-top;
  }

/***************** Now Playing palkki *****************/
/* td palkki missä artist album ym. tekstit */
td.ni {
  text-align: right;
  background-color: #333333;
  padding: 0 5 3 0;
	filter:alpha(opacity=80);
	opacity:0.8;
}
/* td palkki missä harmaat divit */
td.si {
  width: 130px;
}


/* harmaat palkit */
div.np {
  float: left;
	white-space : nowrap;
  width: 100%;
	height:auto;
  text-align: left;
	background-color: #CCCCCC;
	filter:alpha(opacity=80);
	opacity:0.8;
	border: 2px solid #333333;
	padding: 0 20 0 20;
}
#artist {
  width: 100%:
}
#album {
  width: 100%:
}
#title {
  width: 100%:
}
#countDownText {
  width: 100%:
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>StageRadio.com</title>

  <link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style>#sisalto {width: 100%;height: auto;text-align: left;} .news{left:0px;}</style>
<![endif]-->




<script language="JavaScript">

	var http = getXMLHTTPRequest();
	var counter;

      function getXMLHTTPRequest() {
      try {
      req = new XMLHttpRequest();
      } catch(err1) {
        try {
        req = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (err2) {
          try {
          req = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (err3) {
            req = false;
          }
        }
      }
      return req;
      }



      function getServerText() {
        var myurl = 'http://www.stageradio.com/aj_TimeRemain.php'; // enter the full path to the aj_TimeRemain.php path
        myRand = parseInt(Math.random()*999999999999999);
        var modurl = myurl+"?rand="+myRand;
        http.open("GET", modurl, true);
        http.onreadystatechange = useHttpResponse;
        http.send(null);
      }

      function useHttpResponse() {
               if (http.readyState == 4) {
          if(http.status == 200) {
          	// parse data returned from aj_TimeRemain.php
          	var aj_results = http.responseText.split("|");

          	var aj_duration = aj_results[0];
          	var aj_secsremaining = aj_results[1];
          	var aj_title = aj_results[2];
          	var aj_artist = aj_results[3];
          	var aj_picture = aj_results[4];
          	var aj_album = aj_results[5];

          	// update title and artist divs

          	document.getElementById('title').innerHTML =  aj_title;
          	document.getElementById('album').innerHTML =  aj_album;
          	document.getElementById('artist').innerHTML =  aj_artist;
          	document.getElementById('picture').innerHTML = "<img src=/albumart/" + aj_results[4] +" width='100' height='100'>"


            //set seconds remaining to the countdown car - adding '-0' to convert to number

            countDownInterval = aj_secsremaining - 0;
            countDownTime = countDownInterval + 1;
            countDown()
          }
        } else {
        //document. getElementById('actual').innerHTML = "";
        }
      }




    function countDown() {
      countDownTime--;
      if (countDownTime == 0) {
        countDownTime = countDownInterval;
        getServerText()
      }
      else if (countDownTime < 0)
        countDownTime = 30;
      if (document.all)
        document.all.countDownText.innerText = secsToMins(countDownTime);
      else if (document.getElementById)
        document.getElementById("countDownText").innerHTML = secsToMins(countDownTime);
      stopCountDown();
      counter = setTimeout("countDown()", 1000);
    }

    function secsToMins(theValue) {
      var theMin = Math.floor(theValue / 60);
      var theSec = (theValue % 60);
      if (theSec < 10)
        theSec = "0" + theSec;
      return(theMin + ":" + theSec);
    }

	function stopCountDown()
		{
		clearTimeout(counter)
		}

</script>






  <script language="JavaScript1.2"><? require("songinfo.js"); ?></script>

<script type="text/javascript" language="javascript">

function chat()
{
   OpenWindow=window.open("forum/chat/index.php","chat","height=500","width=700","toolbar=no","scrollbars=no","menubar=no");
}
</SCRIPT>

<script type="text/javascript" language="javascript">

function keskustelupalsta()
{
   OpenWindow=window.open("forum/index.php","chat");
}
</SCRIPT>

<script type="text/javascript" language="javascript">


<?
//lataa soittimen
?>
<!--
function player1(stationID, relayID)
{
	var path = "http://www.audiorealm.com";
	listenwin = window.open(path+"/listen.html?stationID="+stationID , "_AR_listen", "");
}

function player(stationID, relayID)
{
	player_popup(stationID,0);
}


function player_popup(stationID,publisherID)
{
	popup_center('http://player.spacialnet.com/players/player.html?stationID='+stationID+'&publisherID='+publisherID,"_player",706,526,'');
	return false;
}

function popup_center(mylink, windowname, w, h)
{
	if((w<=0)||(w==null)) w = 706;
	if((h<=0)||(h==null)) h = 526;

	var x = (screen.availWidth / 2) - (w / 2);
	var y = (screen.availHeight / 2) - (h / 2);

	if (!window.focus)return true;
	var href;
	if (typeof(mylink) == 'string')
	   href=mylink;
	else
	   href=mylink.href;

	winref = window.open(href, windowname, 'width='+w+',height='+h+',location=no,status=no,menubar=no,scrollbars=no,left='+x+',top='+y);
	return winref;
}

-->
</script>


<? require("req/request.java.php"); ?>

<script language="JavaScript1.2">
function PictureFail(picname) {
    if (document.images)
	 {
        document.images[picname].width   = 1;
		document.images[picname].height  = 1;
	 }
 }
</script>

<script type="text/javascript" src="ajax.js"></script>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.1");
</script>


		<script type="text/javascript">
		<!--
		function getWindowHeight() {
			var windowHeight = 0;
			if (typeof(window.innerHeight) == 'number') {
				windowHeight = window.innerHeight;
			}
			else {
				if (document.documentElement && document.documentElement.clientHeight) {
					windowHeight = document.documentElement.clientHeight;
				}
				else {
					if (document.body && document.body.clientHeight) {
						windowHeight = document.body.clientHeight;
					}
				}
			}
			return windowHeight;
		}
		function setFooter() {
			if (document.getElementById) {
				var windowHeight = getWindowHeight();
				if (windowHeight > 0) {
					var contentHeight = document.getElementById('content').offsetHeight;
					var footerElement = document.getElementById('footer');
					var footerHeight  = footerElement.offsetHeight;
					if (windowHeight - (contentHeight + footerHeight) >= 0) {
						footerElement.style.top = (windowHeight - (contentHeight + footerHeight)) + 'px';
					}
					else {
						footerElement.style.top = '0px';
					}
				}
			}
		}
		window.onload = function() {
			setFooter();
		}
		window.onresize = function() {
			setFooter();
		}
		//-->
		</script>


  </head>
  <body onload="getArtists(); getServerText();">

<div id="content">
<div id="header">
      <img src="images/header.jpg" alt="StageRadio.com" width="1000" height="146" />
</div>

<?php include('nav.php');?>

<div id="leftcol">
	<div id="side-a">
	<ul class="nav">
<li><a href="index.php">Etusivu</a></li>
<li>Kuuntele
	<ul>
	<li><a href='javascript:player(116464,-1)'>Soittimella</a></li>
	<li><a href="http://www.stream101.com/login/castcontrol/playlist.php?id=417">Winamp</a></li>
	<li><a href="http://www.stream101.com/login/castcontrol/playlist.php?id=417&type=asx">Windows Media Player</a></li>
	<li><a href="http://www.stream101.com/login/castcontrol/playlist.php?id=417&type=ram">Real Player</a></li>
	</ul></li>
<li><a href='javascript:keskustelupalsta()'>Keskustelupalsta</a></li>
<li><a href='javascript:chat()'>Chat</a></li>
<li><a href="toivokap.php">Toivo Kappale</a></li>
</ul>
</div></div>

<?php
include ('header.php');

 // oikea puoli sivusta eli paikka jossa bannerit on
?>

<div id="rightcol">
  <img src="images/banneri.gif" alt="Mainos" />
</div>

<?php // Content laatikko! Tähän tulee se vaihtuva informaatio.

include("playinfo.php");


//kuinka monta uutista tulostetaan?

// Make a MySQL Connection
mysql_connect("***********", "***********", "***********") or die(mysql_error());
mysql_select_db("stagerad_news") or die(mysql_error());

// Retrieve all the data from the "example" table
$result = mysql_query("SELECT * FROM news ORDER BY date DESC LIMIT 4")
or die(mysql_error());
?>
    <h2><span class="highlight">News!</span></h2>
<?php

while($row = mysql_fetch_array($result)){
    echo "<div class='news'><h3>".$row['date']." - ".$row['headline']."</h3>";
    echo "<p> ".$row['text']."</p></div>";
}
?>
</div>
<?php include ('footer.php');?>

<div id="sisalto">
  <div class="nowplaying">
  <table>
    <tr>
      <td width="1%"><img src="images/nowpalying.gif" alt="now playing" /></td>
      <td width="1%">
        <div id="picture"></div>
      </td>
      <td>
        <table border="0">
          <tr><td class="ni"><h3>Artist:</h3></td><td class="si"><div class="np"><div id="artist"></div></div></td></tr>
          <tr><td class="ni"><h3>Album:</h3></td><td class="si"><div class="np"><div id="album"></div></div></td></tr>
          <tr><td class="ni"><h3>Song:</h3></td><td class="si"><div class="np"><div id="title"></div></div></td></tr>
          <tr><td class="ni"><h3>Remain:</h3></td><td class="si"><div class="np"><div id="countDownText"></div></div></td></tr>
        </table>
      </td>
    </tr>
  </table>
  </div>