Solved

Firefox incorrectly rendering Elements outside of Parent

Posted on 2010-11-19
1
305 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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

760 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

21 Experts available now in Live!

Get 1:1 Help Now