Sign in to follow this  

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

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

If you intended to correct an error in the post then please contact us.

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
Certain backgrounds don't load
  • Navigation bar
  • Copyright information bar
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 this post


Link to post
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/27718
After 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 this post


Link to post
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 this post


Link to post
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>


Much easier to read:


<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">
...


Fix for the copyright image:


<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 this post


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

Before:

Free Image Hosting at www.ImageShack.us

With highlighting:

Free Image Hosting at www.ImageShack.us

After:

Free Image Hosting at www.ImageShack.us

With highlighting:

Free Image Hosting at www.ImageShack.us

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 this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this