Question

The following page: http://broadwayexport.com/demo/new/hometextiles.html does not look right in Internet Explorer 7.

The bullets for the unordered list are completely off!

Here is the CSS:

      .productdev {}
      .productdev h2 {
        color: #193175;
        float: left;
      }
      .productdev .title {
        color: #FFF !important;
        font-size: 1.2em;
        line-height: 24pt;
      }
      .productdev .italy {
        font-style: italic;
        font-size: 1em;
        clear: both;
        float: none;
        color: #193175;
      }
      #content-image {
        padding-top: 50px;
      }
      .productdev ol, #productdev ul {
        margin-left: 15px;
      }
      .productdev ul {
        margin-left: 5%;
      }
      .productdev ul > li {
        padding: 15px 0px 0px;
        height: 190px;
      }
      .productdev ul  li  ol{
        padding-top: 3px;
      }
      .productdev ul  li  ol li{
        padding: 3px;
      }
      #main #content {
        min-height: 45em;
      }
      #content-image img {
        width: auto !important;
        padding: 15px 0px 10px;
        padding-right: 15px;
      }

Someone had given me the suggestion of removing the height from .productdev ul > li, but the problem with that is then the list items would not line up with their respective images.

How do I fix it while still maintaining the same layout as I have currently?

Answer 1

Add vertical-align:top to the li‘s and remove the top-padding.
Also,

ul > li > strong { display:block; margin-top:-5px }

adjust that negative margin and add some margin on the entire ul to suit.
also add position:relative;z-index:2 (to the strong) in case of vanishing tricks.