Eric Eric - 1 month ago 10
CSS Question

Why can't I see this div

I have a div that has the following markup:

<div role="gridcell" title="707676" style="width: 84px;" class="grid-cell">707676</div>


If I select it in the inspector in Edge or Firefox I can see where it is, but I can't see it's contents. Can you tell me why? Here's the CSS:

border-bottom-color: rgb(34, 34, 34);
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
border-image-slice: 100% 100% 100% 100%;
border-image-source: none;
border-image-width: 1 1 1 1;
border-left-color: rgb(34, 34, 34);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(34, 34, 34);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(34, 34, 34);
border-top-style: none;
border-top-width: 0px;
box-sizing: border-box;
color: rgb(34, 34, 34);
cursor: default;
display: block;
floatleftfont-family: "-apple-system",BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Ubuntu,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
font-size: 13px;
height: 30px;
line-height: 17px;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 7px;
padding-left: 4px;
padding-right: 4px;
padding-top: 6px;
position: relative;
text-alignlefttext-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
width: 84px;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
-moz-user-focus: ignore;


I took the real page and simplified it to the following. It's kind of different than the original markup, especially in how the css is applied, but it seems to reproduce the problem. Can anyone tell me why I don't see 707676 on my page? I'm viewing the below example if Firefox. The real page displays the same behavior in Edge and Firefox.

<html>

<head>
<title>Test of element that's not visible</title>
<style>
div {
border-bottom-color: rgb(34, 34, 34);
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
border-image-slice: 100% 100% 100% 100%;
border-image-source: none;
border-image-width: 1 1 1 1;
border-left-color: rgb(34, 34, 34);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(34, 34, 34);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(34, 34, 34);
border-top-style: none;
border-top-width: 0px;
box-sizing: border-box;
color: rgb(34, 34, 34);
cursor: default;
display: block;
float: left;
font-family: "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Ubuntu, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 13px;
height: 30px;
line-height: 17px;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 7px;
padding-left: 4px;
padding-right: 4px;
padding-top: 6px;
position: relative;
horizonal-align: left;
text-align:left;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
width: 84px;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
-moz-user-focus: ignore;
}
</style>
</head>

<body>
<div aria-activedescendant="row_60_8" role="grid" tabindex="0" class="grid-canvas ui-draggable">
<div style="top: 256px; left: 20px; height: 32px; width: 1867px; -moz-user-focus: ignore;" role="row" id="row_60_8">
<div role="gridcell" title="707676" style="width: 84px;" class="grid-cell">707676</div>
</div>
</div>
</body>

</html>

Answer

Added after the code was simplified

I found the issue, you have given position: relative to parent div with height:30px and overflow:hidden. The 2nd div in your HTML has a top: 256px which displaces it by 256px relative to its actual position. As the parent div has a fixed height and no overflow, the div is hidden and not visible. Try changing the value of top to something less than 30px and you can see it.

Since I mentioned the error in a comment to the question, posting it as an answer

floatleftfont-family: "-apple-system",BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Ubuntu,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";

should be

float: left; font-family: "-apple-system",BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Ubuntu,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";

Also

text-alignlefttext-overflow: ellipsis;

Should be

text-align:left; text-overflow: ellipsis;

Comments