3 replies [Last post]
caenicus
caenicus's picture
Offline
Regular
Texas
Last seen: 11 years 11 weeks ago
Texas
Timezone: GMT-4
Joined: 2008-11-03
Posts: 11
Points: 6

Howdy gang,

I seem to be having problems getting my list items to line up in IE7. Typical as it may seem, I can't find any solution that works. Perhaps I'm doing something wrong. I have posted my code below. Any help would be greatly appreciated.

Cheers,
-T.

<div id="preview">
	<div class="container">
		<h3>See what's inside: click on a screenshot to view</h3>
		<ul>
			<li class="first">
				<a href="img/screen-001.jpg" rel="shadowbox"><img src="img/thumb-001.jpg" alt="001" /></a>
				<h4>EXTEND MYERS-BRIGGS&reg; TYPE TRAINING</h4>
				<p>Explore the 16 Myers-Briggs&reg; types. Apply learnings with Snapshots, Resources,  Coaching, and Working With modules.</p>
			</li>
			<li class="second">
				<a href="img/screen-002.jpg" rel="shadowbox"><img src="img/thumb-002.jpg" alt="002" /></a>
				<h4>STRENGTHS AND CHALLENGES</h4>
				<p>Myers-Briggs&reg; type-specific, work-related strengths and challenges, plus quick access to  tips.</p>
			</li>
			<li class="third">
				<a href="img/screen-003.jpg" rel="shadowbox"><img src="img/thumb-003.jpg" alt="003" /></a>
				<h4>VIDEO SHORTS</h4>
				<p>Expert tips and advice on everyday business and management  issues – in 5 minutes or less.</p>
			</li>
			<li class="fourth">
				<a href="img/screen-004.jpg" rel="shadowbox"><img src="img/thumb-004.jpg" alt="004" /></a>
				<h4>eCOACHING</h4>
				<p>Avatar guided eCoaching modules walk learners through interactive, step-by-step  coaching sessions.</p>
			</li>
			<li class="fifth">
				<a href="img/screen-005.jpg" rel="shadowbox"><img src="img/thumb-005.jpg" alt="005" /></a>
				<h4>HUNDREDS OF RESOURCES</h4>
				<p>Learners can search resources – videos, tips, articles, toolkits, and more – based on  type and area of improvement or coaching.</p>
			</li>
			<li class="sixth">
				<a href="img/screen-006.jpg" rel="shadowbox"><img src="img/thumb-006.jpg" alt="006" /></a>
				<h4>THINKFAST TIPS</h4>
				<p>Hundreds of tips written by experts, and designed to be behavior-driven, specific, actionable.</p>
			</li>
		</ul>
		<br class="clear" />
	</div> <!-- End container -->
</div> <!-- End Preview -->

#preview {
	position: relative;
	background: #fff;
	border: 1px solid #ABAFB1;
	margin: 2em 0em 0em;
	width: 555px;
	clear: both;
}
 
	#preview .container {
		padding: 21px;
		width: auto;
		height: auto;
		overflow: hidden;
		zoom: 1;
	}
 
	#preview h3 {
		font-size: 1.6em;
		font-weight: bold;
		color: #174e62;
		line-height: 1.375em;
		margin-bottom: 1em;
	}
 
	#preview ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
 
	#preview ul li {
		list-style: none;
		display: inline;
		margin: 0;
		padding: 0;
		width: 157px;
		font-size: 1em;
		float: left;
		vertical-align: top;
	}
 
		#preview ul li img {
			background: #eaeaea;
			border: 1px solid #bebebe;
			margin: 0 0 1em;
			padding: 0.3em;
		}
 
		#preview ul li h4 {
			color: #d96f31;
			font-size: 1.2em;
			margin-bottom: .33em;
		}
 
		#preview ul li p {
			font-size: 1.2em;
			line-height: 1.5em;
			color: #333;
		}
 
	#preview ul li.third, #preview ul li.sixth {
		margin-right: 0;
	}
 
	#preview ul li.fourth {
		clear: both;
	}
 
	#preview ul li.fourth, #preview ul li.fifth, #preview ul li.sixth {
	}

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 5 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

write valid code, and provide

write valid code, and provide us a link or show all your code.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 32 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

@CTJ: The OP gave us a

@CTJ:
The OP gave us a minimal test case. It would be helpful for him to have indicated whether he used a DTD that triggered standards mode. Otherwise, there are no errors. If fixing this case model does not fix the page, then we'll have to look at the entire document, but not until.

@caenicus:
Remove the #container div. Its only purpose is to hold the ul, but the ul is itself a container for the list items. That makes #container superfluous.

There is no need for the first – sixth classes. Even if they were needed, they should be IDs since each is specific to the one element.

The anchor should be wrapped in a block level container since it abuts a block container. Although most, maybe even all browsers, handle this case OK, technically, the abutment is undefined. An example is the {display: run-in;}, which no browser handles properly for an inline/block mix.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="en">
<head>
  <meta name="generator"
        content=
        "HTML Tidy for Linux/x86 (vers 25 March 2009), see <a href="http://www.w3.org" rel="nofollow">www.w3.org</a>" />
 
  <meta http-equiv="Content-Type"
        content="text/html; charset=utf-8" />
 
  <title>... Test ...</title>
 
  <style type="text/css">
/*<![CDATA[*/ 
 
  #preview {
    background: #fff;
    border: 1px solid #ABAFB1;
    margin: 2em 0em 0em;
    padding: 21px;
    width: 555px;
    }
 
  #preview h3 {
    font-size: 1.6em;
    color: #174e62;
    line-height: 1.375em;
    margin-bottom: 1em;
    }
 
  #preview ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    }
 
  #preview li {
    display: inline-block;
    padding: 0 1%;
    width: 30%;
    font-size: 1em;
    vertical-align: top;
    }
 
  /* corrections for ie6&7 */
 
  * html #preview li {
    display: inline;
    }
 
  *>html #preview li {
    display: inline;
    }
 
  /* corrections end */
 
  #preview ul li img {
    background-color: #eaeaea;
    border: 1px solid #bebebe;
    margin: 0 0 1em;
    padding: 0.3em;
    }
 
  #preview ul li h4 {
    color: #d96f31;
    font-size: 1.2em;
    margin-bottom: .33em;
    }
 
  #preview ul li p {
    font-size: 1.2em;
    line-height: 1.5em;
    color: #333;
    text-align: left;
    }
 
  #preview ul p.pic {
    margin: 0;
    text-align: center;
    }
 
  /*]]>*/
  </style>
</head>
 
<body>
  <div id="preview">
    <h3>See what's inside: click on a screenshot to view</h3>
 
    <ul>
      <li>
        <p class="pic"><a href="img/screen-001.jpg"
            rel="shadowbox"><img src="img/thumb-001.jpg"
             alt="001" /></a></p>
 
        <h4>EXTEND MYERS-BRIGGS® TYPE TRAINING</h4>
 
        <p>Explore the 16 Myers-Briggs® types. Apply learnings with
        Snapshots, Resources, Coaching, and Working With
        modules.</p>
      </li>
 
      <li>
        <p class="pic"><a href="img/screen-002.jpg"
            rel="shadowbox"><img src="img/thumb-002.jpg"
             alt="002" /></a></p>
 
        <h4>STRENGTHS AND CHALLENGES</h4>
 
        <p>Myers-Briggs® type-specific, work-related strengths and
        challenges, plus quick access to tips.</p>
 
      </li>
 
      <li>
        <p class="pic"><a href="img/screen-003.jpg"
            rel="shadowbox"><img src="img/thumb-003.jpg"
             alt="003" /></a></p>
 
        <h4>VIDEO SHORTS</h4>
 
        <p>Expert tips and advice on everyday business and
        management issues &#8212; in 5 minutes or less.</p>
      </li>
 
      <li>
        <p class="pic"><a href="img/screen-004.jpg"
            rel="shadowbox"><img src="img/thumb-004.jpg"
             alt="004" /></a></p>
 
        <h4>eCOACHING</h4>
 
        <p>Avatar guided eCoaching modules walk learners through
        interactive, step-by-step coaching sessions.</p>
      </li>
 
      <li>
        <p class="pic"><a href="img/screen-005.jpg"
            rel="shadowbox"><img src="img/thumb-005.jpg"
             alt="005" /></a></p>
 
        <h4>HUNDREDS OF RESOURCES</h4>
 
        <p>Learners can search resources – videos, tips, articles,
        toolkits, and more – based on type and area of improvement
        or coaching.</p>
      </li>
 
      <li>
        <p class="pic"><a href="img/screen-006.jpg"
            rel="shadowbox"><img src="img/thumb-006.jpg"
             alt="006" /></a></p>
 
        <h4>THINKFAST TIPS</h4>
 
        <p>Hundreds of tips written by experts, and designed to be
        behavior-driven, specific, actionable.</p>
      </li>
    </ul>
  </div><!-- End Preview -->
</body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 5 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

oh, my bad. I saw something

oh, my bad. I saw something that wasnt there.

Sick