Question

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))               

Answer 1

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.