css style problem

[radujit]

Hi,
I am using one of the built-in jquery slider scripts. Everything works fine in explorer, but in Firefox, Opera and Chrome is messed up.


Here is the style:

<style type="text/css">

.clear {
	clear:both
}

#gallery {
	position:relative;
	height:237px
}
	#gallery a {
		float:left;
		position:absolute;
	}
	
	#gallery a img {
		border:none;
	}
	
	#gallery a.show {
		z-index:250
	}

	#gallery .caption {
		z-index:350; 
		background-color:#000; 
		color:#ffffff; 
		height:0px; 
		width:100%; 
		position:absolute;
		bottom:0;
	}

	#gallery .caption .content {
		margin:5px
	}
	
	#gallery .caption .content h3 {
		margin:0;
		padding:0;
		color:#009933;
	}
	

</style>

Here is the link to the website:
http://www.iisconsult.ro

is the slider on the left down the flash.

[traq]

what do you mean by, "Firefox, Opera and Chrome is messed up" ?
I see a slider at the bottom of the page you linked to, but it appears to be functioning normally (viewed in Fx 3.6.17).

Your question is unclear.
Please explain your question in more detail. What are you trying to achieve? What is going wrong? What have you already done to try to fix it? Please be as specific as possible.

[jscheuer1]

I see the slider in IE on the left under the Flash element like you say.

There is a problem with the js/ora.js file due to its being outdated and given to browser sniffing.

Replace its contents with:

if (document.layers) {
document.write('<layer id="orologio"></layer><br>');
}
if (document.getElementById){
document.write('<span id="orologio"></span>');
}
GiornodellaSettimana = new Array()
	GiornodellaSettimana[0]="DUMINICA"
	GiornodellaSettimana[1]="LUNI"
	GiornodellaSettimana[2]="MARTI"
	GiornodellaSettimana[3]="MIERCURI"
	GiornodellaSettimana[4]="JOI"
	GiornodellaSettimana[5]="VINERI"
	GiornodellaSettimana[6]="SAMBATA"

Mese = new Array()
	Mese[0]="IANUARIE"
	Mese[1]="FEBRUARIE"
	Mese[2]="MARTIE"
	Mese[3]="APRILIE"
	Mese[4]="MAI"
	Mese[5]="IUNIE"
	Mese[6]="IULIE"
	Mese[7]="AAUGUST"
	Mese[8]="SEPTEMBRIE"
	Mese[9]="OCTOMBRIE"
	Mese[10]="NOIEMBRIE"
	Mese[11]="DECEMBRIE"

function avvia_orologio(){
var dte = new Date();
var ora = dte.getHours();
var min = dte.getMinutes();
var sec = dte.getSeconds();
var giorno = GiornodellaSettimana[dte.getDay()]
var data = dte.getDate()
var mese = Mese[dte.getMonth()]
var anno = dte.getFullYear()

var col = ":";
var spc = " ";
var com = ",";
var apm;
if (12 < ora) {
apm=" PM";
ora-=12;
}
else {
apm=" AM";
}
if (ora == 0) ora = 12;
if (ora <= 9) ora = "0" + ora;
if (min <= 9) min = "0" + min;
if (sec <= 9) sec = "0" + sec;
if(document.layers) {
document.orologio.document.write(giorno+com+spc+data+spc+mese+spc+anno+spc+ora+col+min+col+sec+apm);
document.orologio.document.close();
}
if (document.getElementById) {
document.getElementById('orologio').innerHTML = giorno+com+spc+data+spc+mese+spc+anno+spc+ora+col+min+col+sec+apm;
}
}

setInterval("avvia_orologio()", 1000);

But, that won't solve the problem with the slider. If I 'view source' in IE I see (starting at line #430):

            <td width="375"><center>

<div style="position:relative;left:-190;top:-124">

<div id="gallery">
	<a href="manrisc.asp" class="show">
		<img src="img/1.png" width=375 height=237 title="" alt="" rel="<h3>Managementul riscului si lichiditatii</h3>Produse standardizate create pentru a optimiza cash-flowul societatilor comerciale "/>
	</a>
	
	<a href="finantare.asp">
		<img src="img/3.png" width=375 height=237 title="" alt="" rel="<h3>Asistenta finantari</h3>Consultanta in identificarea celei mai bune solutii de finantare, pregatirea documentatiei necesare precum si orice alte servicii pana la semnarea efectiva a contractului de finantare "/>
	</a>
	
	<a href="categorii.asp?cid=3">
		<img src="img/2.png" width=375 height=237 title="" alt="" rel="<h3>Raportul zilnic de piata</h3>Din cuprins: Principalele evenimente de pe pietele din Romania, Asia, Europa si SUA, studii de analiza tehnica companii, indici bursieri, perechi valutare, marfuri."/>
	</a>
	<a href="decenoi.asp">
		<img src="img/6.png" width=375 height=237 title="" alt="" rel="<h3>Investitii si plasamente</h3>Servicii de asistenta plasamente pe diferite piete financiare, studii si analize, consultanta"/>
	</a>
	
	<a href="educatie.asp">
		<img src="img/4.png" width=375 height=237 title="" alt="" rel="<h3>Educatie</h3>Resurse online, webminarii si training in-house pe diferite teme: managementul riscului si lichiditatii, analiza tehnica, project management, tehnici de arbitraj"/>
	</a>
	
	<a href="categorii.asp?cid=8">
		<img src="img/5.png" width=375 height=237 title="" alt="" rel="<h3>Macroeconomie</h3>Calendar macroeconomic zilnic si rapoarte periodice privind: PIB, rata inflatiei, crestere economica, piata muncii s.a. pentru economiile internationale, dar si pentru cea romaneasca."/>
	</a>
		
	
	<div class="caption"><div class="content"></div></div>
</div>
</div>

<div style="position:relative;left:0;top:-105">  <BR> <a name = "articole">

In Firefox 'view source' the same section appears as:

            <td width="375"><center>


<div style="position:relative;left:0;top:-105">  <BR> <a name = "articole">

The entire gallery markup is missing. I have no idea why that is, do you?

In any case, if I make a local mock up of the page and use the updated ora.js and make the gallery section like so:

            <td width="375"><!--[if IE]>
<center>
<![endif]-->

<div style="position:relative;left:-190;top:-124">

<div id="gallery">
	<a href="manrisc.asp" class="show">
		<img src="img/1.png" width=375 height=237 title="" alt="" rel="<h3>Managementul riscului si lichiditatii</h3>Produse standardizate create pentru a optimiza cash-flowul societatilor comerciale "/>
	</a>
	
	<a href="finantare.asp">
		<img src="img/3.png" width=375 height=237 title="" alt="" rel="<h3>Asistenta finantari</h3>Consultanta in identificarea celei mai bune solutii de finantare, pregatirea documentatiei necesare precum si orice alte servicii pana la semnarea efectiva a contractului de finantare "/>
	</a>
	
	<a href="categorii.asp?cid=3">
		<img src="img/2.png" width=375 height=237 title="" alt="" rel="<h3>Raportul zilnic de piata</h3>Din cuprins: Principalele evenimente de pe pietele din Romania, Asia, Europa si SUA, studii de analiza tehnica companii, indici bursieri, perechi valutare, marfuri."/>
	</a>
	<a href="decenoi.asp">
		<img src="img/6.png" width=375 height=237 title="" alt="" rel="<h3>Investitii si plasamente</h3>Servicii de asistenta plasamente pe diferite piete financiare, studii si analize, consultanta"/>
	</a>
	
	<a href="educatie.asp">
		<img src="img/4.png" width=375 height=237 title="" alt="" rel="<h3>Educatie</h3>Resurse online, webminarii si training in-house pe diferite teme: managementul riscului si lichiditatii, analiza tehnica, project management, tehnici de arbitraj"/>
	</a>
	
	<a href="categorii.asp?cid=8">
		<img src="img/5.png" width=375 height=237 title="" alt="" rel="<h3>Macroeconomie</h3>Calendar macroeconomic zilnic si rapoarte periodice privind: PIB, rata inflatiei, crestere economica, piata muncii s.a. pentru economiile internationale, dar si pentru cea romaneasca."/>
	</a>
		
	
	<div class="caption"><div class="content"></div></div>
</div>
</div>

<div style="position:relative;left:0;top:-105">  <BR> <a name = "articole">

And change the DOCTYPE (from the top of the page):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">

to:

<!DOCTYPE html>

Things work out well in IE and Firefox.

The one thing I can't figure out as I said before is why the gallery markup is missing in Firefox. That would appear to be something on the server side causing it. But I suppose it could be something else. Again, any ideas?

Oh, and in a tangentially related matter you'll need to add this (highlighted):

<SCRIPT language=JavaScript>document.write('<marquee id="iescroller" direction="left" width="900" height="15" scrollamount="2" scrolldelay="20" style="border:0 solid red;background-color:#FFFFFF">');
var iescroller = document.getElementById('iescroller');
    iescroller.onmouseover=new Function("iescroller.scrollAmount=0");
iescroller.onmouseout=new Function("iescroller.scrollAmount=2");

document.write('<font size="1" face="Verdana" color="#000000">')

to that script to have it work in Firefox with the new DOCTYPE. Some styles may need to be reworked as well.