1

I am having a real problem with a tables being rendered incorrectly in IE in an e-commerce store I'm setting up for a client. Here's the link:

http://jpgrv.zjbzq.servertrust.com/products-s/1819.htm

The tables are the areas the actually products are contained in. If you look in IE, you'll see that the height of the rows are too high. I've tried to apply CSS directly to the rows and to the columns (inline, external stylesheet and internal stylesheet).

I had a thought that maybe the images were too tall so I resized them and tried it, but to no avail.

I've done a Google search knowing that there are quite a few bugs in regards to tables and IE but none of the known issues that I've found have helped me find a solution.

BTW, as you look at the source code and inspect the site, it may look like a crazy mess of tables, etc. which is because this site is built within the Volusion framework so there's a lot of dynamically generated content.

If anybody has any suggestions or can point me in the right direction, I would greatly appreciate it.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
MillerMedia
  • 3,651
  • 17
  • 71
  • 150
  • 1
    One thing I noticed was, if you look at the source via firefox, you'll see several red form end tags. You're starting the form, then a div or two, then close the form, then close the divs. Not sure if that is even related, but who knows. Other than that, it may be how IE deals with the article tag. Not sure if this will help, but: http://www.nickyeoman.com/blog/html/118-html5-tags-in-ie8 – Tebc Jan 27 '13 at 22:50
  • Ah yeah good suggestion, I forgot about HTML5 issues with IE. I have a hunch that that may be the issue. I'll let you know if it is and then you can leave an answer! – MillerMedia Jan 27 '13 at 23:03
  • Hmm, the article HTML5 tag was before the table that was being rendered wrong. I changed it to a div but it didn't affect the table... – MillerMedia Jan 28 '13 at 00:00
  • Perhaps I was looking at the wrong table. I did come across this, maybe it will be of benefit: http://stackoverflow.com/questions/993540/ie-bug-with-tds-tables-and-whitespace – Tebc Jan 28 '13 at 02:06
  • 1
    With 1,028 markup errors, it’s a miracle that the page renders at all. Fix the syntax first, using http://validator.w3.org – Jukka K. Korpela Jan 28 '13 at 04:53
  • @JukkaK.Korpela, the markup issues are from the Volusion framework. I totally agree with you, the framework is an absolute mess and I don't have any control over the way it renders unfortunately... – MillerMedia Jan 28 '13 at 07:12
  • Some things to try: 1. Try using a cross-browser CSS reset like [Normalize.cs](http://necolas.github.com/normalize.css/). Just include it before your jquery-ui.css, it could fix some table rendering issues. 2. I've had better luck with a Transitional Doctype for dealing with IE's broken box model. Try this instead of your strict doctype ` `. Try using some css defaults like this: `table { border-collapse: collapse; border-spacing: 0; padding: 0; margin: 0; }` and `tr, th, td { vertical-align: middle }`. – meub Feb 03 '13 at 20:54
  • Well I figured out one way that makes the problem go away, but I don't know why it is happening. If you delete the price span (for example `52.25` in the last column the problem goes away. Baffled as to why it matters though. – mrtsherman Feb 03 '13 at 21:24
  • @mrtsherman, I'll see if that's editable. The Volusion framework is really limited in what you can go in and edit, I'll take a look. This has been a very confusing problem, I'm right with you... – MillerMedia Feb 03 '13 at 21:28

1 Answers1

3

The extra height is there because of a div "add_button" inside a div "container".

You can see it is this screenshot: Screenshot from developper tools showing the div taking up undesired space

Morv
  • 355
  • 2
  • 9
  • Thank you so much!! That was definitely the problem. The div wasn't closed in the code (it was a coding error I suppose) but I guess the was being generated by IE after the fact and that caused something to happen. – MillerMedia Feb 03 '13 at 21:38