# [web] Two rendering problems in IE- any thoughts?

This topic is 4697 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

A'ight. So I'm working on: http://www.sanctuslegacy.com/mergewip3/ It renders just fine in Firefox, but in IE, I get two problems: Gaps
• Below the main header image
• Below each of the "shoulder" images
I've been looking at the code for much too long, and I really just don't see the problem. I'm sure it's quite simple, I'm just looking too hard. Does anyone spot anything that merits an issue? Thanks in advance. :)

##### Share on other sites
Sorry, I don't actually have solutions to either of your problems, but I just ran into the gap problem myself and wondered if you've found a solution yet? In the meantime I'm digging around to see if I can find out what the problem is, I'll post here if I find a solution (or an explanation without a solution for that matter).

//EDIT:

Not helpful to me, but it may be of use to you, I'm not sure:
Quote:
 http://wordpress.org/support/topic/27718After hours and hours of searching on the internet, I found ONE person with an answer. In IE (and only IE, to my knowledge), if you have a div that has an image in it, you CANNOT have a return between the opening and closing () tags or IE will insert 3 px extra space after the image. Why? Who knows? But as soon as I deleted the returns so that my banner div was written out all on one line, the space went away.

##### Share on other sites
I also found this, which appears to be a more detailed explanation of my earlier find. Still didn't solve my problem though.

##### Share on other sites
I still have not been able to fully understand what's going on, but I got a hack working by setting valign to "bottom".

Again, though, it was a hack, and I don't like hacks. I've actually revised the design to avoid the nastiness, altogether: but if anyone figures this little demon out, let me know. :)

##### Share on other sites
I've come across this problem several times over the years, but don't panic, the fixes are incredibly simple. The gapping problem might actually be a minute bug with the IE parser, but whatever the cause, the fix is simple.

<TD><IMG src="Dawntide Sanctus Legacy_files/left_edge_top.gif"> </TD>

Simply take out the space between the img tag and the closing /td. Like so:

<TD><IMG src="Dawntide Sanctus Legacy_files/left_edge_top.gif"></TD>

Do the same for right_edge_top.gif and all of the header images, including the transparent gifs and voila, problem solved.

As a simple tip to easily spot these problems as they occur, load your page in IE and press ctrl+a to select everything. The little highlighting effect under the images is a tell-tale sign that there's a problem there with whitespace between the img and closing cell tag. Also, non-breaking spaces can also cause similar issues. Deleting them as appropriate fixes the problem and again using ctrl+a will highlight any potential problems. [smile]

Oh and for what it's worth, your HTML source is incredibly difficult to read. Recommendations:

Always place quotation marks around attribute values. For example:

<td width=456>

<td width="456">

Use the built-in table attributes for layouts if you're going to use tables. For example, if you want to centre the contents of a cell, don't use the <center> tag. Instead use: <td align="center">. It's much safer in terms of producing consistent results across browsers (and certainly makes Nutscrape behave a little better... if that's actually possible).

Hope that's of some use to both of you. Like I said, I'll post back once I've remember what the problem is with the background images.

Edit: Aha, just remembered. It seems that IE doesn't support using background images for table rows. Instead, you have to use them for the individual table cells. This has been the case in my experiences anyway and after modifying your source locally, I have rectified this problem as well.

Fix for the top navigation image:

<TR align=middle bgColor=#737880 height=30>  <TD width=652 background="images/navbar2.jpg">...

<TR align=middle bgColor=#737880 height=28>                      <TD background="images/navbar.jpg">...

Note: I've not modified your HTML style in accordance with my recommendations above as I'll leave that up to you. [smile]

##### Share on other sites
I thought a couple of images might help to explain the ctrl+a usage, so here we go:

Before:

With highlighting:

After:

With highlighting:

As you can see, it's quite easy to tell from a simple ctrl+a where you may have alignment problems. Think of it as syntax highlighting... for images and without the syntax. [wink]

I haven't fixed the 3rd problem image that I've highlighted (the one next to the body text) as there's no real need here. It was more to illustrate the point.

Anyway, hope that's been of some use to you.

##### Share on other sites
Very nice explanation. Unfortunately for me, I'm not using tables at all, and don't have any excess whitespace, but am still experiencing the problem.

##### Share on other sites
Are you using DIVs at all? I had a lot of spacial problems with them as well in the past, too. Pretty damned annoying but a lot of these tiny problems with IE are quite similar. If I can help, let me know and I'll be happy to take a look.

1. 1
2. 2
Rutin
21
3. 3
JoeJ
18
4. 4
5. 5

• 14
• 40
• 23
• 13
• 13
• ### Forum Statistics

• Total Topics
631719
• Total Posts
3001886
×