Troubleshooting: Header Appears Slightly Below the Top of the Screen in CSS/HTML

Despite setting padding: 0; and margin: 0;, the div always appears below the top of the browser, without touching it.

Below is the snippet of code:

html,
body {
  margin: 0;
  padding: 0;
}

.nav>ul>li {
  display: inline-block;
  padding: 0px 25px 25px 25px;
  color: #333333;
  font-family: Georgia;
  font-size: 14px;
}

.nav>ul {
  text-align: right;
  list-style: none;
  vertical-align: middle;
  padding: 20px 0px 20px 0px;
}

.nav {
  background-color: #cccccc;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Website</title>
<script rel="javascript" src="Website.js"></script>
<link type="text/css" rel="stylesheet" href="Website.css"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Georgia|Georgia:bold,italic,underline">
</head>
<body>
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Forums</li>
<li>Contact</li>
</ul>
</div>

</body>
</html>
I'm struggling to identify what I am doing wrong with the code. Any assistance would be greatly appreciated.

Answer №1

To resolve this issue, simply include the following code: ul{ margin: 0 }

html,
body {
  margin: 0;
  padding: 0;
}
.nav > ul {
  margin: 0;   /* Add this line */
}

.nav>ul>li {
  display: inline-block;
  padding: 0px 25px 25px 25px;
  color: #333333;
  font-family: Georgia;
  font-size: 14px;
}

.nav>ul {
  text-align: right;
  list-style: none;
  vertical-align: middle;
  padding: 20px 0px 20px 0px;
}

.nav {
  background-color: #cccccc;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Website</title>
<script rel="javascript" src="Website.js"></script>
<link type="text/css" rel="stylesheet" href="Website.css"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Georgia|Georgia:bold,italic,underline">
</head>
<body>
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Forums</li>
<li>Contact</li>
</ul>
</div>

</body>
</html>

Answer №2

The Style Sheet prioritizes the default values set by the browser.


Chrome includes

ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}

.


To override these defaults.

ul{margin:0}



Then the <style> rules are applied.

Many websites use inline-css.

However, these can be overridden using important! in the <style> tags.

Visit this link for more information on CSS Cascading

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

Scrolling and adjusting window size while perfectly displaying images pixel by pixel using php and javascript

I'm currently working on a forum concept that will feature images. I'm looking to have the image displayed at default width and height, but also want users to be able to resize the window to view more of the image as needed. Additionally, I would ...

Modifying the display property of an element using JavaScript

Hello, I'm encountering an issue with a section of my javascript code. I am attempting to make the #showAddress element display as block when the deliverservice radio button is clicked or checked. I have tried searching for solutions on Stack Overflow ...

Bootstrap causing malfunction of JQuery bounce animation

Looking to create a bouncing popup on hover using Bootstrap (v3.0.0) panel, but encountering an issue where the panel changes its width after the bounce effect. For reference: http://fiddle.jshell.net/YxRvp/ If anyone has a solution for this problem, ple ...

The sequence of CSS and deferred JavaScript execution in web development

Consider this scenario: you have a webpage with a common structure in the <head>: <link rel="stylesheet" href="styles.css"> // large CSS bundle <script defer src="main.js"></script> // small JS bundle with defer attribute There is ...

Tips for effectively closing div elements

How can I modify this accordion to close when a user clicks on another link, and also change the image of the open "p" tag? Currently, clicking on a link toggles the content and changes the image. However, what I am struggling with is closing the previousl ...

Dynamic visuals created with Jquery and Ajax

While I'm not an experienced developer, I have managed to work with some small Jquery scripts. Lately, I've been struggling for the past month trying to figure out how to implement a specific functionality that I would like to incorporate. Does a ...

Issue with Vue2: DIV does not adjust height when using v-for loop

I have a div set up like: <div class="pt-4"> <h5>Genres:</h5> <div class="inline-block float-left" v-for="(genre, index) in moreData.genres" :key="index"> <span v-if="index < ...

Display various images based on different device orientations in UIWebView

Is there a way to display varying images in my HTML on a UIWebView, depending on the orientation of an iPhone? (I apologize if this question seems basic...) ...

Customizing Bootstrap SCSS variables by substituting them with different Bootstrap variables

What is the most effective way to customize variables? I have found that following this specific order yields the best results: @import "bootstrap/_functions.scss"; $primary: red; @import "bootstrap/_variables.scss"; @import "bo ...

The submission button in Bootstrap 3 becomes disabled upon clicking, preventing the data from being successfully transferred to the database

Currently, I am in the process of developing a signup page using bootstrap. To validate my form, I have integrated the plugin. Despite all validations being successful, an issue arises when I attempt to submit the form - the submit button is disabled and ...

Is JQueries Live functionality compatible with IE8?

Incorporating the JQuery fancy box, I have implemented a pop-up form with select fields that dynamically update a span element upon selection change. Although it works well thanks to fellow Stack Overflow users' help, it unfortunately does not functio ...

Undefined variable 'site' error encountered in Codeigniter views

Query: I encountered an issue while running the program: undefined variable "site" in the views. The code snippet is as follows: <ul class="nav nav-pills"> <li><a href="<?php echo $site ?>/CI_timeline/index"& ...

"Rearrange elements on a webpage using CSS and HTML to position one

Can we utilize CSS/HTML to visually move a full width element that is positioned below another one so that it appears above without altering the markup order? <div id="first">first</div> <div id="second">second</div> #first {…} ...

Tips for removing empty space caused by the iPhone notch on your webpage

Hey there, I'm struggling to remove the blank space on my iPhone with a notch at the top of the screen. Do you have any advice on how to change the background color from the default white? My website is live and you can check it out at . I've att ...

Div vanishes once SVG Gaussian blur is applied

I'm attempting to add a Gaussian blur effect to an element that contains some child nodes with content. In Chrome, I successfully applied the blur using the following style: -webkit-filter: blur(2px); Unfortunately, Firefox does not support thi ...

Is there a way to eliminate the default Tab indicator in Materializecss?

Utilizing the tab feature in MaterializeCSS to enhance the navigation tabs for my web application. By default, the initial tab is already chosen, evident by the underlined indicator beneath it as depicted in the image below. https://i.sstatic.net/PbGb5.pn ...

Retrieving data from dynamic form components in Angular

I am currently utilizing a back-end API to retrieve flight data, which I then iterate through and exhibit. The layout of my template code is as follows... <form novalidate #form="ngForm"> <div class="flight-table"> <header fxLayou ...

Customizing Mouse Pointers in CSS

My goal is to customize the click pointer on a website using CSS. I have successfully changed the default cursor, but now I am seeking help in changing different 'versions' of the cursor. Here's my current attempt at customizing the pointe ...

Issue with Laravel project: Views are not updating after code changes

Despite my efforts to clear and refresh everything, my Laravel project is not reflecting the changes. I have attempted clearing the view and deleting files manually. I also ran cache:clear, changed the root folder name, but the project continues to displa ...

Forwarding the main webpage from the child Html.renderAction without the need for Ajax, Java, Jquery, or similar technologies

Having an issue with a form in Html.RenderAction where after submitting the form, I need to reload the parent but keep running into the error message "Child actions can not perform redirect actions." Any suggestions on how to resolve this without using Aja ...