[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 791
  • Last Modified:

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?
<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>

Open in new window

0
street9009
Asked:
street9009
  • 3
  • 2
1 Solution
 
cloud620Commented:
I could possibly be white space around your images causing the problem.  See my previous post about images and whitespace.  

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_24410929.html

You can see if that is causing the problem by having all the images on one line without any line breaks.
0
 
street9009Author Commented:
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.
0
 
cloud620Commented:
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.
0
 
cloud620Commented:
There are better ways to do this that would take more time like absolute positioning, but just to get your part working, here is a workaround.

Just set the style of your table to conditionally be "margin-bottom: -2px;" if you are displaying images.(or -3, -4, etc.., whatever looks the best)

That will move the contents below it up that many pixels.

Also, make sure the cell padding and cell spacing for the table are 0, to get rid of that 1 pixel that is left, btw.  
0
 
street9009Author Commented:
You are awesome. It worked like a champ.

Thanks!
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now