tags:

views:

995

answers:

2
+1  Q: 

Font looks different in IE than it does in Firefox and Chrome...why?

Hi, I am creating a website and the font looks different in IE (it's larger) than it is in Firefox and Chrome. Does anyone know why? And how do I fix it in IE?

Here's my code:

  <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&gt;

<head>
<img src="j0182695_downsized.jpg" alt="Oatmeal Raisin cookies" style="float: left" >

<title> Cameron Cookies </title>

</head>


<body background="back-225.gif">
<h1 style="text-align: center; color: red; font-family: Arial, Helvetica, sans-serif;">Cameron Cookies</h1>

<h2 style="font-style: italic; text-align: center;">The best homemade cookies in New England</h2>

<p style="text-align: center;">99 Sycamore St. Portland, ME 04101 (207) 555-1212</p>

<table width="500" border="0">
    <tr>
        <td align="center"><a href="about.htm">About Us</a></td>
        <td align="center"><a href="mailto:[email protected]">Contact Us</a></td>
        <td align="center"><a href="orderform.htm">Place an Order</a></td>
        <td align="center"><a href="recipe.htm">Sample Recipe</a></td>
    </tr>
</table>

<form name="Web Order Form" id="Web Order Form">
<!--this is the main table -->
<table border="0" width="65%" cellpadding="2">
<!--Personal Info. table -nested table 1 -->
    <tr>
        <th colspan="2" align="left">Personal Information</th>
    </tr>

    <tr> 
        <td style="width: 5px;"><label for="fname">First Name:</label></td> 
        <td><input name="fname" id="fname" size="30" type="text" /></td>
    </tr> 

    <tr>
        <td><label for="lname">Last Name:</label></td>
        <td><input name="lname" id="lname" size="30" type="text" /></td>
    </tr>

    <tr>
        <td><label for="address">Address:</label></td>
        <td><input name="address" id="address" size="30" type="text" /></td>
    </tr>

    <tr>
        <td><label for="city">City:</label></td>
        <td><input name="city" id="city" size="35" type="text" /></td>
    </tr>

    <tr>
        <td><label for="state">State:</label></td>
        <td><input name="state" id="state" size="3" type="text" /></td>
    </tr>

    <tr>
        <td><label for="zip">Zip Code:</label></td>
        <td><input name="zip" id="zip" size="10" type="text" /></td>
    </tr>

    <tr>
        <td><label for="country">Country:</label></td>
        <td><input name="country" id="country" size="10" type="text" /></td>
    </tr>

    <!--Order Info. table -nested table 2 -->
    <!--This is the first nested table within the main table -->
            <table border="2" width="65%" cellpadding="2">
            <!--Row 1 -->
                    <tr>
                        <th colspan="3" align="left">Order Information</th>
                    </tr>
            <!--Row 2 -->   
                    <tr>
                        <td width="5">QTY</td>
                        <td></td>
                        <td></td>
                        <td>Subtotal</td>
                        <td width="75%"><input name="Gift Wrapping" id="Gift Wrapping" type="checkbox" /> Gift wrapping? (Additional charge of 1.95 per box)</td>
                    </tr>
            <!-- Row 3 -->  
                    <tr>
                        <td><input name="quantitya" id="quantitya" size="3" type="textbox" value="0"/></td>
                        <td width="50%"></td>
                        <td width="50%" align="left"><label for="subtotala">Chocolate Nut - $10.99</label></td>
                        <td><input name="subtotala" id="subtotala" size="10" type="textbox" value="0"/></td>
                        <td >If yes, note the text for the gift card:</td>
                    </tr>
            <!-- Row 4 -->  
                    <tr>
                        <td><input name="quantityb" id="quantityb" size="3" type="textbox" value="0"/></td>
                        <td width="15000"></td>
                        <td width="15000" align="left"><label for="subtotalb">Chocolate Chip - $9.99</label></td>
                        <td><input name="subtotalb" id="subtotalb" size="10" type="textbox" value="0"/></td>
                        <td ><textarea wrap="soft" name="giftcardtext" id="giftcardtext" rows="3" cols="20" ></textarea></td> 
                    </tr>
            <!--Row 5 -->
                    <tr>
                        <td><input name="quantityc" id="quantityc" size="3" type="textbox" value="0"/></td>
                        <td width="15000"></td>
                        <td width="15000" align="left"><label for="subtotalc">Macadamia Nut - $12.99</label></td>
                        <td><input name="subtotalc" id="subtotalc" size="10" type="textbox" value="0"/></td> 
                    </tr>
            <!--Row 6 -->
                    <tr>
                        <td><input name="quantityd" id="quantityd" size="3" type="textbox" value="0"/></td>
                        <td width="15000"></td>
                        <td width="15000" align="left"><label for="subtotald">Oatmeal Raisin - $10.99</label></td>
                        <td><input name="subtotald" id="subtotald" size="10" type="textbox" value="0"/></td> 
                    </tr>
            <!--Row 7 -->
                    <tr>
                        <td><input name="quantitye" id="quantitye" size="3" type="textbox" value="0"/></td>
                        <td width="15000"></td>
                        <td width="15000" align="left"><label for="subtotale">Chocolate Dessert - $10.99</label></td>
                        <td><input name="subtotale" id="subtotale" size="10" type="textbox" value="0"/></td></td>
                        <td>Shipping:</td>
                        <td></td>
                        <td width="15000">$5.95 for 1-5 boxes, $10.95 for five or more boxes</td>
                    </tr>
            <!--Row 8 -->
                    <tr>
                        <td><input name="quantityf" id="quantityf" size="3" type="textbox" value="0"/></td>
                        <td width="15000"></td>
                        <td width="15000" align="left"><label for="subtotalf">Butter - $7.99</label></td>
                        <td><input name="subtotalf" id="subtotalf" size="10" type="textbox" value="0"/></td></td>
                        <td><label for="totala">Total:</label></td>
                        <td></td>
                        <td><input name="totala" id="totala" size="3" type="textbox" value="0.00" /></td>
                    </tr>
            <!--Row 9 -->
                    <tr>
                        <td></td>
                        <td width="15000"></td>
                        <td width="15000" align="left"><label for="subtotalg">Subtotal</label></td>
                        <td><input name="subtotalg" id="subtotalg" size="10" type="textbox" value="0" /></td></td>
                    </tr>
            </table>


<!--Payment Info. -nested table 3 -->
    <!--This is the second nested table within the main table -->
                    <table border="0" width="65%" cellpadding="2" cellspacing="5">
            <!--Row 1 -->
                            <tr>
                                <th align="left">Payment Information</th>
                            </tr>
            <!--Row 2 -->
                            <tr>
                                <td><input name="Mastercard button" id="Mastercard button" type="radio" />MasterCard</td>
                                <td><input name="Visa button" id="Visa button" type="radio" />Visa</td>
                            </tr>
            <!--Row 3 -->
                            <tr>
                                <td><label for="ccnum">Credit Card Number</label></td>
                                <td><input name="ccnum" id="ccnum" size="30" type="textbox" /></td>
                            </tr>
            <!--Row 4 -->
                            <tr>
                                <td>Expiration</td>
                                <td><select name="Month" id="Month">
                                        <option>January</option>
                                        <option>February</option>
                                        <option>March</option>
                                        <option>April</option>
                                        <option>May</option>
                                        <option>June</option>
                                        <option>July</option>
                                        <option>August</option>
                                        <option>September</option>
                                        <option>October</option>
                                        <option>November</option>
                                        <option>December</option>
                                    </select>
                                    <select name="year" id="year">
                                        <option>2002</option>
                                        <option>2003</option>
                                        <option>2004</option>
                                        <option>2005</option>
                                        <option>2006</option>
                                        <option>2007</option>
                                        <option>2008</option>
                                        <option>2009</option>
                                        <option>2010</option>
                                        <option>2011</option>
                                        <option>2012</option>
                                    </select>
                                </td>
                            </tr>
            <!--Row 5 -->
                            <tr>
                                <td><input name="submit button" id="submit button" type="submit" value="SUBMIT" /></td>
                            </tr>
                    </table>
</table>
</form>

Thanks!

+1  A: 

Define a font size style:

<style type="text/css">
body{ font-size:medium; }
</style>

You could try to define in pixels too for more consistency:

<style type="text/css">
body{ font-size:10px; }
</style>

Code would go in your html <head>

Jage  2010-02-17 23:13:30
@Jage- this worked thanks. But I do have a question- do I put it between the <head> tags or do I put it directly in the head tag? Also, when I do this it moves my labels and input text boxes up to just underneath the About Me, Contact Us, etc. I want it below the image -any ideas?
Ashley  2010-02-17 23:24:29
It would go anywhere in between <head> and </head> . Also, adding the font-size to the body pretty much affects every bit of text on the page. Your other components are likely based on the original font size. You could add a style to those links that shrunk to crank the size back up. Take a quick CSS tutorial online, maybe at w3schools. You'll love it, good luck.
Jage  2010-02-17 23:51:08
+1  A: 

The fonts are different sizes between the browsers because each uses a different baseline for the default size. You can either choose to live with it (as most users will only use one browser and will therefore only see one size version of the site - not good though if the larger text messes up the layout), or set the baseline font size to the same in each browser.

Have a look at "How to Size Text in CSS". This is quite a good article explaining how to get text to appear the same in different browsers, whilst allowing it to be resized by the user.

adrianbanks  2010-02-17 23:17:44

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?