Cross-Browser Issues, Huge Problem

[Boonzeet]

Right. Firefox is being strange.

Here's two screenshots of the exact same website. Google Chrome, Safari, Opera, Safari for iPhone, Internet Explorer, the list goes on, all display the source code fine. But for some reason when it gets to Firefox, it won't stand it.

Chrome: http://bb.xieke.com/files/screenshotchrome.png
Firefox: http://bb.xieke.com/files/screenshotfirefox.png

I've fixed the sidebar issues, but the Breadcrumbs bar is still broken. I've tried absolutely everything. This is the code for the bar & '?' logo:


<center>
<div style="width: 920px; min-width: 970px; height: 19px;" align="center">
<div style="float: right; padding-top: 4px;">
<a href="/help/">
<img src="http://127.0.0.1/help.png" border="0" />
</a>
</div><div align="left" style="vertical-align: top;">
<table cellspacing='0' cellpadding='0'><tr><td style="padding-top: 9px; margin-left: 9px;" valign="bottom">
<?php
function CPbreadcrumbs() {
$CPtheFullUrl = $_SERVER["REQUEST_URI"];
$CPurlArray=explode("/",$CPtheFullUrl);
echo '<a href="/">Home</a>';
while (list($CPj,$CPtext) = each($CPurlArray)) {
$CPdir='';
if ($CPj > 1) {
$CPi=1;
while ($CPi < $CPj) {
$CPdir .= '/' . $CPurlArray[$CPi];
$CPtext = ucwords($CPurlArray[$CPi]);
$CPi++;
}
if($CPj < count($CPurlArray)-1) echo '</td><td class="warrior" style="background-image: url(\'http://127.0.0.1/arrow.png\')" width="29px" height="41px"></td><td>&nbsp;&nbsp;<a href="'.$CPdir.'">' . str_replace(" ", " ", $CPtext) . '</a>&nbsp;&nbsp;';
}
}
echo '</td><td class="warrior" style="background-image: url(\'http://127.0.0.1/arrow.png\')" width="29px" height="41px"></td><td>&nbsp;'; echo wp_title('');}
CPbreadcrumbs();
?></td></tr></table></div>

And the class Warrior;

.warrior{
background-repeat: none;
background-position: top center;
padding-top: -6px;
}


Please, I need this sorted. I promised readers it would be pushed out on Christmas Eve, I can't let them down.

Thanks so much in advance, Boonzeet.

[Jamesy]

I'm not sure you can have a negative padding

[Boonzeet]

The negative padding doesn't do anything, I'm aware. It was a test, I'm still exploring CSS. I would try a negative margin, but then that'd upset all the other browsers.

Any ideas?

[Agnostic Bear]

vertical-align: middle;

i have no idea if this is work i typed it in the middle of a yawn

[Boonzeet]

Still to no avail.

I've experimented and realised this only happens with the table. Removing the table (and therefore my arrows T-T) it looks fine on all browsers. Is there some way to replace the table, because Firefox is dealing with the table strangely.

[Verrou]

ew tables...use divs pls.

[Boonzeet]

Verrou, I'm aware, but I have no idea how to stack up those divs correctly, as in to have them all pressed against each other to the left. I've tried floating. Please, I really need help with this one.

[Jamesy]

Verrou, I'm aware, but I have no idea how to stack up those divs correctly, as in to have them all pressed against each other to the left. I've tried floating. Please, I really need help with this one.

Why not make the nav bar a position:relative and set the breadcrumb to position:absolute and then you can use top/right/bottom/left to put it exactly where you want.

[Boonzeet]

Because the nav bar has varying lengths of text as categories, i.e. 'Bing' and 'Computer Programming'.

I've fixed it, anyway. Little Javascript CSS decided to class ALL table attributes instead of the ones it used, so I've changed that.

Thanks anyway!