Forum Moderators: open
<Sorry, no personal URLs. See TOS [webmasterworld.com]>
Mozilla puts a kind of border under my (linked?) images (try right clicking just under a linked image). I tried many ways but I just can't find a solution to this problem.
Anyone? please help :(
Here's the html code:
<?xml version='1.0'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Title</title>
<link rel="stylesheet" href="mes.css" type="text/css" />
<script type="text/javascript" src="mes.js"></script>
</head>
<body onload="imgpreload()">
<table class="top" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="14"><img src="images/mes_top.gif" width="595" height="17" alt="" /></td>
</tr>
<tr>
<td colspan="5"><a href="http://www.m-e-s.be">
<img src="images/mes_logo.gif" width="233" height="92" alt="" /></a></td>
<td colspan="9">
<img src="images/mes_toplinks.jpg" width="362" height="92" alt="" /></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/mes_links.gif" alt="" /></td>
<td colspan="2" rowspan="2">
<a href="index.php?i=1">
<img id="news" src="images/menu_news.gif" onmouseover="menuover('news')" onmouseout="menuterug('news')" alt="" /></a></td>
<td rowspan="2">
<a href="index.php?i=2">
<img id="gigs" src="images/menu_gigs.gif" onmouseover="menuover('gigs')" onmouseout="menuterug('gigs')" alt="" /></a></td>
<td colspan="2" rowspan="2">
<a href="index.php?i=3">
<img id="disco" src="images/menu_disco.gif" onmouseover="menuover('disco')" onmouseout="menuterug('disco')" alt="" /></a></td>
<td rowspan="2">
<a href="index.php?i=4">
<img id="pics" src="images/menu_pics.gif" onmouseover="menuover('pics')" onmouseout="menuterug('pics')" alt="" /></a></td>
<td rowspan="2">
<a href="index.php?i=5">
<img id="bio" src="images/menu_bio.gif" onmouseover="menuover('bio')" onmouseout="menuterug('bio')" alt="" /></a></td>
<td rowspan="2">
<a href="index.php?i=6">
<img id="merch" src="images/menu_merch.gif" onmouseover="menuover('merch')" onmouseout="menuterug('merch')" alt="" /></a></td>
<td>
<a href="index.php?i=10">
<img id="download" src="images/menu_download.gif" onmouseover="menuover('download')" onmouseout="menuterug('download')" alt="" /></a></td>
<td colspan="3">
<a href="index.php?i=8">
<img id="links" src="images/menu_links.gif" onmouseover="menuover('links')" onmouseout="menuterug('links')" alt="" /></a></td>
<td>
<img src="images/menu_bl2.jpg" width="47" height="27" alt="" /></td>
</tr>
<tr>
<td colspan="2">
<a href="index.php?i=7">
<img id="msg" src="images/menu_msg.gif" onmouseover="menuover('msg')" onmouseout="menuterug('msg')" alt="" /></a></td>
<td>
<img src="images/menu_bl3.gif" width="25" height="16" alt="" /></td>
<td colspan="2">
<a href="index.php?i=9">
<img id="contact" src="images/menu_contact.gif" onmouseover="menuover('contact')" onmouseout="menuterug('contact')" alt="" /></a></td>
</tr>
<tr>
<td>
<img src="images/mes_ondermenu.jpg" width="1" height="21" alt="" /></td>
<td colspan="12">
<img src="images/mes_ondermenu.gif" width="456" height="21" alt="" /></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="138" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="44" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="45" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="5" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="57" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="44" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="43" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="57" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="46" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="11" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="25" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="32" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="47" height="1" alt="" /></td>
</tr>
</table>
</body>
</html>
And here's my css code:
body{
background-color:#000000;
text-align:center;
}
table{
margin-left:auto;
margin-right:auto;
}
td{
vertical-align:top;
}img{
border-width:0px;
}
[edited by: tedster at 10:59 am (utc) on May 24, 2004]
That's a bit too much HTML to wade through for me right now, but the problem you are describing sounds like one of the challenges you run into with images and a standards-compliant browser.
By default, images are an inline element. Legacy browsers simply aligned them to the bottom of the table cell, but that was not correct. Mozilla and other standards compliant browsers align inline images to the baseline of the text line, and not the bottom of the cell.
If you are working with images in a table cell, unless they really are inline with the text, it's often very useful to change them to display:block. Just add a class to their container cell <td class="imgholder"> and then use this css:
.imgholder img{
display:block;
margin:0;
padding;0;
}
I find this fixes a lot of the unexpected gaps that pop up in newer browsers.
Try this CSS:
img {
border: none;
}
This will remove the border from all images - watch out though, if you want borders on images you need to do a little extra work!
HTH
both didn't really work but based on them I tried some things and now it works :)
what I did:
td img{
margin:0px;
padding:0px;
margin:0px;
vertical-align:bottom;
}
thx!
