user1826208 user1826208 - 4 months ago 5
CSS Question

Div's width is ignored

I've tried re-using some method showing custom alert on a web page. For some reason the code works properly on old pages but not on my new one.

Fiddle



.noPopup {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.noPopup .np1 {
text-align: center;
height: 100%;
}
.noPopup .np1:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.noPopup .np2 {
display: inline-block;
vertical-align: middle;
}
.noPopup .np4 {
position: relative;
}
.noPopup .noPclose {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.noPopup .nt1 {
position: absolute;
left: 40px;
top: 25px;
font-family: Arial;
font-size: 18px;
font-weight: bold;
color: white;
}
.noPopup .nt2 {
position: absolute;
left: 110px;
top: 23px;
font-family: Calibri;
font-size: 18px;
color: white;
}
.noPopup .nt22 {
position: absolute;
left: 25px;
top: 23px;
font-family: Calibri;
font-size: 18px;
color: white;
}
.noPopup .ndel {
display: none;
position: absolute;
left: 95px;
top: 20px;
background-color: #9f7709;
width: 2px;
height: 25px;
}
.noPopup .ndel2 {
position: absolute;
left: 95px;
top: 20px;
background-color: #9f7709;
width: 2px;
height: 25px;
}
.noPopup .btnl {
background-image: url('../Images/noPopup/btnl.png');
position: absolute;
top: 21px;
right: 120px;
width: 8px;
height: 21px;
cursor: pointer;
}
.noPopup .btnr {
background-image: url('../Images/noPopup/btnr.png');
position: absolute;
top: 21px;
right: 80px;
width: 8px;
height: 21px;
cursor: pointer;
}
.noPopup .btnClose {
background-image: url('../Images/noPopup/btnClose.png');
position: absolute;
top: 15px;
right: 20px;
width: 36px;
height: 36px;
cursor: pointer;
}
.noPopup .n123 {
position: absolute;
top: -2px;
width: 100%;
}
.noPopup .n789 {
position: absolute;
bottom: -2px;
width: 100%;
}
.noPopup .nc2 {
background-color: #1c1c1c;
border: solid 1px #9f7709;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.noPopup .nc22 {
background-color: #1c1c1c;
border: solid 1px #9f7709;
/*display: table-cell;
vertical-align: middle;*/
}
.noPopup .nc23 {
padding: 2px;
display: table-cell;
vertical-align: middle;
}
.noPopup .nc2if {
background-color: #1c1c1c;
border: solid 1px #9f7709;
max-height: 100%;
max-width: 100%;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
.noPopup .nc2im {
max-height: 100%;
max-width: 100%;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
.noPopup .nc {
color: white;
margin: 2px 3px 2px 3px;
background-color: #222222;
padding: 60px 20px 20px 20px;
background-image: url('../Images/noPopup/gex.png');
background-repeat: no-repeat;
background-position: left -60px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.noPopup .n1 {
width: 8px;
height: 8px;
background-image: url('../Images/noPopup/1.png');
float: left;
}
.noPopup .n2 {
margin-left: 8px;
margin-right: 8px;
height: 8px;
background-image: url('../Images/noPopup/2.png');
background-repeat: repeat-x;
background-position: center 2px;
}
.noPopup .n3 {
width: 8px;
height: 8px;
background-image: url('../Images/noPopup/3.png');
float: right;
}
.noPopup .n7 {
width: 8px;
height: 8px;
background-image: url('../Images/noPopup/7.png');
float: left;
}
.noPopup .n8 {
height: 8px;
margin-left: 8px;
margin-right: 8px;
background-position: bottom;
background-image: url('../Images/noPopup/8.png');
background-repeat: repeat-x;
}
.noPopup .n9 {
width: 8px;
height: 8px;
background-image: url('../Images/noPopup/9.png');
float: right;
}

<div>
<div class="noPopup" style="z-index:101;width:800px;height:0%;top:200px;left:74px">
<div class="np1">
<div class="np2">
<div class="noPclose"></div>
<div class="np4">
<div class="btnClose" onclick="destroyLastMessage();"></div>
<div style="left:24px" class="nt1">Title</div>
<div class="nt22"></div>
<div class="ndel"></div>
<div class="n123">
<div class="n1"></div>
<div class="n3"></div>
<div class="n2"></div>
</div>
<div class="n789">
<div class="n7"></div>
<div class="n9"></div>
<div class="n8"></div>
</div>
<div class="nc">
<div style="text-align:left">
Text
<br>
<table width="100%">
<tbody>
<tr>
<td width="100%" align="right"><span onclick="remindPassword(document.getElementById('txtForgotPasswordName').value)" class="button">Button</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>





The issue is:

Although
div
's
width
is set to 800px, it's being ignored.

Any ideas why?

Answer

So all this answers just say do this and don't explain anything.

the issue is you are using inline-block in child .np2 which won't have any width by default, so either:

  • you remove the display:inline-block (which will get it back to default display:block) and then this have width

or

  • you can just set some width on that .np2

Note: Don't use inline styles

.noPopup {
  position: fixed;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 101;
  width: 800px;
 /* top: 200px;*/
  left: 74px
}
.noPopup .np1 {
  text-align: center;
  height: 100%;
}
.noPopup .np1:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}
.noPopup .np2 {
  display: inline-block;
  vertical-align: middle;
  width: 100%
}
.noPopup .np4 {
  position: relative;
}
.noPopup .noPclose {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.noPopup .nt1 {
  position: absolute;
  left: 40px;
  top: 25px;
  font-family: Arial;
  font-size: 18px;
  font-weight: bold;
  color: white;
}
.noPopup .nt2 {
  position: absolute;
  left: 110px;
  top: 23px;
  font-family: Calibri;
  font-size: 18px;
  color: white;
}
.noPopup .nt22 {
  position: absolute;
  left: 25px;
  top: 23px;
  font-family: Calibri;
  font-size: 18px;
  color: white;
}
.noPopup .ndel {
  display: none;
  position: absolute;
  left: 95px;
  top: 20px;
  background-color: #9f7709;
  width: 2px;
  height: 25px;
}
.noPopup .ndel2 {
  position: absolute;
  left: 95px;
  top: 20px;
  background-color: #9f7709;
  width: 2px;
  height: 25px;
}
.noPopup .btnl {
  background-image: url('../Images/noPopup/btnl.png');
  position: absolute;
  top: 21px;
  right: 120px;
  width: 8px;
  height: 21px;
  cursor: pointer;
}
.noPopup .btnr {
  background-image: url('../Images/noPopup/btnr.png');
  position: absolute;
  top: 21px;
  right: 80px;
  width: 8px;
  height: 21px;
  cursor: pointer;
}
.noPopup .btnClose {
  background-image: url('../Images/noPopup/btnClose.png');
  position: absolute;
  top: 15px;
  right: 20px;
  width: 36px;
  height: 36px;
  cursor: pointer;
}
.noPopup .n123 {
  position: absolute;
  top: -2px;
  width: 100%;
}
.noPopup .n789 {
  position: absolute;
  bottom: -2px;
  width: 100%;
}
.noPopup .nc2 {
  background-color: #1c1c1c;
  border: solid 1px #9f7709;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.noPopup .nc22 {
  background-color: #1c1c1c;
  border: solid 1px #9f7709;
  /*display: table-cell;
              vertical-align: middle;*/
}
.noPopup .nc23 {
  padding: 2px;
  display: table-cell;
  vertical-align: middle;
}
.noPopup .nc2if {
  background-color: #1c1c1c;
  border: solid 1px #9f7709;
  max-height: 100%;
  max-width: 100%;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}
.noPopup .nc2im {
  max-height: 100%;
  max-width: 100%;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}
.noPopup .nc {
  color: white;
  margin: 2px 3px 2px 3px;
  background-color: #222222;
  padding: 60px 20px 20px 20px;
  background-image: url('../Images/noPopup/gex.png');
  background-repeat: no-repeat;
  background-position: left -60px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.noPopup .n1 {
  width: 8px;
  height: 8px;
  background-image: url('../Images/noPopup/1.png');
  float: left;
}
.noPopup .n2 {
  margin-left: 8px;
  margin-right: 8px;
  height: 8px;
  background-image: url('../Images/noPopup/2.png');
  background-repeat: repeat-x;
  background-position: center 2px;
}
.noPopup .n3 {
  width: 8px;
  height: 8px;
  background-image: url('../Images/noPopup/3.png');
  float: right;
}
.noPopup .n7 {
  width: 8px;
  height: 8px;
  background-image: url('../Images/noPopup/7.png');
  float: left;
}
.noPopup .n8 {
  height: 8px;
  margin-left: 8px;
  margin-right: 8px;
  background-position: bottom;
  background-image: url('../Images/noPopup/8.png');
  background-repeat: repeat-x;
}
.noPopup .n9 {
  width: 8px;
  height: 8px;
  background-image: url('../Images/noPopup/9.png');
  float: right;
}
<div>
  <div class="noPopup">
    <div class="np1">
      <div class="np2">
        <div class="noPclose"></div>
        <div class="np4">
          <div class="btnClose" onclick="destroyLastMessage();"></div>
          <div style="left:24px" class="nt1">Title</div>
          <div class="nt22"></div>
          <div class="ndel"></div>
          <div class="n123">
            <div class="n1"></div>
            <div class="n3"></div>
            <div class="n2"></div>
          </div>
          <div class="n789">
            <div class="n7"></div>
            <div class="n9"></div>
            <div class="n8"></div>
          </div>
          <div class="nc">
            <div style="text-align:left">
              Text
              <br>
              <table width="100%">
                <tbody>
                  <tr>
                    <td width="100%" align="right"><span onclick="remindPassword(document.getElementById('txtForgotPasswordName').value)" class="button">Button</span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Comments