Closed
Bug 1041819
Opened 11 years ago
Closed 11 years ago
block-level replaced element doesn't clear float
Categories
(Core :: Layout: Floats, defect)
Tracking
()
RESOLVED
DUPLICATE
of bug 952981
People
(Reporter: skinnystick22, Unassigned)
Details
Attachments
(2 files)
User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:30.0) Gecko/20100101 Firefox/30.0 (Beta/Release)
Build ID: 20140605174243
Steps to reproduce:
On my about page I am working on to learning HTML and CSS. The about document is below.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<title>Tyler Miller | Designer</title>
<link rel="stylesheet" href="CSS/normalize.css" />
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800,800italic' rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="CSS/main.css" />
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Tyler Miller</h1>
<h2>Web Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a class="selected" href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<img class="profile-photo" src="img/nick.jpg" alt="Photograph of Nick Pettit" />
<h3>About</h3>
<p>Hi, I'm Tyler Miller! This is my design portfolio where I share all of my work. When I am not working on designs. I am playing videogames.</p>
<p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/@Skinnystick22">@Skinnystick22</a>.</p>
</section>
<footer>
<a target="_blank" href="http://twitter.com/@Skinnystick22"><img class="social-icon" src="img/twitter-wrap.png" alt="Twitter Logo" /></a>
<a target="_blank" href="http://facebook.com/tyler.e.miller.73"><img class="social-icon" src="img/facebook-wrap.png" alt="Facebook Logo" /></a>
<p>© 2014 Tyler Miller.</p>
</footer>
</div>
</body>
</html>
In the section element there is an <img> element that has the class profile-photo. I used CSS to make the <img> display as a block as well as use margin: 0 auto 30px to set the <img> element to the middle of the page.
Actual results:
The <img> element disappears completely. I tested in Internet Explorer and it works fine. Tested in Safari and it works fine there as well. Mozilla Firefox, my favorite browser I may add, is not displaying the element with its set CSS rules properly.
Expected results:
The <img> element should have been displayed and centered in the middle of the page.
I have also included the main.css file that I have the rules in.
|
Reporter | |
Comment 1•11 years ago
|
||
Please let me know when this is resolved. No rush, just thought I would report this strange bug.
Thank you,
Tyler Miller
Un-hiding this issue to get a broader set of eyes, this is likely not a security issue.
I can repro this on OS X so changing platform to all
Group: core-security
status-firefox31:
--- → affected
status-firefox32:
--- → affected
status-firefox34:
--- → affected
OS: Windows 8.1 → All
Version: 30 Branch → 31 Branch
|
||
Updated•11 years ago
|
Status: UNCONFIRMED → NEW
Ever confirmed: true
|
|
||
Updated•11 years ago
|
Component: Untriaged → Layout
Product: Firefox → Core
|
|
||
Comment 3•11 years ago
|
||
|
|
||
Comment 4•11 years ago
|
||
So the issue is that the block-level replaced element is not clearing the float. David, I think it should (and it does if I make various changes to the testcase like putting a div with borders around it...)
Component: Layout → Layout: Floats
Flags: needinfo?(dbaron)
Summary: Using the CSS property display and setting an img element to display: block. Causes it to disappear. → block-level replaced element doesn't clear float
|
|
||
Comment 5•11 years ago
|
||
Ah, and we have a bug about this already.
Status: NEW → RESOLVED
Closed: 11 years ago
Flags: needinfo?(dbaron)
Resolution: --- → DUPLICATE
|
|
||
Comment 6•11 years ago
|
||
For purposes of working around this on the original page, setting "clear: left" or "clear:both" on the <img> should work....
You need to log in
before you can comment on or make changes to this bug.
Description
•