Forum Moderators: not2easy
I spent an hour reading all the font posts and checking those suggestions and nothing's fixed the prob. The font properties I've defined in my external style sheet work fine on my machine (Win 2000 IE6) but on a friend's PC (Win ME 4.9, IE6), the font size isn't rendering. It's being ignored and they haven't changed their font prefs in IE so it's not that (she doesn't have this problem w/ other sites).
style sheet contains:
#Body{position:absolute; top:145px; left:160px; width:375px; padding-top:0px; padding-left:0px; padding-right:0px; font-size:10pt; font-family:Arial, Helvetica, sans-serif;}
table{font-size:10pt; font-family:Arial, Helvetica, sans-serif;}
td{font-size:10pt; font-family:Arial, Helvetica, sans-serif;}
The page is baisically 3 columns, each column is a span with the above body attribute, with the positioning adjusted for each. Two of the spans have tables nested in them. All three columns are not rendering the font size on my friend's system. So it's not just the table not inheriting the font attributes of the body since the one column that is not a table is also displaying incorrectly.
<span id="Body" style="position:absolute; top:320px; left:8px; border-color:#333366;">
<table border="0" cellpadding="0" cellspacing="0" width="175" height="275" background="Images/textbox_gettingstarted_xmas.gif" background-repeat:no-repeat;">
<tr valign="top">
<td style="width:157px; height:60px; padding:30 0 0 8;">
all the text is in here.
</td>
</tr>
<tr>
<td class="store" style="width:155px; font-size:18px;" align="center">
<strong>blah blah blah</strong>
</td>
</tr>
<tr valign="top">
<td style="width:155px; padding:5 0 20 10;" align="center">
Or fill out this
<a onclick="ThisFormRequest();" style="color:#666699;" onmouseover="this.style.cursor='hand'">form</a>, and we'll give you a ring.
<br><br><br>
</td>
</tr>
</table>
<br>
</span>
Here's the span that doesn't involve a table and still ignore's the font.
<span id="Body" style="position:absolute; top:320px; left:192px; width:340px; height:50px; color:#000000;">
text text text
</span>
Sorry so long winded...thanks in advance for any advice/suggestions. Oh, and I'm not worried about NN, so let's skip that discussion. =)
I noticed you're using the same ID more than once. Instead of using the ID #body, try changing it .body and use the CLASS selector.
ID's are only meant to be used in one instance, and CLASS can be used repeatedly.
Be aware that by not specifying units here:
padding:5 0 20 10
This won't apply in browsers such as Opera or Mozilla. Youshould specify one of: pt, px, em, or % (preferrably one of the last three if this is intended for media=screen)
One last suggestion, rather than use a span, try using a div tag. Span's are inline elements, used on things like text, while div's are block level elements, and function as a sort of generic container.
For example, 'bold' tags are inline elements, whereas a 'paragraph' tag is block level. The bold tag could apply to text within a paragraph like this:
<p>Here is some random<b> bold</b> text inside a paragraph.</p>
The 'p' is a container, where the 'b' functions 'inline' to style some text.
ID's in general are only supposed to be used once, not just span id's!
ID's are for unique elements in a page, like id="header" or id="menu". Classes can be used many times - for example .red {color:red} is a class that can be applied to any element that you want to have red text color.
A little further, <div id="menu" class="red">can be used to make the text in that div red.
