View Full Version : Cryptic problem with Firefox and middle aligned images

06-24-2006, 07:40 PM
The page I'm having a problem with Firefox and IE displays being so radically different. The page and source can be viewed here as to not gum up the forum with long source code snippets:


If you open this file up in IE and Firefox, you will see a radical difference. What I want it to look like is what IE shows me, with the exception of this funny little one pixel space that it adds to the cells. Other than that, it's perfect. Firefox essentially throws up on this page. This nav is written is javascript so that I can gauge which page it is and then write out the nav conditioned on which page it is. Simple enough, or so I thought. We're back to the old days of browsers not agreeing and design hell. Thanks IE, thanks Firefox for making designers life difficult again, like it used to be.

What I am doing is using transparent tab gifs to create the tab corners for the cells containing the nav elements. IE seems to let me add an image to a cell and give it a middle alignment in relation to text that follows (link text). Works great to where I get text in the middle of the tab as opposed to the bottom or top. Firefox completely barfs on this. It seems to barf when i add an image. It also even seems to barf when I removed the image and just have text, but that text is hyperlinked. So it doesn't like the <a href> tag either. It only likes plain, non tagged, non linked text, and nothing more in the cell.

One problem could be, that after my javascript writes out the nav (after the </script>) I add another cell to fill out the needed space for the right hand side. I set this cell to have a width of 100% to fill out any area that is left over after the nav cells have taken up the space they need. Inside this final cell is a nested table with two cells. I nested these in a table so that I would not have to give all of my nav cells a rowspan of two. IE likes it, firefox hates it. If firefox is supposed to barf on this, then how can I tell that last cell, outside of or after the javascript, to fill up all remaining width of that table? When I give that last cell a fixed width instead of 100%, both IE and firefox almost agree completely (almost)

This is really a cryptic one. I haven't done this stuff in as little while. Last time I was doing it, all the browsers seemed to agree after everybody turned their back on netscape 4.0. Now Firefozx is out and we're back to square one with radically disagreeing browsers.

06-24-2006, 07:51 PM
try and take this constructivly

but using tables and doc.write is not the best way of contructing your elements

best to start again using elemets with position attributes.

06-24-2006, 09:00 PM
Are you talking about using absolute positioning on every single element? I've done that before, and after a while, you have so many objects, that everything becomes a total mess. 20 lines of html get replaced with 60 lines of css, and you lose flow control benefits. So if I change the height of something, I then have to change the absolute postioning of everything underneath it instead of it all just naturally bumping down as with regular, flow control html. If I change the width of something, then I have to change the absolute positioning of everything to it's right. If the page is center aligned, now I have the css mess of making all the elements use relative positioning instead of absolute. So I would be writing the same amount of html with a whole hunk of css objects on top of it, that are doing nothing more than regular, flow control html, except in an even more cumbersome and complex fashion.

Anyway, nobody says that forefox is not supposed to work with tables, so while you might be disagreeing with the method, I don't think that's the problem. Any other ideas?

Thanks for the reply. No offense at all taken. Taken constructively, but I'm not sure I agree and I don't think this is the problem. Your suggestion is a good easy workaround that I had considered, but I'll pay other prices by losing flow control and making an endless number of objects. This should be do-able in straightforward html using css as merely styling tools, but I can't figure out why it's not doing it

06-24-2006, 09:07 PM
<body onload="InitMenu();" >
<script type="text/javascript">

var Names = new Array(6);

var zxcCursor=document.all?'hand':'pointer';

function InitMenu(){
var zxct=document.getElementById('M1');
var zxcclone=document.getElementById('Clone').getElementsByTagName('DIV')[0];
var zxclft=0;
for (var zxc0=0;zxc0<Names.length;zxc0++){
var zxcw=(Names[zxc0][0].length*14);
var zxcc=zxcclone.cloneNode(true);
if (Names[zxc0][1]){
zxcc.onmouseover=function(){ this.style.backgroundColor='#006699'; }
zxcc.onmouseout=function(){ this.style.backgroundColor='#003366'; }
zxcc.onclick=function(){ window.top.location=this.url; }


<div id="M1" style="position:relative;left:0px;top:0px;width:500px;height:30px;background-color:white;border:solid black 0px;" ></div>

<div id="Clone" style="position:absolute;visibility:hidden;" >
<div style="position:absolute;left:0px;top:0px;width:80px;height:30px;background-color:#003366;" >
<img src="http://www.talbotins.com/images/tabcornerleft.gif" height="23" width="9" style="position:absolute;left:0px;top:0px;" >
<img src="http://www.talbotins.com/images/tabcornerright.gif" height="23" width="9" style="position:absolute;left:71px;top:0px;">
<div style="position:absolute;left:0px;top:5px;width:100%;height:50%;color:white;text-align:center;font-family:rebuchet MS, sans-serif;font-weight:bold;font-size:12px;" >A Name</div>

if you want to use css then use rounded corners available for most browsers(pity about IE as always)

anyway this is a JavaScript forum and the solution above is more flexible and takes far less effort(and code).

06-24-2006, 11:49 PM
Yes, pity about rounded corners in IE, but if it doesn't work in IE, then it is not useable, wouldn't you say? As far as the stuff you wrote, that's my exact point. Look at the hoops you had to jump through and all the extra lines of code you had to write. I'm sure you can just whip these lines out, but I'm trying to acheive elegance by simplicity (the less code needed the better). Then, there is the issue of maintenance. Currently, all I have to do is to add or delete something from the array, and the nav is done. But I don't mind all the extra code you are suggesting, if that's all I have to worry about. But the real problem, is that if I create 30 absolutely positioned elements underneath this nav, and then I want to change the position of the nav (for instance, bump it down), won't I have to chase around those 30 elements and adjust their vertical positioning? Am I right or am I missing something? With flow control table layout, I don't have to adjust anything underneath this nav if I decide to bump this nav down. Everything underneath it will naturally bump down as needed on the fly. Also to be considered, is that fact that this nav is going to be a #include that will be spliced in by the server for every page on the site. With absolute positioning, I would not only have to edit the vertical positioning of all elements underneath the nav, if I bumped the nav down on the #include page, but I would have to edit this for all pages. Am I right or all wet?

By the way, did you see how many lines of javascript I had to write? It was as simple as possible, and As I mentioned, it couldn't be easier to maintain, just change the array entries and you're all set.
Thanks for the reply. Interesting issue in general. Appreciate the chat.

06-25-2006, 12:18 AM
Hey, also, VW. I didn't understand where you said what you offered was less lines of code and more easily maintainable. Aside from style sheet entries, which are inevitable, how is it less lines of code than what I did? I don't understand. Here's all I did for the javascript.

<script language="JavaScript">
var names = new Array(6);

var currentlocation=window.self.location;
var count;
var pagetest;

for (count=0; count < names.length; count++)
pagetest = new RegExp(names[count]);
if (pagetest.test(currentlocation))
document.writeln('<td class="lbluetab"><img src="images/tabcornerleft.gif" class="middle" height="23" width="9">' + names[count] + '<img src="images/tabcornerright.gif" class="middle" height="23" width="9"></td><td width="1" bgcolor="ffffff"><img src="images/spacer.gif"></td>');
document.writeln('<td class="dbluetab" onMouseover="this.className=\'bluetab\'; return true;" onMouseout="this.className=\'dbluetab\'; return true;"><img src="images/tabcornerleft.gif" class="middle" height="23" width="9"><a class="nounderline" href="' + names[count] + '\.html">' + names[count] + '</a><img src="images/tabcornerright.gif" class="middle" height="23" width="9"></td><td width="1" bgcolor="ffffff"><img src="images/spacer.gif"></td>');

How much more simple can it be? And I also missed how you are deciding the width of each cell, when they will be varying sizes based on how many characters they have. Is that set by var zxcw=(Names[zxc0][0].length*14);? How do you decide which page it is on and therefore make sure that the nav entry for the current page is not linked or clickable?

06-25-2006, 01:42 AM
well find another mug
on a css or HTML forum, Ive already spent more tha 20 minutes on this