Solved

Firefox incorrectly rendering Elements outside of Parent

Posted on 2010-11-19
1
308 Views
Last Modified: 2012-05-10
I run into this problem quite often with Firefox only. My code is below, but what is actually happening in the browser is different (see screenshots from Firebug and Webkit inspector). As you can see, the <h2> is displaying inside the <dd> just fine, but the <h3> is jumping outside of the <dt>. Why?

<div class="meta">
  <dl>
    <dt class="label"><h3>Label</h3></dt>
      <dd><h2><a href="">Lorem</a></h2>&#44;</dd>
      <dd><h2><a href="">Ipsum</a></h2>&#44;</dd>
      <dd><h2><a href="">Dolor</a></h2>&#44;</dd>
      <dd><h2><a href="">Sit</a></h2>&#44;</dd>
      <dd><h2><a href="">Amet</a></h2>&#44;</dd>
      <dd><h2><a href="">Laborem</a></h2>&#44;</dd>
    <dt class="label"><h3>Label</h3></dt>
      <dd><h2><a href="">Lorem</a>&#44;</h2></dd>
      <dd><h2><a href="">Ipsum</a>&#44;</h2></dd>
      <dd><h2><a href="">Dolor</a>&#44;</h2></dd>
    <dt class="label"><h3>Label</h3></dt>
      <dd>Lorem</dd>
    <dt class="label"><h3>Label</h3></dt>
      <dd>Ipsum</dd>
    <dt class="label"><h3>Label</h3></dt>
      <dd>Dolor</dd>
  </dl>
</div>

Open in new window



firebug

webkit
0
Comment
Question by:uzzidesign
1 Comment
 
LVL 6

Accepted Solution

by:
uzzidesign earned 0 total points
ID: 34177026
nm. I guess <dt> doesn't follow the same rule as <li>. guess I should have validated it first.

0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

816 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now