PDA

View Full Version : Space around an image in IE


dhanson
01-16-2005, 10:06 PM
I apologize in advance for my poor coding abilities and the fact that I still use tables/very little CSS - I'm a beginner who hasn't had time to upgrade his skills.

My question is regarding a site I'm currently working on. In Netscape and Firefox (on my PC) and in IE for Mac, everything looks fine. However, in IE on my PC, there's white space around the main image which adds space at the bottom of the main navigation menu just to the left (part of the same main table).

I'm sure with CSS, I could easily fix this, but am hoping someone can give me a quick fix until I learn CSS. The test page showing this problem is at: http://www.blainadams.com/index-test.htm

thanks!

ronaldb66
01-17-2005, 10:29 AM
Hard to tell, but it may be caused by all the explicitly set heights on those table cells; by the looks of it, you set the two cells that comprise the row in question to be 132 high, but the image itself already is 196 high.
Check your heights, but better: refrain from setting heights explicitly in every place you can, letting the content determine the desired height. And learn to cut down on multiply nested tables as soon as possible: the amount of markup you need for that size page is simply awful.

_Aerospace_Eng_
01-17-2005, 03:20 PM
okay the problem again is an IE problem which u already know i have answered a similar question like this already, the problem lies here in this td cell
<td width="232" height="132" align="left" valign="top"><a href="index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','navigation/home-on.jpg',1)"><img name="Home" border="0" src="navigation/home-off.jpg" width="232" height="32"></a><br>
<a href="services.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Services','','navigation/services-on.jpg',1)"><img name="Services" border="0" src="navigation/services-off.jpg" width="232" height="33"><br>
</a><a href="solutions.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Solutions','','navigation/solutions-on.jpg',1)"><img name="Solutions" border="0" src="navigation/solutions-off.jpg" width="232" height="32"></a><br>
<a href="clients.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Clients','','navigation/clients-on.jpg',1)"><img name="Clients" border="0" src="navigation/clients-off.jpg" width="232" height="32"></a><br>
<a href="dyk.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Did you know?','','navigation/dyk-on.jpg',1)"><img name="Did you know?" border="0" src="navigation/dyk-off.jpg" width="232" height="33"></a><br>
<a href="contact.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact','','navigation/contact-on.jpg',1)"><img name="Contact" border="0" src="navigation/contact-off.jpg" width="232" height="34"></a>
<a href="services.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Services','','navigation/services-on.jpg',1)">
</a> </td>
your images have to be on the same line as you td tags or you will get that little space created in IE, change that code to this
<td align="left" valign="top"><a href="index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','navigation/home-on.jpg',1)"><img name="Home" border="0" src="navigation/home-off.jpg"></a><br><a href="services.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Services','','navigation/services-on.jpg',1)"><img name="Services" border="0" src="navigation/services-off.jpg"></a><br><a href="solutions.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Solutions','','navigation/solutions-on.jpg',1)"><img name="Solutions" border="0" src="navigation/solutions-off.jpg"></a><br><a href="clients.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Clients','','navigation/clients-on.jpg',1)"><img name="Clients" border="0" src="navigation/clients-off.jpg"></a><br><a href="dyk.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Did you know?','','navigation/dyk-on.jpg',1)"><img name="Did you know?" border="0" src="navigation/dyk-off.jpg"></a><br><a href="contact.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact','','navigation/contact-on.jpg',1)"><img name="Contact" border="0" src="navigation/contact-off.jpg"></a><a href="services.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Services','','navigation/services-on.jpg',1)"></a></td>
i took out the width and heights because as ronald said let the content make the height and width

dhanson
01-17-2005, 05:14 PM
Thanks!