IE7 css problem?

Question

I'm having a problem displaying the following page in IE7.

http://townappliance.arosavd.com/index.php/barbeques/natural-gas.html

Each product has a:

<div> for the top with background image.
<li> for the middle with background image.
<div> for bottom with background image.

The <li> has a background-repeat: repeat-y; and it doesn't seem to stop in the right place. If you don't have IE7, copy the above link and use this page to see it:

http://ipinfo.info/netrenderer/index.php

thanks in advance,
pesach

Answer 1

Your markup is invalid and IE7 is rearranging it, maybe other browsers are making better "best guess" at it.

<ol>
    <div /><!-- top -->
    <li />
    <div /><!-- bottom -->
</ol>

Is being reformatted as:

<ol>
    <li>
        <div /><!-- top -->
        <div /><!-- bottom -->
    </li>
</ol>

You'll have to rearrange the HTML; only a LI can be a child of OL, not a DIV (or SPAN or H2, which are also there as direct descendants of the OL).

I'd recommend changing the UL and LI to just DIVs (keeping the IDs and classes the same). This way the markup is no longer invalid. The list elements aren't really necessary here, since each item in the list is quite large, and block-level. Also this would be a quicker fix than actually rearranging the list so it is valid (which is going to require significant CSS updates too)

Hope that helps!

Answer 2

You can change your divs inside your ul to li.

<ul>
    <li class="top"></li>
    <li> item here </li>
    <li class="bottom"></li>
</ul>

or consider moving your divs out of ul.