A white bar has just surfaced underneath my dynamic gradient backdrop

There's a mysterious white bar appearing at the bottom of my screen in all browsers (both desktop and mobile) after adding a second row of fancybox galleries. This issue has only occurred since I set my background to height: 100%. Any insights on what might be causing this? I would greatly appreciate some assistance with resolving it! 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
  <head>
  <style type="text/css">
    body{
     background-color: #FFF;
   padding: 0px;
   margin: 0px;

 }

 #contain{
     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: vertical;
    -moz-box-orient: vertical;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
   position: relative;
     -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
 }

 #wrapper{
     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: vertical;
    -moz-box-orient: vertical;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
   position: relative;

     }

  #wrapper2{
     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: vertical;
    -moz-box-orient: vertical;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
   position: relative;

     }

 .titles {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 14px;
    color:#33;
    text-align:left;
    padding-left: 0px;
    padding-top: 10px;
    padding-bottom: 100px;
     display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column; /* works with row or column */
   flex-direction: column;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
    position: relative;
    z-index: 100;


}


#gradient
{
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    opacity: 0.1;
    position: absolute;
    z-index: -99999; 

}

.hidden {
    display: none;
}




  </style>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script type="text/javascript" src="gradientscript.js"></script>
    <!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">

    $(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        padding : 0,
        arrows      : 'true',
        openSpeed   : '400',
        closeSpeed  : '400',
        nextClick : 'true',
        overlay : { speedOut   : 800,},
        margin      : [20, 60, 20, 60] // Increase left/right margin
        });

</script>
</head>
<body>
<div id="gradient"> 
</div>

<div id="contain">
<div class="titles"><img src="archive-icon.png" width="185" height="185" alt="studio powell michael powell studiopowell art artist books installation video" /><br /><br />M I C H A E L &nbsp; P O W E L L<br /><br /></div></div>

<div id="wrapper">
<a class="fancybox" rel="gallery1" href="archive-icon.png"><img src="ruby ball.jpg" alt="" width="200" /><a class="fancybox" rel="gallery2" href="archive-icon.png"><img src="ruby ball.jpg" alt="" width="200" /><a class="fancybox" rel="gallery3" href="archive-icon.png"><img src="ruby ball.jpg" alt="" width="200" /><a class="fancybox" rel="gallery4" href="archive-icon.png"><img src="ruby ball.jpg" alt="" width="200" /></a>
<div class="hidden"><a class="fancybox" rel="gallery1" href="ruby ball.jpg"><a class="fancybox" rel="gallery2" href="ruby ball.jpg"><a class="fancybox" rel="gallery3" href="ruby ball.jpg"><a class="fancybox" rel="gallery4" href="ruby ball.jpg"></a></div></div>
<br /><br /><br /><br /><br /><br />
<div id="wrapper2">
<a class="fancybox" rel="gallery5" href="archive-icon.png"><img src="ruby ball.jpg" alt="" width="200" /><a class="fancybox" rel="gallery6" href="archive-icon.png"><img src="ruby ball.jpg" alt="" width="200" /><a class="fancybox" rel="gallery7" href="archive-icon.png"><img src="ruby ball.jpg" alt="" width="200" /><a class="fancybox" rel="gallery8" href="archive-icon.png"><img src="ruby ball.jpg" alt="" width="200" /></a>
<div class="hidden"><a class="fancybox" rel="gallery5" href="ruby ball.jpg"><a class="fancybox" rel="gallery6" href="ruby ball.jpg"><a class="fancybox" rel="gallery7" href="ruby ball.jpg"><a class="fancybox" rel="gallery8" href="ruby ball.jpg"></a></div></div>


</body>

</html>
cssbackground-image

Answer №1

The problem arises when you use the "gradient" div as a background, but it is not properly nested, as mentioned by @dowomenfart (interesting name).

As you observed, making certain changes leads to an undesired effect due to the opacity:0.1 rule. However, we can work around this issue!

Start by ensuring that your "gradient" div is the outermost element after <body>.

Get rid of the height:100% rule. Next, remove the opacity rule and apply it to your -webkit-gradient rule instead: (since you are using a library for this effect, make sure to adjust your gradientscript.js file to support rgba in addition to just rgb)

background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgba(220, 58, 120,0.1)), to(rgba(94, 50, 213,0.1)));

Thus, your HTML structure should look like this-

 <html>
    <head></head>
    <body>
       <div id="gradient">
           <div id="container"></div>
           <div id="wrapper"></div>
           <div id="wrapper2"></div>
       </div>
    </body>

And update your script file accordingly:

var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
var color1 = "rgba("+r1+","+g1+","+b1+",0.1)";

var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
var color2 = "rgba("+r2+","+g2+","+b2+",0.1)";

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent body scrolling when modal view is activated

As I work on developing this website, I have encountered an issue. Upon clicking a link located at the far right end of the second row in the header, a modal window appears with embedded YouTube videos. The problem arises when scrolling through the modal: ...

javascripthtmlcssmodal-dialog

`select tag's down-arrow misalignment`

Within my form, there is a field for entering the City Name. However, I am currently experiencing an issue with aligning the down-arrow. As of now, I have aligned it to the right using the background property. This is how it looks: background: url(http:// ...

cssselectalignmentdropdown

How can I use JQuery to sum up the numbers within div elements?

Is there a way to automatically number the generated blocks? For example, the first block would display "1", the second "2" and so on. Below is my current code. Simply input the desired number of blocks in the input field. <!DOCTYPE html> <html ...

javascriptjqueryhtmlcss

Web Development: Custom Search Form

I am looking to create a website with a form similar to this one, but I'm struggling to figure out how to incorporate all three components into a single form using only HTML and CSS - no javascript. Do you have any suggestions or advice on how to achi ...

htmlcss

manipulating radio button syntax using jquery

Can someone help me with the syntax for using an equation in JavaScript jQuery to achieve this: document.getElementById ("tone_positive_" + x). checked = true I've attempted a few examples but none have seemed to work, or perhaps I am not grasping h ...

javascriptjqueryhtmlcss

What is the process for inserting a hyperlink onto an image within a query slider?

I am experiencing difficulties when attempting to add hyperlinks to the images in my slider. I have come to understand that images cannot be clickable in jQuery sliders, so I have tried the following in the HTML: <div class="wrapper"> <div class= ...

jqueryhtmlcss

Adding spacing breakpoints in Material-UI 5 sx properties

Currently in the process of updating my components to utilize the latest MUI version. I have been converting old classes into the sx props and I find this new styling method to be more readable in my opinion. However, one thing that concerns me is handl ...

cssreactjsmaterial-ui

What is the best way to expand the subcategories within a list?

I have successfully implemented a script to open my hamburger menu. However, I am facing an issue with subitems as some list items contain them. How can I modify the script to ensure that the subitems expand when clicked instead of just hovering? functi ...

javascripthtmlcssmenu

Stylish navigation bars with CSS and Jquery for seamless browsing experience

I am attempting to create a simplistic horizontal list menu similar to the one displayed in this example. I have copied the list and CSS to jsFiddle (New Example Update), but it does not function as desired. I have searched for similar examples to guide me ...

jqueryhtmlcsshorizontallist

Expanding a div's size with CSS to fill the remaining space

Here's the setup I'm working with: <div class="parent"> <div class="moverBoy"></div> <div class="smartBoy"></div> </div> The parent element is fixed at 100x20 indefinitely. moverBoy and smartBoy are al ...

javascripthtmlcss

Adjusting the margin in a flex grid using CSS

I am trying to create a grid layout using flex, where I want to have a 3x3 grid of blocks with a margin between each block. However, when I add a margin, it changes the layout to 2x5 instead. Can anyone provide guidance on how to achieve a 3x3 grid with ...

cssflexbox

CSS based on conditions for 2 specific divs

Hello, I am working on an HTML page where I need to apply CSS only if certain conditions are met. The div with the id "flipbook-page3-front" will always be present on this HTML page. Sometimes, another div with the id "pagesFlipbook" may also appear on t ...

htmlcss

Eliminate the hover and click effects on buttons

I'm trying to change the hover and click states of a jQuery Mobile button, but my current CSS override doesn't seem to be working as expected. Here's the button code I have: <a class="aButton" href='#' data-role="button" data- ...

jquerycssjquery-mobile

ShadowBox not displaying Vimeo videos

I can't figure out why my Vimeo videos are not appearing in a Shadowbox. I have followed the steps I know to be the simplest, which involve copying the example directly from the github page and then updating the shadowbox paths to match the locations ...

javascripthtmlcssshadowbox

Position the float input to the right on the same line as an element

This Angular code contains a challenge where I aim to have text at the start of a column and an input box on the right side of the page, both aligned on the same line. The issue lies in the code which floats the input to the right but disrupts the alignme ...

htmlcssangular

Eliminating the unwanted line breaks that are automatically inserted when integrating JavaScript with HTML code

Hey everyone, I'm new to web development and could really use some assistance. I am currently working on a website that shows the weather forecast for the next four days, using SimpleWeather.js. In my JavaScript, I want to display the High & Low temp ...

javascripthtmlcsslineline-breaks

Styling the `mat-hint` in Angular Material for large blocks of text

Currently, I am undertaking a project in Angular 9 and utilizing Material design. If you want to view a demo of my work, you can find it here: https://stackblitz.com/edit/mat-hint-styling-issue?file=src/app/app.component.html In my project, I am using in ...

cssangularsassangular-materialangular9

What is the best method for applying classes to a collection of DOM elements with jQuery?

I attempted two different methods of iterating through the arrays, but encountered the same error: addClass is not function First attempt using a for loop: function game(){ var cards = $('.card'); function initialize(){ for ...

jqueryhtmlcssarraysdom

Making sure to correctly implement email input fields in HTML5: Surprising behaviors observed with the email input type in the Chrome browser

Within the upcoming code snippet, a basic email validation is implemented. An input field's background color will display as white for valid emails and yellow for incorrect values. This functionality operates seamlessly in Firefox; however, in Chrome, ...

javascripthtmlcss

Issue with jQuery not being able to retrieve the data from my CSS property

this is my custom style code: table.table tr td{ padding:30px; border-left: double 1px white; border-bottom: double 1px white; cursor:cell; } and below is the jQuery script I am using: $(document).ready(function () { ...

javascriptjqueryhtmlcss