homepage Welcome to WebmasterWorld Guest from 54.167.185.110
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Cross Browser CSS in tables
looking for answers
Xoc




msg:1196835
 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




msg:1196836
 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




msg:1196837
 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




msg:1196838
 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




msg:1196839
 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




msg:1196840
 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved