How to fix this css to conform to all browsers?

My application built with Google App Engine has this page that displays search results.

In my laptop the design and font size look fine (I use Chrome); but in the bigger display on a desktop with IE, the title looks huge and the text under the title is grayed out (it shouldn’t be). Below is the css that I am using. I appreciate your help regarding the design and any problems you see with it. Thanks.

css for the body (text under the title):

body { font-size: small; font-family: Verdana, Helvetica, sans-serif; }

css for the title:

#large {color: #0066CC; font-size: large; }

css for “comment”

#small {color: #808080; font-size: x-small; }

EDIT

In IE I also noticed that the text under the title is grayed out. What is the reason for that? This is the code:

        self.response.out.write("""<p>
        <a href="%s"><span id=large>%s</span></a> 
 开发者_如何学运维       <a href="/comment?main_id=%s"><span id="small">comments</span></a><br />  
        %s 
        </p>
        """ %           
        (item.url, item.title, main_id, 
        item.pitch))               

---

Try using percentages or pixel values instead of keywords for the font-size. Different browsers interpret those keywords differently, which is why you're seeing the discrepancy.

---

Not that this is the direct cause of the problem, but the first thing I notice is that you're using IDs instead of classes for styling multiple elements.

So this:

<span id="small">

should be:

<span class="small">

And your #small selector should be .small. Likewise goes for large.

Zach Rattner should have identified the real problem though.