5

The web page is site link. If you reduce the window size, the transparent grey background disappears. I have tried a number of things to fix this, without success. Any ideas? CSS I've used is:

  #content {
    margin-bottom: 20px;
    padding-left: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.6);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
    overflow:auto;
}
Rohit Azad Malik
  • 31,410
  • 17
  • 69
  • 97
Ernest Berkhout
  • 51
  • 2

4 Answers4

1

Hi now define to float:left; in your #content id

as like this 

   #content{
    float:left;
    }

--------------

or define 

#content{
display:block;
}
Rohit Azad Malik
  • 31,410
  • 17
  • 69
  • 97
1

There is a CSS rule that is only applied when the width is less than 980px which is adding a float:left. This is causing the background to disappear.

@media screen and (max-width: 980px) .grid, .grid-right {
    float:none;
}

When the window is larger than 980px, #content has a computed style of

float:left;
display:block;
width: <not auto but some real px value>;

comprised from the following rules

.grid {
    float: left;
    margin-bottom: 2.127659574468%;
    padding-top: 0;
}
.col-860 {
    display: inline;
    margin-right: 2.127659574468%;
}

Having float:left overrides display:inline and therefore #content becomes a block level element (see css display property when a float is applied) and the background color will be applied.

However, when the window is smaller than 980px, #content has a computed style of

float:none;
display:inline;
width:auto;

therefore #content is display:inline and the background will not appear - see Why is my background color not showing if I have display: inline?

Removing the @media screen and (max-width: 980px) .grid, .grid-right rule will fix the problem but I assume this exists as part of the responsive site that scales and fits content to multiple resolutions and window sizes. I would recommend checking what behaviour is required at lower resolutions. Either way, giving #content a display:block or float:left in the case where the window is less than 980px will fix the problem.

Community
  • 1
  • 1
andyb
  • 43,435
  • 12
  • 121
  • 150
0

It works with

.grid{
  position: absolute;
  left: 0;
  /* ... */
}

too. (removed float:left)

Andrea Ligios
  • 49,480
  • 26
  • 114
  • 243
0

You can give a display:table to section, whole section. For example, I have a div with 3 articles. I give a clearfix class to my div. Then I put display:table for div. The code is here:

<div class="clearfix">
<article></article>
<article></article>
<article></article>
</div>
.clearfix::after, .clearfix::before{ 
content: "";
clear: both;
display: table;
}
Marzye Fatehi
  • 1
  • 1