What is the reason for the unexpected bar appearing between my divs?

I'm stumped as to why this random bar is appearing:

If you want to take a look, here's the JSFiddle. I really need to remove that annoying yellowish line.

And here is the code snippet for reference:

body {
  padding: 0;
  margin: 0;
  background-color: #fff9e8;
}

.topnav {
  background-color: #edeff2;
  overflow: hidden;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  width: 100%;
  padding: 0;
}

... (omitted for brevity) ...

<body>

Note: The alt text appears in the JSFiddle because I forgot to upload the image from my computer. But the issue with the line is still visible.

Thanks for any help!

htmlcss

Answer №2

The reason for the yellowish bar appearing is due to an image inside it.

To overlay your image on the blue bar below, you can specify .topimage with position:absolute

body {
padding: 0;
margin: 0;
background-color: #fff9e8;
}

.topnav {
    background-color: #edeff2;
    overflow: hidden;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  width: 100%;
  padding: 0;
}

.topnav a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  font-family: 'Fresca', sans-serif;

}

.topnav a:hover {
    background-color: #ddd;
    color: black;
}

.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

.maincontent {
width: 1000px;
margin:0 auto;
background-color: #fff;
padding-top: 25px;
}

.infotexta {
text-align: center;
}

img {
background-color: #fff;
margin: 0;
padding: 0;
}

.middlebar {
height: 50px;
border-top: 1px solid black;
border-bottom: 1px solid black;
width: 100%;
background-color: #edeff2;
padding: 0;
margin: 0;
}

.main-image-front {
padding: 0;
margin: 0;
width: 100%;
height: 400px;
}
.topimage {
  position:absolute;
 }
<!DOCTYPE html>

<html>
  <head>
<title>placeholder</title>
<!-- css -->
<link href="mainstyle.css" type="text/css" rel="stylesheet">
  </head>

  <body>
<div class="topnav">
  <a href="#">Home</a>
  <a href="#">temp</a>
  <a href="#">temp</a>
  <a href="#">temp</a>
</div>

<div class="topimage">
  <img src="/users/grecko/desktop/back.png" alt="topimage" class="main-image-front">
</div>

<div class="middlebar">

</div>

<div class="maincontent">
  <div class="maincontent-about infotexta">
  <h1>placeholder</h1>
  <p>your text hereyour text here<br>your text hereyour text here<br>your text hereyour text here<br>your text hereyour text here</p>
</div>

This adjustment will ensure your image displays without the unwanted yellow bar interference.

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

Preventing the selection of 'None selected' upon dropdown change

When using the NameTextBox Dropdown, all names are available for selection. Upon changing a name and clicking on search, the associated details are retrieved. However, by default, 'None Selected' is displayed. Is there a way to prevent 'None ...

javascripthtml

Differences in sub column heights within Bootstrap grid system

I am facing an issue with maintaining consistent heights for all my columns. I typically use Bootstrap to adjust their sizes, but the problem arises when using sub divs. Click here to view a DEMO showcasing the issue The first "table" is borrowed from an ...

htmlcsstwitter-bootstrap

Setting a CSS style for an ASP.NET button: What you need to know!

I am facing an issue with the styling of my asp:Button. I have applied CSS styles using the cssClass property, but they are not being applied correctly. Surprisingly, when I switch to using asp:LinkButton, the styles work perfectly fine. I prefer not to us ...

asp.netcssbuttonaspbutton

Using conditional CSS in React/Next.js

While using Next.js, I have implemented conditional rendering on components successfully. However, I am facing an issue where the CSS styles differ between different components. Code 1: import React from "react"; import Profile from "../../ ...

javascriptcssreactjsnext.js

Assigning the CSS class "active" to the navigation menu in ASP Classic

Seeking assistance with setting a CSS class for the current page in an include file that contains the primary navigation menu. Here is my current progress: public function GetFileName() Dim files, url, segments, current 'obtain c ...

cssasp-classicmenuswitch-statement

Select2 is not displaying correctly as expected

I followed the instructions on to set up a Select2 select. However, I noticed that my Select2 select doesn't look great. Here is how it currently appears: https://i.sstatic.net/SIv7L.png When I don't transform it with jQuery $('#users&apos ...

javascriptjqueryhtmlcssjquery-select2

Discover the root cause of why an element is being prioritized

Is it possible to determine what is causing the first html element (input, textarea) to gain focus? While loading a modal window, I am unable to locate the line of JavaScript that is setting focus() on this initial element. One workaround is to blur() it ...

javascriptjqueryhtmlajax

Ensuring Radiobuttons are Selected on a Page After Clicking the Submit Button

Seeking assistance with this issue: I am working on a page that includes radio buttons: <label>Delivery type:</label> <input type="radio" name="delivery" value="7" class="delivery-item" id="del-type-7" onclick=""><label class="label" ...

javascriptjqueryhtml

Utilize CSS to ensure that images are equal in height to their container element

This is the markup div.shadow | div#content |img.shadow | Is there a way to ensure that the shadow images always maintain the same height as the content area? The challenge lies in the fact that the content area can adjust its size based on different fac ...

javascripthtmlcss

What can I do to ensure that the selectInput choices in Shiny are easily accessible and visible to the user?

When running the code provided below, I encountered an issue where the options in the selectInput() were partially blocked by the bottom edge of the wellPanel(). This problem is illustrated in the image below. Users had to adjust the mouse wheel to see all ...

htmlcssrshinyselectinput

Trouble experienced with the window.open() function on Safari

When using Safari, it can sometimes block the opening of a new tab through the window.open() function during an ajax call. To bypass this blocking, we must first call window.open() to open a new tab before making the ajax call. Refer to this Stack Overflow ...

javascripthtmlajaxsafariwindow.open

Enhance your webpage by incorporating various icons and custom spacing using Font Awesome and CSS content

Utilizing Font Awesome icons can be done with the code snippet below: .icon-car { content: "\f1b9"; } Is there a way to include multiple icons (such as \f1b9 and \f1b8), separated by a non-breaking space? ...

cssfont-awesome

Adding a stylesheet dynamically in Angular 2: A step-by-step guide

Is there a method to dynamically add a stylesheet URL or <style></style> in Angular2? For instance, if the variable isModalOpened is set to true, I want to apply certain CSS styles to elements outside of my root component, such as the body or ...

javascripthtmlcssangularangular2-template

Horizontal line displayed in the jumbotron's footer

https://i.sstatic.net/9cjiD.jpg I'm having trouble aligning two horizontal lines (hr) in my jumbotron. The first line aligns correctly at the beginning of the page, but the second line, located at the bottom of the logo, should be at the end of the p ...

htmlcssbootstrap-4

What are some ways to maintain consistent audio levels on a jquery volume slider?

My html5 webpage features a slider and an audio track, but I am not using the sound tag property controls="controls". I want the slider to control the volume of the audio file. When I include the following code in the body tags, everything works perfectly: ...

javascriptjqueryhtml

Display the PDF without providing the option to download

When clicking on any of the PDF links, it will open in a new tab with options available in the PDF reader. https://i.sstatic.net/2bVB7.jpg I am looking to disable only the download button within the PDF. To elaborate further, a client will upload their ...

javascriptphphtmlgoogle-chromepdf

HTML row scaling

I have a table that is set up like this The first row on the left side is adjusting its height based on the content in the "Notes" column. How can I ensure that all rows on the left side have the same height? Here is an example: Check out this fiddle I m ...

htmlhtml-table

Tips for customizing the appearance of an HTML dropdown menu

Here is the code snippet: <select name="xyz" id="abc"> <option value="x">10/Page</option> <option value="y">20/Page</option> <option value="z">30/Pa ...

htmlcss

Preventing an object from exceeding the boundaries of its designated space

My DIV is filled with user-generated content, which sometimes begins with an item that has a margin-top that overflows the container, creating a gap between it and preceding elements. I've discovered that changing the display property to either inline ...

css

Relocating to the middle of the webpage (Automatically resize for mobile compatibility if feasible)

Apologies for my poor English. Are there any suggestions on how to center this without using margins or other methods? Perhaps there are alternative solutions. https://i.sstatic.net/dXfwL.png Also, is it feasible for the image and video to automatically a ...

javascripthtmlcssvue.js