Cross Browser CSS in tables

Forum Moderators: not2easy

Message Too Old, No Replies

Cross Browser CSS in tables

looking for answers

Xoc

5:26 pm on May 29, 2001 (gmt 0)

I have struggled many times trying to get text and controls in tables to come out looking the same between IE and Netscape. So has anyone worked out how to get this HTML to come out looking the same between the two? Assume IE 5.5, and Netscape 4.7. I want the text of the label and the size of the textbox to come out 50% of the size of "normal" text. The only way I came up with is to do a <span> around the label and apply the CSS to that. I would really like a generic way that doesn't require any extra tags, or at most one set of extra tags for the whole table. Anyone have any ideas?


<html>
 <head>
 <style>
 <!--
 table
 {
 FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
 }
 input, .smaller
 {
 FONT-SIZE: 50%
 }
 -->
 </style>
 </head>
 <body>
 <form method="post">
 <table>
 <tr>
  <td>
  <span class="smaller"><label for="txtTest">Label:</label></span>
  </td>
  <td>
  <input type="text" name="txtTest" id="txtTest" value="test text"></input>
  </td>
 </tr>
 </table>
 </form>
 </body>
</html>

mivox

6:58 pm on May 29, 2001 (gmt 0)

The only way I found to keep everything pretty (I haven't tried <span> tags) is to set text styles as a set of <div> specifications... It has the same problems as your <span> method: using extra tags

Haven't found anything any shorter and sweeter than that. But it's still better than filling the page with countless <font> tags, eh?

Any CSS gurus out there with a better idea? Please?

Xoc

2:11 am on May 30, 2001 (gmt 0)

It gets worse. Add a <select> tag. Then try to get it to size to 50%. There are the typical Netscape bugs. But there is also a bug in IE 5.5! So if you do:


<td> 
 <span class="smaller"> 
  <select size="1"> 
   <option>option1</option> 
   <option>option2</option> 
  </select> 
 </span> 
</td>

This works in Netscape, but IE 5.5 doesn't inherit the <span class="smaller">, and renders the listbox full size! This is a bug! However, if you change it to:


<td> 
 <span class="smaller"> 
  <select size="1" class="smaller"> 
   <option>option1</option> 
   <option>option2</option> 
  </select> 
 </span> 
</td>

Netscape, as usual, ignores the class="smaller" on the select, so comes out looking okay. But IE 5.5, now correctly inherits the <span class="smaller"> and renders the listbox at 25%. The workaround to make IE 5.5. inherit the <span> I found is to do this:


<style> 
.smaller {FONT-SIZE: 50%} 
.fullsize {FONT-SIZE: 100%} 
</style> 
... 
<td> 
 <span class="smaller"> 
  <select size="1" class="fullsize"> 
   <option>option1</option> 
   <option>option2</option> 
  </select> 
 </span> 
</td>

It appears that having any class attribute on the select causes it to avoid the bug and inherit. I don't know if this applies to any other version of IE.

Every time I read [richinstyle.com...] and see the hundreds of CSS bugs the various browsers have, the more I just get annoyed. I've given up on being annoyed at Netscape, as their use of CSS is so bad that you just have to work around it, but I expect more of IE.

If anyone has any better ideas, I'd really like to know.

toolman

2:24 am on May 30, 2001 (gmt 0)

Just a whim..not from experience.

What about a class on the <td> tag? I do know that is cross browser for text.

Xoc

6:36 am on May 30, 2001 (gmt 0)

A class on the <td> works for some things, but not for others. It causes the label to change size, but not the <select> or <input> in Netscape.

CSS can be used in web sites, but it is not nearly as easy as it should be, and getting it to work cross-browser is very difficult.

knighty

8:02 am on May 30, 2001 (gmt 0)

I get probs with netscape but not IE 99% of the time.

Have you tried redefining the actual tag in the style sheet? i.e. set up input and every input box will inherit those attributes..you can do this for the select tag as well.

and of course you can have 2 style sheets - one for netscape the other for Explorer.