TD Problem

[fatepower]

Hi mates!

Well i have a small problem. I have some table, tr and td tags in a html doc who is intigrated as a style in php. Well the td tags works fine in Firefox but not in opera. Take a look at the pics.
How to slove this?

Heres the code:

<tr>
  <td class=lista align=center>
    <table class="main" width="99%" border="0" cellpadding="2" cellspacing="2">
        <tr>
           <td class="block" colspan=2 align="right">
            {MODTOOLBAR}
           </td>
        </tr>
            <tr>
              <td class="blocklist" rowspan="2" width="25%" align="left" valign="top">

            <center>
             {POSTER}<br />
			 <img border="0" width="150" src={AVATAR}> <br />
             {LEVEL}<br />
             {POSTDATE}<br />
             {COUNTRY}<br />
             <img src=images/flag/{FLAG}><br />

            </center></td>
          <td class="last10" align="left" valign="top">{SHOUT_MSG}
        </td></tr>
    <tr>
      <td height=10 valign=base class="blocklist">
       <center>
        <font  color=green>&#8593&nbsp;{UPLOADED}</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <font color=red>&#8595&nbsp;{DOWNLOADED}</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        <font color="#BEC635">{RATIO}
      </center>

     </td>
   </tr>
      <tr>
        <td colspan="2" class="block" align="right">
          <a href="#top"><img src="./images/top.gif" alt="top" border="0" /></a>
        </td>
      </tr>
</table>
<br />

   </td>
</tr>

Cheers

[NogDog]

I'd start by running the resulting HTML through HTML Validator and then the CSS Validator. If there are any errors, then you are at the mercy of the browser "guessing" what you intended, and browsers are more likely to render differently when they have to do such guessing.

[Warmaster]

fatepower,

 I looked over your HTML and it looks pretty clean except for a couple of minor fixes.

 <td height=10 valign=base class="blocklist"> 

Should look like:

 <td height="10" valign="baseline" class="blocklist">

Those issues shouldn't affect the specific problem you are having though.

Good Luck!

Warmaster

[fatepower]

yea i have fixed the valign error, but the problem is still there.
Firebug does not find any error in the css either, so something it must be.
any other ideas mates?

Cheers

[leatherback]

I think you are using the incorrect valign; from the specifications:

align = top|middle|bottom|baseline [CI]
This attribute specifies the vertical position of data within a cell. Possible values:

    * top: Cell data is flush with the top of the cell.
    * middle: Cell data is centered vertically within the cell. This is the default value.
    * bottom: Cell data is flush with the bottom of the cell.
    * baseline: All cells in the same row as a cell whose valign attribute has this value should have their textual data positioned so that the first text line occurs on a baseline common to all cells in the row. This constraint does not apply to subsequent text lines in these cells.

[fatepower]

I added the align=center into the <td> lint. Still the same problem. Can't get it, it works fine in FireFox but shows badly in Opera :/

Cheers

[leatherback]

hm.. have you added a border=1 to your table, to verify that the cells are as you expect them to be? I find that usually something silly that is the culprit..

J

[fatepower]

Yes border = 1 was added mate for check. Still no work :/
Damn this, that it doesn't work fine in opera, many users are using Opera :/

Cheers

[Warmaster]

This is a long shot but the attribute "height" has been deprecated and I know in my playing around with it in firefox I did not notice a difference in adding height="10" or taking it away completely.

Maybe Opera does allow that attribute and that is affecting it? My guess is that no, it isn't but stranger things have happened with code before.

Good Luck!

Warmaster

[fatepower]

Yea could be i have played around with the height alittle, with adding 1px or 1% for example but will return with same in Opera. Yea strange things have happend b4 but this is strange i must say. 😛

Cheers

[leatherback]

well.. when we are talking about things being depreciated.. Using tables for layout is depreciated too. Better off using div's 😃

[fatepower]

leatherback;10872314 wrote:

well.. when we are talking about things being depreciated.. Using tables for layout is depreciated too. Better off using div's 😃

Yea i should have construct it with div's 😛 but. . . now i maked it into a tr, td and table history 😛

[nrg_alpha]

Yep, Tables for layout = downright evil 🙁
You would be better off reconstructing this using the least amount of divs and manipulating them using CSS...

Seeing lines like:

<font  color=green>&#8593&nbsp;{UPLOADED}</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

could well be replaced using a <p> tag assigned a class, and simply using CSS to drive the font colour and spacing.

Tables are not as flexible, and should probably be only used foir tabular data. CSS was created to separate content from presentation (and does so in great fashion IMHO). It's worth learning tableless layouts.. makes life much easier in the back end.

[fatepower]

Yes using a div and easy put a class=shoutupload ect... But i do not think that will slove my problem either :/

[nrg_alpha]

Well, I would start by following Nogdog's advice. Validate your code.
When I cut and paste your code into a template HTML file in dreamweaver and try to validate it, I get plenty of errors.

Example, you are not closing your image tags. If you are using XHTML, you should be closing them with /> at the end.

example:

<img border="0" width="150" src={AVATAR} /><br />

I'm not sure if you are showing all the table code, but you cannot have <tr> tags outside of a table tag.. so if there is more to your table code, go through it all and make sure you have proper placement of <tr> and <td> tags, as well as making sure you close your image tags and whatnot.

Bad code will cause bad results on some browsers. I suggest entering your website's URL into the W3C Validator... it will show you the errors in your code.

[fatepower]

Thank you, nope thats not all the code. The rest of the code is in some .php files. I might do a try of validating the code and trying to change it a bit. Hoply it will give me some good resaults.