PDA

View Full Version : weird spacing


Guardian
10 Aug 2010, 03:15 AM
Hello, there is strange think with my images. In IE they display in proper way but in Firefox with spacings. Could you help me please.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Untitled 1</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="Styles/main.css" rel="stylesheet" type="text/css" />
<link href="Styles/navigation.css" rel="stylesheet" type="text/css" />
<style type="text/css">* {
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>

<div id="masthead">
</div>
<div id="top_nav">
<!-- Save for Web Slices (octopusnavigationpolylast.psd) -->
<table cellpadding="0" cellspacing="0" >

<tr>
<td colspan="8">
<img src="Images/octopusnavigation_01.jpg" width="900" height="22" alt=""/></td>
</tr>
<tr>
<td rowspan="4">
<img src="Images/octopusnavigation_02.jpg" width="33" height="263" alt=""/></td>
<td colspan="3">
<img src="Images/OctopussLogo.gif" width="400" height="167" alt=""/></td>
<td colspan="4" rowspan="2">
<img src="Images/octopusnavigation_04.jpg" width="467" height="191" alt=""/></td>
</tr>
<tr>
<td colspan="3">
<img src="Images/octopusnavigation_05.jpg" width="400" height="24" alt=""/></td>
</tr>
<tr>
<td rowspan="2">
<img src="Images/octopusnavigation_06.jpg" width="110" height="72" alt=""/></td>
<td style="height: 45px">
<a href="default.html" title="О компании" class="link1"/></td>
<td colspan="2" style="height: 45px">
<a href="default.html" title="Каталог" class="link2"/></td>
<td style="height: 45px">
<a href="default.html" title="Вакансии" class="link3"/></td>
<td style="height: 45px">
<a href="default.html" title="Контакты" class="link4"/></td>
<td rowspan="2">
<img src="Images/octopusnavigation_11.jpg" width="194" height="72" alt=""/></td>
</tr>
<tr>
<td colspan="5">
<img src="Images//octopusnavigation_12.jpg" width="563" height="12" alt=""/></td>
</tr>
<tr>
<td>
<img src="spacer.gif" width="33" height="1" alt=""/></td>
<td>
<img src="spacer.gif" width="110" height="1" alt=""/></td>
<td>

<img src="spacer.gif" width="236" height="1" alt=""/></td>
<td>
<img src="spacer.gif" width="54" height="1" alt=""/></td>
<td>
<img src="spacer.gif" width="79" height="1" alt=""/></td>
<td>
<img src="spacer.gif" width="109" height="1" alt=""/></td>
<td>
<img src="spacer.gif" width="85" height="1" alt=""/></td>

<td>
<img src="spacer.gif" width="194" height="1" alt=""/></td>
</tr>

</table>
<!-- End Save for Web Slices -->
</div>
<div id="page_content">
</div>
<div id="footer">
</div>

</body>

</html>




and css


/* CSS layout */
#masthead {
}
#top_nav {
margin: 0px;
padding: 0px;
}
#top_nav table,td,tr,img {
margin: 0px;
padding: 0px;
}

#top_nav a {
text-decoration: none;
outline: none;
}
#top_nav td {
margin: 0px;
padding: 0px;
}


#page_content {
}
#footer {
}


.link1 {
background-image:url('../Images/AboutLink.jpg');
display:block;
width: 236px;
height: 60px;
margin:0px;
}
.link1:hover {

}


.link2 {
background-image:url('../Images/CatalogLink.jpg');
display:block;
width: 133px;
height: 60px;
margin:0px;
}
.link2:hover {

}


.link3{
background-image:url('../Images/JobsLink.jpg');

display:block;
width: 109px;
height: 60px;
margin:0px;
}
.link3:hover {

}


.link4 {
background-image:url('../Images/ContactsLink.jpg');
display:block;
width: 85px;
height: 60px;
margin:0px;

}
.link4:hover {

}

https://docs.google.com/leaf?id=0B_yjYqtNV0kGMDQ4ZTVmOWItMTg3Ni00ZGE4LTlkYjEtZDNiMWU3ZmExNWE0&sort=name&layout=list&num=50

https://docs.google.com/leaf?id=0B_yjYqtNV0kGMjc4NDk3Y2ItNzFhOS00ZmY2LWE2NTYtNDZiOTA0OGUxZmZh&sort=name&layout=list&num=50