Images with Links - Remove line break after them
I am working on a web page that has a table at the very top with a background image (the banner). Inside the table, I have a set of PHP if statements dictating what to put in the table so that it sits on top of the banner. When the If statement displays text only, there's no white space between the banner and the top of the content (what I want). However, when the table row is the code below, there's a 3-5px gap between the bottom of the banner and the top of the content.
I would like to cut this out if at all possible.
Any ideas?
I would like to cut this out if at all possible.
Any ideas?
<tr>
<td align="right">
<a HREF="../main/index.php?L=en&M1=8"><img src="../images/buttons/home_off.jpg" id="home" name="home" value="home" onMouseOver= "if (document.images) document.getElementById('home').src= '../images/buttons/home_on.jpg';" onMouseOut= "if (document.images) document.getElementById('home').src= '../images/buttons/home_off.jpg';" border="0"></a>
<a HREF="../main/index.php?PrematurityNetworks_x=1"><img src="../images/buttons/networks_off.jpg" id="networks" name="networks" value="networks" onMouseOver= "if (document.images) document.getElementById('networks').src= '../images/buttons/networks_on.jpg';" onMouseOut= "if (document.images) document.getElementById('networks').src= '../images/buttons/networks_off.jpg';" border="0"></a>
<a HREF="../main/index.php?SpecialDelivery.x=55&SpecialDelivery.y=9"><img src="../images/buttons/special_off.jpg" id="special" name="special" value="special" onMouseOver= "if (document.images) document.getElementById('special').src= '../images/buttons/special_on.jpg';" onMouseOut= "if (document.images) document.getElementById('special').src= '../images/buttons/special_off.jpg';" border="0"></a>
<a HREF="../main/index.php?L=en&M1=9"><img src="../images/buttons/select_off.jpg" id="select" name="select" value="select" onMouseOver= "if (document.images) document.getElementById('select').src= '../images/buttons/select_on.jpg';" onMouseOut= "if (document.images) document.getElementById('select').src= '../images/buttons/select_off.jpg';" border="0"></a>
<a HREF="../main/index.php?Update_x=1"><img src="../images/buttons/your_off.jpg" id="your" name="your" value="your" onMouseOver= "if (document.images) document.getElementById('your').src= '../images/buttons/your_on.jpg';" onMouseOut= "if (document.images) document.getElementById('your').src= '../images/buttons/your_off.jpg';" border="0"></a>
</td>
</tr>
ASKER
It tightened it up a little in FF, but not in IE. IE's gap is still the same and the one in FF is about 1px now.
The line break between the last </a> tag and the </tr> tag is what is causing most of the space in IE for me. I'm not saying that having everything on one line is the best solution, but it is definitely indicative of the cause.
I will look around to see if there is any way to have a browser not treat link breaks as white space.
I will look around to see if there is any way to have a browser not treat link breaks as white space.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
You are awesome. It worked like a champ.
Thanks!
Thanks!
https://www.experts-exchange.com/questions/24410929/Table-spacing-not-supposed-to-be-spacing-at-all-though.html
You can see if that is causing the problem by having all the images on one line without any line breaks.