Forum Moderators: not2easy

Message Too Old, No Replies

margin issue in ie

         

tito629

5:46 pm on Feb 24, 2006 (gmt 0)

10+ Year Member



I have a vertical menu bar that was created in photoshop made of gif images. I want to display them vertically. I tried using a ul with css but could not get the spacing between the list items to go away so I resorted to a table. Now in IE there is a space between the logo and the table, and in firefox I cannot get the spacing in the table to go away.

Any input would be appreciated since I am fairly new at css

[edited by: SuzyUK at 9:05 pm (utc) on Feb. 24, 2006]
[edit reason] ooops sorry no URLs : see TOS #13 [WebmasterWorld.com] [/edit]

tito629

9:25 pm on Feb 24, 2006 (gmt 0)

10+ Year Member



I fixed the firefox problem but ie is still giving me problems. Here is the code:

<style type="text/css">
img
{
border-width:0px;
padding:0;
margin:0;
}
table{float:left;}

div.body
{
width:582px;
}

</style>

</head>

<body style="background-color:#F0E68C; margin:0;">
<img border="0" src="images/logo.gif" />

<table border="0" cellpadding="0" cellspacing="0">
<tr><td><a href="#"><img src="images/nav-home.gif" /></a></td></tr>

<tr><td><a href="#"><img src="images/nav-fo.gif" /></a></td></tr>
<tr><td><a href="#"><img src="images/nav-pa.gif" /></a></td></tr>
<tr><td><a href="#"><img src="images/nav-atty.gif" /></a></td></tr>
<tr><td><a href="#"><img src="images/nav-links.gif" /></a></td></tr>
<tr><td><img src="images/nav-address.gif" /></td></tr>
<tr><td><img src="images/nav-phone.gif" /></td></tr>
<tr><td><img src="images/nav-base.gif" /></td></tr>
</table>

doodlebee

4:44 pm on Feb 26, 2006 (gmt 0)

10+ Year Member



Let me guess - it's about a 3px space below the image in IE?

IE automatically adds a 3px margin below every image. Stick this in your header:

<!--[if lte IE 6]>
<style type="text/css">
img {margin-bottom:-3px;}
</style>
<![endif]-->

If you need to play with removing that space a bit more than the 3 pixels, then feel free.

Hope that helps.