Forum Moderators: not2easy
I've been designing a site using css and can't get the text to display consistently in IE7, FF and Safari.
Any thoughts on why would be much appreciated. Here's the code...
Thanks,
Lars
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>kaiju*</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
background-color: #EDEDED;
}
h1 {color: #000000; font-family:Georgia, "Times New Roman", Times, serif; font-size:30px; font-weight:normal; padding-left:5px; margin-top:1px}
h2 {color: #000000; font-family:Georgia, "Times New Roman", Times, serif; font-size:14px; font-weight:normal;line-height:1.6; letter-spacing: -1px; padding-left:5px; padding-right:30px; margin-top:.75em; padding-bottom:8px}
h3 {color: #000000; font-family:Georgia, "Times New Roman", Times, serif; font-size:14px; font-weight:normal;line-height:1.6; letter-spacing: -1px; padding-left:5px; padding-right:30px; padding-bottom:8px}
h4 {color: #000000; font-family:Georgia, "Times New Roman", Times, serif; font-size:14px; font-weight:normal; font-style:italic; line-height:1.6; letter-spacing: -1px; padding-left:5px; margin-top:10px}
a:link {text-decoration: none; color:#000000}
a:visited {text-decoration: none; color:#000000}
a:hover {text-decoration: none;background: #000000; color:#ffffff}
a:active {text-decoration: none; background: #000000; color:#ffffff}
.style51 {font-size: 14px}
</style>
</head>
<body>
<table id="Table_01" width="860" height="1308" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/17_1_01.jpg" width="34" height="68" alt="" /></td>
<td background="images/17_1_02.jpg"><h1><em>02</em>. 46664.com <span class="style51"><em>website</em></span></h1></td>
<td><img src="images/17_1_03.jpg" width="11" height="68" alt="" /></td>
<td background="images/17_1_04.jpg"><h4><a href="/">Next Client</a><br /><a href="/">Previous Client</a></h4></td>
<td><img src="images/spacer.gif" width="1" height="68" alt="" /></td>
</tr>
<tr>
<td rowspan="18"> </td>
<td rowspan="7"><img src="images/17_1_06.jpg" width="634" height="521" alt="" /></td>
<td rowspan="17"> </td>
<td><img src="images/17_1_08.jpg" width="180" height="148" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="148" alt="" /></td>
</tr>
<tr>
<td><img src="images/17_1_09.jpg" width="180" height="8" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="8" alt="" /></td>
</tr>
<tr>
<td><img src="images/17_1_10.jpg" width="180" height="148" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="148" alt="" /></td>
</tr>
<tr>
<td><img src="images/17_1_11.jpg" width="180" height="8" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="8" alt="" /></td>
</tr>
<tr>
<td><img src="images/17_1_12.jpg" width="180" height="148" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="148" alt="" /></td>
</tr>
<tr>
<td><img src="images/17_1_13.jpg" width="180" height="9" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="9" alt="" /></td>
</tr>
<tr>
<td rowspan="2"><img src="images/17_1_14.jpg" width="180" height="148" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="52" alt="" /></td>
</tr>
<tr>
<td rowspan="3" valign="top" background="images/17_1_15.jpg"><h2>
46664.com - <em>website (<a href="http://www.example.com" target="blank">www.example.com</a>)</em><br />
Role: Art Direction</h2>
<h3> Brief: To create a website for Nelson Mandela’s example.com campaign against AIDs.
The site uses natural, earthy <br />
textures and colour tones to feel ‘Africa’, avoiding any reference to iconography or colour schemes usually <br />
associated with Africa or AIDs. </h3></td>
<td><img src="images/spacer.gif" width="1" height="96" alt="" /></td>
</tr>
<tr>
<td><img src="images/17_1_16.jpg" width="180" height="9" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="9" alt="" /></td>
</tr>
<tr>
<td rowspan="2"><img src="images/17_1_17.jpg" width="180" height="148" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="79" alt="" /></td>
</tr>
<tr>
<td rowspan="2"><img src="images/k-14-project17-qrm_18.jpg" width="634" height="75" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="69" alt="" /></td>
</tr>
<tr>
<td rowspan="2"><img src="images/17_1_19.jpg" width="180" height="8" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="6" alt="" /></td>
</tr>
<tr>
<td rowspan="5"> </td>
<td><img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td><img src="images/17_1_21.jpg" width="180" height="148" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="148" alt="" /></td>
</tr>
<tr>
<td><img src="images/17_1_22.jpg" width="180" height="9" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="9" alt="" /></td>
</tr>
<tr>
<td><img src="images/17_1_23.jpg" width="180" height="148" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="148" alt="" /></td>
</tr>
<tr>
<td><img src="images/17_1_24.jpg" width="180" height="9" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="9" alt="" /></td>
</tr>
<tr>
<td colspan="3"> </td>
<td><img src="images/spacer.gif" width="1" height="144" alt="" /></td>
</tr>
</table>
</body>
</html>
[edited by: engine at 5:14 pm (utc) on Oct. 8, 2007]
[edit reason] examplified [/edit]
If you are talking about font, browsers have different default fonts even though you specified a style. Couple this with the fact that the font may not be available on the user's computer. However, I suspect your issue may deal with spacing. That being the case, not all browsers are equal on the treatment of default margins and padding for text, <h>, <p> and so on. The only way to override this is set:
* {
padding: 0;
margin: 0;
}
in your CSS which will element all default margin and padding settings, and I do mean all. You will then have to manually assign all margin and padding settings to each individual element. It is time consuming and somewhat of a pain, but that is the only way to achieve uniformity.
Marshall
