Font looks different in IE than it does in Firefox and Chrome...why?
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">
<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:cookiemaster@cameroncookies.com">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="subto开发者_Go百科talf">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!
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>
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.
加载中,请稍侯......
精彩评论