Incorrect rendering in FireFox, but OK in IE7 and Chrome

[TribeMan]

From a new kid on the block...

I have the code below which renders perfectly in Chrome and IE7, but looks ghastly in FireFox.

Can anyone either tell me what I'm doing wrong, or else point me to a site that shows such incompatibility issues.

Thanks

=====================
<style>
.AccordionTitle, .AccordionContent, .AccordionContainer
{
position: relative;
width: 175px;
padding:0px;
}

.AccordionTitle p
{
font-weight:bold;
padding-top:4px;
padding-left:0px;
}

.AccordionTitle img
{
position:absolute;
right:2px;
bottom:12px;
}

.AccordionTitle
{
height:30px;
overflow:hidden;
cursorointer;
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
font-size:8pt;
font-weight:bold;
text-align:left;
background-repeat:repeat-x;
display:table-cell;
border-top:0px;
background-image:url(accordion.gif);
-moz-user-select:none;
}

.AccordionContent
{
height:0px;
overflow:hidden;
display:none;
}

.AccordionContainer
{
border-top: solid 0px #C0C0C0;
border-bottom: solid 1px #C0C0C0;
border-left: solid 2px #C0C0C0;
border-right: solid 2px #C0C0C0;
}
</style>

<script language="javascript" >
var ContentHeight = 8;
var TimeToSlide = 150.0;
var openAccordion = '';

function runAccordion(index)
{
var nID = "Accordion" + index + "Content";
if(openAccordion == nID)
nID = '';

with (document.getElementById('dir'+index)) {
src='arrowUp.gif'
alt='close this section'
}

if (openAccordion) with (document.getElementById('dir'+openAccordion.replace(/\D/g,''))) {
src='arrowDown.gif'
alt='open this section'
}

setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'"
+ openAccordion + "','" + nID + "')", 33);

openAccordion = nID;
}

function animate(lastTick, timeLeft, closingId, openingId)
{
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;

var opening = (openingId == '') ? null : document.getElementById(openingId);
var closing = (closingId == '') ? null : document.getElementById(closingId);

if(timeLeft <= elapsedTicks)
{
if(opening != null)
opening.style.height = 'auto';
if(closing != null)
{
closing.style.display = 'none';
closing.style.height = '0px';
}
return;
}

timeLeft -= elapsedTicks;
var newClosedHeight = Math.round((timeLeft/TimeToSlide) * ContentHeight);

if(opening != null)
{
if(opening.style.display != 'block')
opening.style.display = 'block';
opening.style.height = (ContentHeight - newClosedHeight) + 'px';
}

if(closing != null)
closing.style.height = newClosedHeight + 'px';
setTimeout("animate(" + curTick + "," + timeLeft + ",'"
+ closingId + "','" + openingId + "')", 33);
}
</script>
</head>

<script language="javascript"><!-- // hide
var accordionOnload = function()
{
runAccordion(3)
}
AddWindowOnload(accordionOnload);
// hide -->
</script>

</head>

<div id="AccordionContainer" class="AccordionContainer">
<div onclick="runAccordion(1);">
<div class="AccordionTitle" onselectstart="return false;">
<p>Calendar</p>
<img id="dir1" src="arrowDown.gif" alt="open this section" />
</div>
</div>
<div id="Accordion1Content" class="AccordionContent">
Some content here
Some content here
Some content here
Some content here
Some content here
Some content here
Some content here
Some content here
Some content here
Some content here
Some content here
Some content here
</div>

<div onclick="runAccordion(2);">
<div class="AccordionTitle" onselectstart="return false;">
<p>Weather</p>
<img id="dir2" src="arrowDown.gif" alt="open this section" />
</div>
</div>
<div id="Accordion2Content" class="AccordionContent">
Some content here
Some content here
Some content here
Some content here
</div>


<div onclick="runAccordion(3);">
<div class="AccordionTitle" onselectstart="return false;">
<p>Maps</p>
<img id="dir3" src="arrowDown.gif" alt="open this section" />
</div>
</div>
<div id="Accordion3Content" class="AccordionContent">
Some content here
Some content here
Some content here
Some content here
</div>

<div onclick="runAccordion(4);">
<div class="AccordionTitle" onselectstart="return false;">
<p>Listings</p>
<img id="dir4" src="arrowDown.gif" alt="open this section" />
</div>
</div>
<div id="Accordion4Content" class="AccordionContent">
Some content here
Some content here
Some content here
Some content here
</div>

<div onclick="runAccordion(5);">
<div class="AccordionTitle" onselectstart="return false;">
<p>Upcoming Events</p>
<img id="dir5" src="arrowDown.gif" alt="open this section" />
</div>
</div>
<div id="Accordion5Content" class="AccordionContent">
Some content here
Some content here
Some content here
Some content here
</div>

</div>

 

[Vragabond]

Since it is not clear from your code:

Do you have a doctype as a first item in the html file? Furthermore, do your HTML and CSS validate? Without these three things, you can't expect your code to look similar across different browsers.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[feherke]

Hi

Setting [tt]position: absolute[/tt] for the rolling direction images sounds like a horrible idea and I can not imagine how that could look acceptably in any browser.

[purple].AccordionTitle[/purple] p
[teal]{[/teal]
[highlight][blue]float:[/blue] [green]left[/green];[/highlight]
[blue]font-weight:[/blue][green]bold[/green];
[blue]padding-top:[/blue][green]4px[/green];
[blue]padding-left:[/blue][green]0px[/green];
[highlight][blue]margin:[/blue] [green]0[/green];[/highlight]
[teal]}[/teal]

[purple].AccordionTitle[/purple] img
[teal]{[/teal]
[highlight][blue]float:[/blue] [green]right[/green];[/highlight]
[highlight][blue]padding-top:[/blue] [green]4px[/green];[/highlight]
[highlight][blue]padding-right:[/blue] [green]2px[/green];[/highlight]
[teal]}[/teal]

[purple].AccordionTitle[/purple]
[teal]{[/teal]
    [highlight][blue]clear:[/blue] [green]both[/green];[/highlight]
    [blue]height:[/blue][green]30px[/green];
    [blue]overflow:[/blue][green]hidden[/green];
    [blue]cursor:[/blue][green]pointer[/green];
    [blue]font-family:[/blue] "[green]lucida[/green] [green]grande[/green]", [green]tahoma[/green], [green]verdana[/green], [green]arial[/green], [green]sans-serif[/green];
    [blue]font-size:[/blue][green]8pt[/green];
    [blue]font-weight:[/blue][green]bold[/green];
    [blue]text-align:[/blue][green]left[/green];
    [blue]background-repeat:[/blue][green]repeat-x[/green];
    [blue]display:[/blue][green]table-cell[/green];
    [blue]border-top:[/blue][green]0px[/green];
    [blue]background-image:[/blue][green]url[/green]([green]accordion.gif[/green]);
    [blue]-moz-user-select:[/blue][green]none[/green];
[teal]}[/teal]

Next time please post your code between [tt][ignore]

[/ignore][/tt] and [tt][ignore]

[/ignore][/tt] TGML tags.

Feherke.

http://free.rootshell.be/~feherke/

 

[TribeMan]

Problem solved.

I simply removed the css: 'display:table-cell;' Now everything works fine in FireFox, IE7 and Chrome.

BTW, I used FireBug to de-bug this one.