really ANNOYING firefox/ie incompatability :very confused:

I began work on an experimental page earlier today and I stopped about an hour into it to check it out in multiple browsers. For some reason it looks like i want it to in IE but absolutely horrible in Firefox because the images on the four corners of the table aren't loading. Is this a CSS problem, an image attribute="100%" problem, an image tiling issue (the vertically tiled images don't load either) or something else? I know this may take a few minutes, but I've tried to post all the relevant information.

Look at this in both Firefox and IE:

http://www.exclusivefreegames.com/templates/Dec2004/newlayout.shtml

bear in mind I am really really bad with tables, so this could be an easy problem.

here is the relevant part of the html code:

<tr>
<td width="28" height="32" align="left">
<img src="outline_topleft.GIF" width="100%" height="100%">
</td>
<td class="OUTLINEtop" width="100%" height="18" align="center" valign="top">
<a href="http://www.exclusivefreegames.com/"><font class="smallwhite">Home<font></a>
</td>
<td width="25" height="32" align="left">
<img src="outline_topright_edged.gif" width="100%" height="100%">
</td>

</tr>
<td class="OUTLINEleft" valign="top" width="24">
</td>
<td width="100%">
                              <table cellpadding="0" cellspacing="0">
                              <!--CONTENTS TABLE-->
                              <tr>
                              <td>
(blah)
                              </td>
                              </tr>
                              </table>
                              <!--END CONTENTS TABLE-->
</td>
<td class="OUTLINEright" width="24">
</td>
</tr>





<tr>
<td class="outlinebottom" width="100%" height="32" align="center" valign="top" colspan="3">
</td>


</tr>

Code (markup):

And here is the relevant CSS:

.OUTLINEtop {
background-image: url("http://www.exclusivefreegames.com/templates/Dec2004/outline_top.GIF");
background-repeat: repeat-x;
font-family:Arial,Veranda;
color: white;
font-size: 10px;
}

.OUTLINEbottom {
background-image: url("http://www.exclusivefreegames.com/templates/Dec2004/outline_bottom.gif");
background-repeat: repeat-x;
font-family:Arial,Veranda;
color: white;
font-size: 10px;
}

.OUTLINEleft {
background-image: url("http://www.exclusivefreegames.com/templates/Dec2004/outline_left.gif");
background-repeat: repeat-y;
}

.OUTLINEright {
background-image: url("http://www.exclusivefreegames.com/templates/Dec2004/outline_right.gif");
background-repeat: repeat-y;
}

Code (markup):

 

You are missing a few tags.

http://validator.w3.org/check?uri=h...eegames.com/templates/Dec2004/newlayout.shtml

click on the link.

 

thanks for that link, but I fixed all of the problems but it still doesn't load the images in firefox.

also note that the above html code has changed, and will be changing again if i get more help, so look at the source code instead b/c for some reason I can't edit my first post again....

look - if anyone knows how achieve the simple effect I want in a less haphazard and experimental way that will work in all browser, at least show me a link to your site and let me have a look see, would you? - thanks.

 

Just a quick glance tells me your table(s) are not properly formed. What kind of editor are you using to code this?

 

1) Correctly close your font tag please
2) the images won't show up because their size is 100% x 100%, however that isn't working. Put the actual size of the images in and you'll be fine. Don't define the image size in the TD tag. That just won't work.

 

Your <td> on each side are empty and your center TDs have a width of 100%. Mozilla will do as told and try to maximize the center cell to 100%, so it eliminates the side TDs as they are empty. Put something in or change the width of your center cells and they'll appear.

 

thanks guys

also, i don't have the money to buy an editor, so I do all my coding in notepad, so it's easy for me to get confused.

I had always thought it would try to maximize the alloted area within the constraints that it had - I guess I was grossly mistaken.

 

David, HTMLKit is a great editor and it is free. You can click a button, and it will inform you of coding problems such as this.

 

thanks! I think I actually may have downloaded it some time ago - I'll have to boot it up again. but i have one last question, while you guys are here:

the reason i did that whole image width="100%" thing was because it wouldn't display properly if I used the image alone. for some reason, IE & netscape would put about 2 pixels of table cell whitespace below the image, while Firefox wouldn't. everything is working now, but the whitespace remains...

 

heh - its fixed now. No worries all, and many thanks.

 

What is wrong with writing HTML in a text editor? I use TextPad (shareware) which does not put all of those junky windows characters in it and will do some nice color coding of the html tags for you. It is really great to have around as a text editor on a windows box.