Question

A very strange behavior is occuring on the website I’m working on in a animal display list.

The animals are laid out in a grid format. When in IE8 and with compat mode turned on, the animals pictures all shoot to the top of the screen and stack under each other.

This is completely perplexing to me. I need to call upon the talent of this community to help me fix this bug.

Example Page found here – http://www.petango.com/Forms/AnimalSearchResults.aspx?z=L2R%205W3&d=2147483647&sh=0&s=1&b=650&g=All&size=All&c=All&a=All&dec=All&p=False&sid=0&zs=True&ht=False

In IE8, it looks okay, when compat mode is turned on, the images shoot to the top of the page. I can only assume this behavior is found in IE7.

I’m at a loss at where to start troubleshooting this.

UPDATE 1 – 12:16PM

I tried a test where I took the animal display code and removed the unordered list and replaced it with a table.

The Div within the LI element doesn’t seem to be the culprit?

Answer 1

Certianly you need to clean up your markup and not use a <ul> and <li> structure with all the nested <divs> when a simple <table> would do nicely.

Also, you can get a little closer by changing div.center-photo-box-1 to have position:relative instead of static. that will get you closer…