HTML Problem

[cburwell]

I am making an e-portfolio for my web design class. I have been working with HTML/XHTML for 4-5 years now (off and on), so I like to think that I know what I am doing.

I am having one small problem with the way my design looks. In firefox it looks as it should, but using IE the space between one image and the image below it is large. In fact there should be no space between these two. The problem only appears when viewing the page with IE.

This is not a big issue, but most likley I will loose points, and I am a bit anal about little things like this. I am also know for overlooking small things when it comes to a problem. I figure it is likley that I could just be making a big deal out of something that I am missing.

I am fairly sure that I have all of the opening an closing tags where they need to be, but I am still stumped. Can anyone else give some insight to this problem?

Here is a link to the page. You will need IE to be able to see the problem, which is at the top of the page.

http://www.personal.psu.edu/ctb150/eportfolio/

 

[Langford]

if you takeout the carrage-return after the header image, IE should render without the extra space.
<img src="images/header_01.gif" width="900" height="56" alt="Christopher Burwell Title header" /></td>
I know it looks less organized, but that is what IE is probably doing.

 

[cburwell]

That still yields the same result.

 

[Langford]

Hmm... it worked for me when I tested it here. Did you take out everything until the tags touched?

 

[PTNL]

try specifying in the css to treat all 'table', 'tr', and 'td' tags to have a border of "0":

additionally, try specifying the css to assign a border of "0" to the 'img' tags.

stuff like this is kind of needle in a haystack when dealing with IE's "off by one" tendencies. try also having each td tag have a unique border color to see where IE thinks the table data blocks' borders should be ... that is, versus where the W3C says they *really* should be

 

[Sack]

I Had the same problem when troubleshooting a site done by a work colegue. We were using Macs (Dreamweaver) and there should have been no space between some images but there was in the browser. I had to go into 'code' view and remove any 'space' or CR betwen the two <img> tags, e.g.

From:
<img src="blah blah">
<img src="blah blah">

to: <img src="blah blah"><img src="blah blah">

And from what I can remember, I might have had to do this on my PC ... Doing it in Dreamweaver on the mac wouldn't work, although I didn't try just using something like BBedit on the mac to edit the code there.

 

[MadJuggla9]

I did not look at your code but IE nearly always needs a BR tag after an image ...

2 images touching:
<img src=img1.gif><br>
<img src=img2.gif>

image touching table:
<img src=img1.gif><br>
<table cellpadding=0 cellspacing=0 .... ><tr><td>.....

 

[Sack]

Pretty sure IE doesn't always need a <br> but I downloaded you page and had a look. I fixed the problem by the method I mentioned earlier by just editing the code in Dreamweaver (on PC, before/after screenshot from IE).

Don't ask me why it does it... maybe IE is thinking that at least part of the space is a 'space' character and because it can't fit it in the table it wraps it under the image resulting in a space ... if you can understand that

Just tried MadJuggla9's suggestion and just puting the <br> after the <img src="images/header_01.gif" width="900" height="56" alt="Christopher Burwell Title header" /> tag

<img src="images/header_01.gif" width="900" height="56" alt="Christopher Burwell Title header" /><br>

works too

 

[cburwell]

Thank you for the replies. I had not recieved the chance to chekc this thread for a while, since I was preparing for finals. I finally figured out that the problem was with the CR between the IMG tage and the </td> tag. I had a feeling it would be something simple!

Thank you for taking the time to help me! I aprreciate it!

 

[MadJuggla9]

Sack also has a point, although for general purpose the BR tag takes care of that. If you have a table with multiple images split by table cells, then at the end of that table cell you will have to bump the next line up to leave no space after the closing cells around the images ... a good example of this can be found here where i used both ....


http://crunet.com/sandyfeet/

<table align=center border=0 cellpadding=0 cellspacing=0 bordercolor=red>
	<tr>
		<td>
			<! --- right here is trailing BR -- >
			<img src=images/header/header_top.jpg><br>
		</td>
	</tr><tr>
		<td>
			<table border=0 cellpadding=0 cellspacing=0><tr><td>
			<a href=index.php?page=concerts.html><img border=0 src=images/header/concerts1.jpg hsrc=images/header/concerts2.jpg></a></td><td>
			<a href=index.php?page=links.html><img border=0 src=images/header/links1.jpg hsrc=images/header/links2.jpg></a></td><td>
			<a href=index.php?page=audio.html><img border=0 src=images/header/music1.jpg hsrc=images/header/music2.jpg></a></td><td>
			<a href=index.php?page=booking.html><img border=0 src=images/header/booking1.jpg hsrc=images/header/booking2.jpg></a></td><td>
			<a href=index.php?page=daniel.html><img border=0 src=images/header/daniel1.jpg hsrc=images/header/daniel2.jpg></a></td><td>
			<a href=index.php?page=katie.html><img border=0 src=images/header/katie1.jpg hsrc=images/header/katie2.jpg></a></td>
			<! ---- bumped up portion of closing tag ^ ----- >
			</table>
		</td>
	</tr><tr>
		<td>
			<img src=images/header/header_bottom.jpg>
		</td>
	</tr>
</table>