image alingment prob with ie

liunx · Jan 9, 2008

Hi- 
 
Today's interesting problem of the day is I have some script that isn't aligning up correctly in the ever so forgiving browser, IE(6.0), yet the script works just fine in NS(7.0) and OP(7.)! 
 
Here is a screen shot I made and you will notice the problem to be with vertical aligning, because there is a 1px gap above the image for no reason! 
 
Screen Shot (<a class="postlink" href="http://www.icfm.us/colors/ie-ns-op-819x500-g.gif">http://www.icfm.us/colors/ie-ns-op-819x500-g.gif</a>) 
 
I assure you the script is tight; however, if you wish to see it, I'll post it. 
 
Thanks, Gandalf

Show us your code pleaseTHE CSS 
 
body 
{ 
background-color: RGB(244, 126, 83); 
background-image: url(images/bg_01.gif); 
background-repeat: repeat-x; 
color: RGB(244, 126, 83); 
margin-top: 0px; 
margin-left: 0px; 
padding-top: 0px; 
} 
 
.table-menu 
{ 
text-align: left; 
vertical-align: top; 
color: white; 
background-color: transparent; 
width: 800px; 
margin-top: 0px; 
margin-left: 0px; 
padding-top: 0px; 
} 
 
 
 
THE HTML 
 
<table class="table-menu" cellpadding="0" cellspacing="0"> 
<tr align="left"> 
<td align="left" rowspan="4"><img src=http://www.htmlforums.com/archive/index.php/"images/title-side-2x131-g.gif" width="2" height="131" alt="" /></td> 
</tr> 
<tr align="left"> 
<td align="left" colspan="11"><img src=http://www.htmlforums.com/archive/index.php/"images/site-2003-01-27_02.gif" width="354" height="99" alt="" /></td> 
</tr> 
<tr align="left"> 
<td align="left" colspan="11"><img src=http://www.htmlforums.com/archive/index.php/"images/title-bar-798x4-g.gif" width="798" height="4" alt="" /></td> 
</tr> 
<tr align="left"> 
<td align="left"><img src=http://www.htmlforums.com/archive/index.php/"images/services-72x28-off-g.gif" width="72" height="28" alt="" /></td> 
<td align="left"><img src=http://www.htmlforums.com/archive/index.php/"images/mission-72x28-off-g.gif" width="72" height="28" alt="" /></td> 
<td align="left"><img src=http://www.htmlforums.com/archive/index.php/"images/portfolio-77x28-off-g.gif" width="77" height="28" alt="" /></td> 
<td align="left"><img src=http://www.htmlforums.com/archive/index.php/"images/estimates-77x28-off-g.gif" width="77" height="28" alt="" /></td> 
<td align="left"><img src=http://www.htmlforums.com/archive/index.php/"images/links-56x28-off-g.gif" width="56" height="28" alt="" /></td> 
<td align="left"><img src=http://www.htmlforums.com/archive/index.php/"images/faq-54x28-off-g.gif" width="54" height="28" alt="" /></td> 
<td align="left"><img src=http://www.htmlforums.com/archive/index.php/"images/contactus-103x28-off-g.gif" width="103" height="28" alt="" /></td> 
<td align="left"><img src=http://www.htmlforums.com/archive/index.php/"images/aboutus-90x28-off-g.gif" width="90" height="28" alt="" /></td> 
<td align="left"><img src=http://www.htmlforums.com/archive/index.php/"images/sitemap-72x28-off-g.gif" width="72" height="28" alt="" /></td> 
<td align="left"><img src=http://www.htmlforums.com/archive/index.php/"images/search-63x28-off-g.gif" width="63" height="28" alt="" /></td> 
<td align="left"><img src=http://www.htmlforums.com/archive/index.php/"images/spacer.gif" width="62" height="28" alt="" /></td> 
</tr> 
</table> 
 
 
 
So what's the diagnosis, doctor? 
Gandalf

Just wondering if I actually found a problem that there wasn't an answer to.

Waiting patiently, but anticipating the reply(s), 
Gandalf

Do members receive award medals for coming up with question that have no answers?

Afraid I don't have an answer for you, but I'm also having the EXACT same problem in IE! There is a 1-pixel gap between the bottom of the image and the table border, but is fine in Netscape. Any suggestions would also be greatly appreciated here. 
 
One strange thing I did notice with mine. I was fiddling about with the HTML and for some reason removed the META tags and DOC TYPE, and the gap increased to 2 pixels! Very strange.Without seeing your script and just guessing, I would venture to say that your 1px gap might be the way the table is scripted. 
 
Example: 
 
BAD TABLE: 
<table> 
<tr> 
<td> 
blah blah blah 
</td> 
</tr> 
</table> 
 
vs. 
 
GOOD TABLE: 
<table> 
<tr> 
<td>blah blah blah</td> keep the <td>blah</td> on the same line 
</tr> 
</table> 
 
Though you did mention that this table looks fine in NS; which to me would say that you are scripting your tables correctly. May want to try closing the td, tr, and table tags all on the same line; such as: 
 
<table> 
<tr> 
<td>blah blah blah</td></tr></table> 
 
If that does in fact do the trick, that is ludicrous and IE is officially retarded, because there is no reason closing tags should be on the same line, excluding the <td></td>'s! 
 
A friend once said that I don't have normal people problems, mine always happen to be unique and I thought I was the only one out there. }

Gandalf

Wow, closing all the tags on the same line worked! You rock, dude! Well, IE may be retarded then, but is still my favourite browser.What !DOCTYPE did you use? 
 
The closing / on the end of tags, is only required for XML and XHTML documents. In standard HTML it can sometimes cause odd problems: 
<td align="left" colspan="11"><img src=http://www.htmlforums.com/archive/index.php/"images/site-2003-01-27_02.gif" width="354" height="99" alt="" /></td>Well, I did as you suggested and removed all of the [/]'s, but that still didn't kick it. 
 
Thanks tho, 
Gandalf

Definately interesting this problem has become. *as Yoda would say* 
 
Well, after going over the script again and again, I found no errors; so I started adding attributes to the CSS to see if it was a scripting error. However, no luck.

I then dropped the images into Photoshop to see if I had screwed them up and didn't realize it. Well that wasn't the case. So I then looked again and noticed that I had the background-repeat: repeat-x; which IS how I wanted it, but also noticed in my HTML that I had the background image again! For some strange reason this seemed logical when I first scripted the page.

Well, I took out the image in the HTML and it fixed the problem instantly. 
 
One little pixel caused by one little image created a massive headache! Who wouldda thunk!? 
 
Gandalf 
}

image alingment prob with ie

liunx

Guest