Closed
Bug 1215138
Opened 10 years ago
Closed 9 years ago
CSS doesn't work right - images on top of each other
Categories
(Core :: Layout, defect)
Tracking
()
RESOLVED
INCOMPLETE
People
(Reporter: rosina, Unassigned)
Details
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:41.0) Gecko/20100101 Firefox/41.0
Build ID: 20150929144111
Steps to reproduce:
Using the following HTML:
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<link href="/test.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div class="buttonbox">
<button>Save</button>
<div class="refresh icon"></div>
</div>
<section class="palheaderbox">
<div class="titlebox col widget">
<h3>Lab</h3>
<a class="buttonbox lab icon" target="_blank"
href="/lab/url"
title="View Lab"></a>
<div>
<ul>
<li><strong>LDMS Number:</strong> Number</li>
<li><strong>Name:</strong> Name</li>
</ul>
</div>
</div>
<div class="titlebox col widget">
<h3>Site</h3>
<a class="buttonbox site icon" target="_blank"
href="/site/url"
title="View Site"></a>
<div>
<ul>
<li><strong>Number:</strong> Number</li>
<li><strong>Name:</strong> Name</li>
</ul>
</div>
</div>
<div class="titlebox col widget">
<h3>Study</h3>
<a class="buttonbox study icon" target="_blank"
href="/study/url"
title="View Study"></a>
<div>
<ul>
<li><strong>Number:</strong> Number</li>
<li><strong>Name:</strong> Name</li>
</ul>
</div>
</div>
</section>
</body>
</html>
And the following test.css:
.icon.refresh:before {content: url('/img/silk/arrow_refresh.png');}
.icon.study:before {content: url('/img/silk/pill.png');}
.icon.site:before {content: url('/img/silk/building.png');}
.icon.lab:before {content: url('/img/lab.png');}
/* titlebox */
.titlebox {
border: black 1px solid;
margin: 5px;
}
.titlebox > h3 {
position: relative;
top: -0.5em;
margin-left: 1em;
display: inline;
background-color: white;
border-bottom: none;
}
/* Pal header */
.palheaderbox {
width: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: start;
-moz-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.palheaderbox .col {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.palheaderbox .titlebox {
margin:0px;
}
.palheaderbox .titlebox:nth-child(2) {
margin-left: 5px;
margin-right: 5px;
}
.buttonbox {
float:right;
}
Actual results:
The save button is underneath the study icon.
Expected results:
The Save button and refresh icon should be on the line above the boxes. It works correctly in Chrome, Safari and other browsers just not in Firefox.
|
||
Updated•10 years ago
|
Component: Untriaged → Layout
Product: Firefox → Core
|
||
Comment 1•10 years ago
|
||
Could you post a link to a live testcase that demonstrates the issue when you visit it?
(Your HTML/CSS in comment 0 includes references to various images which you didn't include, e.g. "{content: url('/img/silk/arrow_refresh.png');}"
Thanks!
Flags: needinfo?(rosina)
|
|
||
Comment 2•10 years ago
|
||
(Generally we discourage people from posting HTML/CSS for testcases directly into comments -- because then people (like me) trying to reproduce the bug have to try to reconstruct the testcase locally, in pieces, and if they don't see the issue, it's non-obvious whether it's because they made a mistake reconstructing the testcase, or whether the bug is actually fixed, or whether it's a platform-specific issue, or something else.
There's less of this ambiguity when there's a live testcase that the reporter can link to & they've verified it triggers the bug for them.)
|
|
||
Comment 3•9 years ago
|
||
I'm closing this as INCOMPLETE, since there's no testcase or URL that demonstrates the bug here.
If you can provide a testcase or URL that demonstrates the issue (as requested in comment 1), please feel free to reopen.
Status: UNCONFIRMED → RESOLVED
Closed: 9 years ago
Flags: needinfo?(rosina)
Resolution: --- → INCOMPLETE
You need to log in
before you can comment on or make changes to this bug.
Description
•