Scenario: There are two div's. One is floated to the left and contains the navigation, the other is floated to the right and contains the content.
Problem: The nav on the left is affecting the list items within the content div. Pushing the unordered list image over a few pixels. Here's a low res jpg of the error: http://summit-productions.ca/firing_range/error.jpg
Applicable CSS:
Code:
div#menu {
background: #369;
color: #fff;
margin: 0 0 5px 5px;
width: 15em;
font-size: .75em;
float: left;
border: 1px solid #036;
}
div#menu ul {
margin: 0 0 1em 0;
padding: 0;
list-style-type: none;
}
div#menu ul li {
border-bottom: 1px solid #000;
margin: 0;
line-height: 1.25em;
}
div#menu ul li a {
color: #fff;
text-decoration: none;
margin: .5em;
}
div#menu ul li a:hover {
color: #fc6;
}
div#menu ul li ul {
display: none;
}
div#menu ul li.on {
background: url(images/backgrounds/background-menu-ul-ul.jpg) 100% 100% repeat-x #39c;
padding: .5em 0 2em 0;
margin: 0;
border-bottom: 2px solid #000;
}
div#menu ul li.on:first-line {
font-weight: bold;
}
div#menu ul li.on ul {
display: block;
margin: 0;
padding: 0;
}
div#menu ul ul li {
background: none;
}
div#menu ul ul li a {
margin: 0 0 0 1.75em;
}
div#menu ul ul li a:hover, div#menu ul li.on a:hover {
color: #fc6;
}
div#menu ol {
margin: 0;
padding: 0;
list-style-type: none;
}
div#menu ol li {
margin: .5em .25em;
}
div#menu ol li a {
color: #000;
text-decoration: none;
}
div#menu ol li a:hover {
color: #f90;
text-decoration: underline;
}
div#menu p {
margin: 0.5em;
}
div#menu p a {
color: #fc6;
text-decoration: none;
}
div#menu p a:hover {
color: #fff;
}
p#newsroom {
text-align: center;
font-weight: bold;
margin: 0 0 .5em 0;
}
div#content {
margin: .4em 1.5em 0 16em;
min-width: 300px;
font-size: .8em;
text-align: justify;
}
div#content p {
text-indent: 0;
}
div#content p.point {
margin: .5em 2em 1.5em 2em;
text-indent: 0;
}
div#content ul, div#content ol {
padding: 0 2em 1em 2em;
text-indent: 0;
}
div#content ul li{
line-height: 1.5em;
list-style-image: url(images/listimage.gif);
list-style-position: outside;
margin: .5em 0 .5em 2em;
}
Applicable HTML:
HTML Code:
<div id="menu">
<ul>
<li><a href="main.php">Main</a></li>
<li><a href="about.php">About Us</a>
<ul>
<li><a href="about_background.php">Corporate Background</a></li>
<li><a href="about_client.php?max=15">Clients</a></li>
<li><a href="about_manage.php">Management Team</a></li>
<li><a href="about_demo.php">Demos</a></li>
</ul>
</li>
<li class="on"><a href="tech.php">Technology & Services</a>
<ul>
<li><a href="tech_gemsswift.php">GeMS SWIFT</a></li>
<li><a href="tech_gems.php">GeMS</a></li>
<li><a href="tech_swiftauthor.php">SWIFT Author</a></li>
<li><a href="tech_swiftle.php">SWIFT eLearning</a></li>
<li><a href="tech_stellar.php">Stellar (Patent Pending)</a></li>
<li><a href="tech_consulting.php">Course Consulting</a></li>
<li><a href="tech_asp.php">ASP Hosting</a></li>
</ul>
</li>
<li><a href="support.php">Support</a>
<ul>
<li><a href="support_faq.php">FAQ</a></li>
<li><a href="forum/index.php">Forums</a></li>
</ul>
</li>
<li><a href="store.php">eStore</a></li>
<li><a href="contact.php">Contact Us</a></li>
</ul>
<div id="news">
<p class="center" style="margin: .5em 0;">— <strong>Press Releases</strong> —</p>
<p><a href="news_display.php?id=15&max=15">
Gemini Secures Patent Pending for Stellar an Innovative Skills Gap Performance Improvement Technology
</a></p>
<p><a href="news_display.php?id=14&max=15">
Gemini’s eLearning Solution Continues to Expand at Husky Energy
</a></p>
<p><a href="news_display.php?id=13&max=15">
Gemini appoints new VP of Operations and Marketing as Business Continues to Expand
</a></p>
<hr /><p id="newsroom"><a href="news.php?max=15">Visit our Newsroom</a></p>
</div>
</div>
<div id="content">
<h1>SWIFT eLearning</h1>
<p style="text-align: center">
<img src="images/tech/logo_swift.jpg" class="special" alt="" title="" />
</p>
<p>Based on years of international research and an award-winning design, the SWIFT eLearning Environment is the pedagogical heart of our eLearning solution. Once a course is created using the SWIFT Author, it is published to the SWIFT eLearning Environment.</p>
<p>The key features of SWIFT eLearning Environment are the unique <strong>Adaptive Learning Environment</strong> and <strong>Adaptive Testing Algorithm</strong> modeled on an individualized intelligent tutoring methodology. SWIFT eLearning uses adaptive testing and learner input to create individualized course paths, allowing learners to concentrate on content most relevant to their learning needs. As a result, learners absorb and retain more information in less time. The Adaptive Testing Engine uses unique algorithms that analyze learner responses to accurately determine mastery/non-mastery of the course more efficiently than other testing methods.</p>
<p>SWIFT eLearning Environment also provides an intuitive interface and intelligent guidance that:</p>
<ul><li>Presents the learners adapted course</li><li>Guides learners through their adapted course to ensure learning objectives are met</li><li>Continuously adapts the course path as learners progress</li><li>Tracks the learners as they navigate independently</li><li>Maintains the learners location to pick up where they left off</li><li>Records extensive statistical data for research and performance which can be accessed by the learner analysis</li><li>Provides explanatory feedback and guidance based on learner interaction to increase knowledge retention</li><li>Provides an optional course map that motivates learners by indicating progress, achievements, and percentage of course completed</li><li>Provides graphical representation of learners adapted course</li><li>Allows independent, non-linear course navigation</li><li>Provides a "My Path" button that returns the learner to their recommended course path</li></ul>
<h3>SWIFT Adaptive Testing</h3>
<p>Intelligent Tutoring Systems gather information about a learner's progress by observing them as they interact with the learning environment. Many systems use exercises, quizzes, and exams as the setting for these observations since the range of possible inference about the learner can be more easily constrained. Organizations also require that a training system provide concrete records of progress, we chose formative and summative testing as our means for observing the learner in SWIFT.</p>
<p>One of the problems with traditional exams is that they are of fixed length; a learner must complete a long series of questions in order for the system to determine how well they know a subject. This can cause frustration for both novices and experts, who may know after a few questions that the subject matter is either bewildering or trivial. Adaptive testing allows exams to be significantly shorter than traditional tests, without losing any predictive power about a learner's mastery of the material. The SWIFT Adaptive Testing algorithm was based on the work of [Frick & Welch, 1993]. The algorithm uses Bayes' theorem to estimate the probability that the learner is a master or non-master of the material after each test question is answered. In SWIFT, novices (non-masters) and experts (masters) can be determined in as few as five questions.</p>
</div>
All tags before and after these div's are nested correctly, and the page validates (except for the php information attached to some of the links). This issue occurs on every page where an unordered list runs past the bottom of the navigation. It doesn't occur in Opera or Firefox, only IE.
Last edited by collyer_1; 09-08-2006 at 03:52 PM..
|
