What could be the reason for the empty space between the upper and middle cuts?

I am working on these two web pages:

http://slacklog.heroku.com/
http://slacklog.heroku.com/signup/date

As you can see, there is a gap between the top and middle images as well as the bottom and middle images on both pages.

Below is my HTML code:

<div class="content" align="center">
<div class="slacklog_log"></div>
<div class="main_column_section">
    <div class="wide_box_top"></div>
    <div class="wide_box_body" id="main_content_body">  
        <div id="white">
            <div class="wide_box_top_white"></div>
            <div class="wide_box_body_white">   
            <!-- unique content per page -->
            <!-- additional stuff here -->
            </div>
            <div class="wide_box_bottom_white"></div>
        </div>
    </div>          
    <div class="wide_box_bottom"></div>
</div>
</div><!--content-->

If there is any other information I can provide to assist you in helping me with this issue. By the way, I have checked for padding or margin using Firebug but couldn't find it at all. Thank you in advance.

htmlcss

Answer №1

I was able to resolve the issue by implementing the following styling changes:

#white {
  width: 650px;
  margin: 0 auto;
}

.wide_box_top_white {
  background: url("/images/white_top.png") no-repeat scroll 0 0 transparent;
  height: 9px;
  float: left;
  width: 650px;
  display: block;
}

.wide_box_body_white {
  background: url("/images/white_middle.png") repeat-y scroll 0 0 transparent;
  float: left;
  width: 650px;
  display: block;
}

.wide_box_bottom_white {
  background: url("/images/white_bottom.png") no-repeat scroll 0 0 transparent;
  height: 10px;
  float: left;
  display: block;
  width: 650px;
}

Note that not all of these additional styles are necessary, but they do not cause any harm. I primarily included float: left, width: 650px, and display: block in the classes within the #white div....

There are many other ways to enhance the overall structure. For example, using images for a white background like you are doing in your .wide_box_body_white class may not be advisable. It might be better to eliminate the .wide_box_bottom_white and .wide_box_top_white classes and simply apply a border-radius to the .wide_box_body_white class instead....

Answer №2

stephenmurdoch suggested removing images from wide_box_top_white, wide_box_body_white, and wide_box_bottom_white, and instead applying this style to your #white div

#white {
    background-color: white;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    -o-border-radius: 12px;
    -ms-border-radius: 12px;
    -khtml-border-radius: 12px;
    -moz-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.3);
    -o-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.3);
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.3);
}

Answer №3

The reason why it's not working is because you forgot to reset the margin attribute. You've set a margin-top for h1 Date /h1 at the top and a margin-bottom for p End date /p at the bottom. If you change them to 0, it should fix the issue.

Even though you mentioned checking in firebug, I think you might have missed inspecting .content h1 and p :)

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

What techniques does Google use to craft mobile-friendly fixed backgrounds and parallax content within iframes?

Currently, I am working on a test that involves utilizing an intersectionobserver in conjunction with iframe postMessage to adjust the background image in a translate3d manner within the iframe. However, this method is causing significant jitter and potent ...

javascriptcssiframeads

Dynamic CSS Class Implementation with KnockoutJS

Greetings, I am seeking assistance as I am new to KnockoutJS. I am working with a class named green-bar that I need to activate when two particular states are true. Unfortunately, the solution I came up with below is not functioning correctly, and I'm ...

javascriptcsshtmlmvvmknockout.js

"Want to know how to control a JavaScript onClick event to play and pause? Find

Being new to JavaScript, I am curious about how I can Play and Pause a JavaScript on an HTML page. In my first JavaScript file, I have a toggle button that onClick show/hides a div element tag, as shown below: $(function () { $(".toggleSideba ...

javascriptphphtmltwitter-bootstrapcodeigniter

Could you assist me in navigating the process of creating a dynamic 10x10 multiplication table using HTML and JavaScript? I'm eager to learn where to begin with this methodology

As I explore various questions related to the "simple" multiplication tables, I find myself with a more fundamental query. I am seeking clarity on how Javascript operates when intertwined with HTML, as that is where my confusion lies. In my multiplication ...

javascripthtmloperatorshtml-table

What is the best way to make my navbar adjust seamlessly to accommodate the largest element?

Currently, I'm facing an issue where my logo is not fitting properly inside my navbar and it's "falling out." You can see the problem here: https://i.sstatic.net/l4T1B.png Here is the relevant code: HTML: <nav class="container-fluid navbar ...

htmlcsstwitter-bootstrap

Utilizing AJAX for XML data parsing

I need help with formatting XML data into a table. The code I've written isn't working as expected. The XML data is structured in branches, causing it to not display correctly. Can someone assist me in fixing this issue? <!DOCTYPE html> &l ...

javascripthtmlajaxxmlxml-parsing

Does every part have an unidentified index?

Similar Issue: PHP: "Notice: Undefined variable" and "Notice: Undefined index" This dilemma has puzzled me for three days now, and I'm at a loss on how to resolve it as I keep receiving... Notice: Undefined index: surname in C:\xampp\ ...

phphtml

Forced line break at particular point in text

I would love to implement a line break right before the "+" character, either using css styling or through a different method. Is this task achievable? #myDiv{ width: 80% } #myP{ c ...

javascriptjquerycss

Opacity in text shadow effect using CSS

Within my text lies the following css snippet: .text-description-header { font-size: 250%; color: white; text-shadow: 0 1px 0 black; } Observe the dark shadow effect it possesses. Inquiry I am curious if there is a way to alter the shadow t ...

htmlcss

Leveraging python's BeautifulSoup library, one can easily implement HTML selection

Recently, I've started diving into Automate the Boring Stuff and exploring how to create my own programs. Currently, I'm experimenting with beautiful soup's 'select' method in order to extract the value '33' from this cod ...

pythonhtmlcssbeautifulsoup

What is the correct way to utilize ng-if/ng-show/ng-hide to hide or show HTML elements within the app.run function

I am currently working on developing an app that loads views correctly. HTML: <body> <loading outerWidth='1000' outerHeight='1000' display='isReady'></loading> <div class='wrapper' ng-sho ...

javascriptjqueryhtmlangularjs

Stop browsers from automatically filling out fields that are hidden

Our method involves jQuery to conceal irrelevant fields based on previous responses. It's puzzling how the browser (Chrome) has somehow autofilled the user's email address into one of them even though autocomplete is disabled. The field's ID ...

jqueryhtmlgoogle-chromebrowser

Adjust SVG Checkbox to eliminate any unnecessary padding

I am attempting to customize the MUI5 checkbox CSS fields, and here is the current status: https://i.stack.imgur.com/BROpS.png These are my CSS classes: MuiCheckbox: { styleOverrides: { root: { ".MuiSvgIcon-root": { backgro ...

htmlcsssvgmaterial-ui

Sizing Bootstrap Carousel Controls

Is there a way to adjust the size of controls in the bootstrap carousel using CSS? I'm working with Bootstrap 4 and have attempted the following, but it only seems to reposition them. .carousel-contol-prev { height: 26%; top: 33%; wid ...

cssbootstrap-carousel

Is it possible to automatically select a file and upload it to a specific server? If so, how can this

Hey there! I'm looking for a code snippet that allows me to automatically select a file and upload it to a specific link. Any ideas on how to accomplish this task? Here is the HTML code: <html> <head><title>Uploading</title>& ...

phphtmlforms

Space between flex content and border increases on hover and focus effects

My code can be found at this link: https://jsfiddle.net/walshgiarrusso/dmp4c5f3/5/ Code Snippet in HTML <body onload="resize(); resizeEnd();"> <div style="margin: 0% 13.85%; width 72.3%; border-bottom:1px solid gray;"><spanstyle="visibilit ...

javascripthtmlcss

How to change the background color of a slider using jQuery

As a newcomer to web programming, I am currently working on incorporating a slider into my website using jQuery. My goal is to change the background color of the slider to red when the value is less than 5 and green when it exceeds 5. Can this be achieved ...

javascriptjqueryhtmlcss

Alignment issue with React JSX background position; image not centered on the right in Material UI Grid item

I've recently completed a single-page website portfolio, but I'm encountering an issue with setting the background position of the home screen to center right. You can view my site here: Here is the link to my repository: https://github.com/Bolm ...

cssreactjsmaterial-uijsx

Issues persisting with the fixed header functionality in Bootstrap table

I implemented a table using bootstrap-table in my project. Everything seems to be working fine except for the scroll bar within the tbody. For some reason, the scroll bar is not appearing. Can anyone point out what I might be missing? I believe that if th ...

csstwitter-bootstrapbootstrap-table

I envision my home page being divided into two visually stunning full-screen sections, each taking up the entire height of the page

I am currently working with the code shown below. It successfully displays the first part in full height, regardless of resolution, but once I scroll to the second half, there is a large empty gap. How can I eliminate this gap and make the transition smoot ...

htmlcssviewport-units