H3 Element Without ASP Causing Disruption in Page Layout

Looking at my .aspx page, I have the following code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="BootStrap.css" rel="stylesheet" type="text/css" />
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="navbar" class="col-xs-12"></div>
    <h3> Loading... </h3>
</body>
</html>

After adding the h3 tag, I noticed a gap above the navbar element:

https://i.sstatic.net/7AklM.png

However, upon removing the h3 element, the gap disappeared:

https://i.sstatic.net/TVhO6.png

Further exploration revealed that changing the tag to: 

<asp:h3> Loading... </asp:h3>

also eliminated the gap. Yet, this modification triggered a warning in VS:

Element 'h3' is not a known element. This can occur if there is a compilation error in the Web site, or the web.config file is missing.

Can anyone explain what causes this gap when using non-asp elements on an asp page? And do you think the warning message should be a cause for concern?

htmlcssasp.nettwitter-bootstraptwitter-bootstrap-3

Answer №1

By default, headings (from h1 to h6) have margins applied to them. However, when using bootstrap, it overrides the default styles for headings (specifically for h1 to h3) with the following CSS:

h1, .h1, h2, .h2, h3, .h3 {
  margin-bottom: 10px;
  margin-top: 20px;
}

This means that you may need to reset the margins in some cases.

For example, if you want to reset the margin for h3, you can use:

h3 {
  margin: 0;
}

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 could be causing the issue of CSS Styles not being applied to an Angular 2 component with Vaadin elements?

Currently, I am immersed in the tutorial on Vaadin elements using Angular 2 that I stumbled upon here In section 5.3, Styles are applied to the app.component.ts as shown below import { Component } from [email protected]/core'; @Component({ select ...

htmlcssangulartypescriptvaadin

Prevent users from including spaces in their usernames during registration

I've encountered an issue with my registration form. It currently allows users to register usernames with spaces, such as "user name" instead of just "username" without any spaces. Despite searching and reading numerous tutorials, none have been of m ...

phpmysqlhtmltrim

Troubleshooting Issue: Oracle Database (ASP.net) - ADODB.Recordset AbsolutePage not Functioning as

Here is the code snippet that I am using: Dim PageNum AS Integer = 1 Dim ThePageSize As Integer = 30 Dim RowCT As Integer = 0 Dim SqlStr As String = "SELECT * FROM TheTable" Dim TCConStr As String = ConfigurationManager.ConnectionStrings("TCConStr").Conn ...

asp.netvb.netoraclecomado

implement a jQuery loop to dynamically apply css styles

Attempting to utilize a jQuery loop to set a variable that will vary in each iteration through the loop. The plan is for this variable to be assigned to a css property. However, the issue arises where every css property containing the variable ends up with ...

javascriptjquerycssvariablesloops

Update the content of an HTML element without having direct access to the HTML code

I am currently in the process of creating a website using a website builder, and I am interested in customizing the default message that is displayed when a required field in the website form is left empty. The form in question is an integral part of the w ...

javascripthtmlcss

Animating distance with the power of animate.css

I have implemented animate.css for a login form, but it is not behaving as desired. Currently, I am utilizing the fadeInDown animation, however, it is fading in from a greater distance than intended. I would prefer it to fade in from just around 20px below ...

htmlcssanimationanimate.css

The placeholder string is being accepted as the input value for the number

My issue is with a form input of type number. When the form is submitted without entering any number, it treats the placeholder text "rating" as the value. How can I stop this from happening? I need to make sure that the input number field is marked as in ...

htmlformsangularangular-forms

How can I extract a substring from a URL and then save it to the clipboard?

Hi there! I'm working on a project for my school and could really use your expertise. I need help extracting a substring from a URL, like this one: URL = https://www.example.com/blah/blah&code=12432 The substring is: 12432 I also want to display ...

javascripthtmljquerycssweb

Is there a way to overlay a 'secret' grid on top of a canvas that features a background image?

I am currently working on developing an HTML/JS turn-based game, where I have implemented a canvas element using JavaScript. The canvas has a repeated background image to resemble a 10x10 squared board. However, I want to overlay a grid on top of it so tha ...

javascripthtmlcss

Using CSS box-shadow to elevate an image

I am looking to create a background wrapper using CSS instead of an image. My goal is to add box shadow to achieve the same look as shown in the attached image. I understand that I will need to use the box-shadow property for this task. However, I am uns ...

htmlcss

The present user who is currently logged into the stackmob platform

I am currently working on retrieving a list of contacts for the logged-in user, but I am struggling to identify the current user. In Parse.com, you would use Parse.User.current(), but I am unsure if Stackmob offers a similar functionality. Below is the co ...

javascriptjqueryhtmlparse-platformstackmob

Ways to avoid data looping in jQuery Ajax requests

This is in relation to the assignment of multiple users using the Select2 plugin, Ajax, and API. The situation involves a function that contains 2 Ajax calls with different URLs. Currently, there are pre-selected users stored in the database. The selection ...

javascriptjqueryhtmlajaxjquery-select2

Controlling Material-UI using a custom .css stylesheet

Are there alternative methods for customizing Material-UI components using CSS stylesheets? I'm aware of the {makeStyles} method and JSS overrides, but I find it messy in the code and confusing when trying to modularize it in other files. Is there a ...

javascriptcssreactjsdesign-patternsmaterial-ui

ASP.NET timer continues running even after it has been disabled

A situation arose where I set the timer on my ASP.NET web page, disabled it after the process was complete, but found that the timer was still running. static bool _end; protected void UpdateTimer_Tick(object sender, EventArgs e) { if (_end) { ...

c#asp.netajaxtimer

Angular2 - Issue with Pagination functionality

When incorporating ng2-bootstrap as a pagination component, the guide provided at () made setting up the component a breeze for me. The pagination functionality is working smoothly and meeting my expectations. However, I've encountered an issue when ...

twitter-bootstrapangularjasminekarma-jasmineng2-bootstrap

Converting CSS into jQuery

I am exploring ways to create a collapsible section with arrow icons (right and down arrows) in jQuery or JavaScript. Can anyone provide guidance on how to convert my CSS styling into jQuery code? Below is the jQuery approach I have attempted: $(document ...

javascriptjqueryhtmlcss

Sending you to a new page and popping up an alert

I have set up an HTML form for user registration and after a successful registration, I want users to be redirected back to my index.html page with an alert confirming their successful registration. Currently, the alert is working but it opens in a blank ...

phphtmlformshttp-redirect

Develop a dynamic animation using gradient and opacity properties

I'm still getting the hang of HTML, JavaScript, and CSS but I recently made some changes to someone else's code to animate a gradient. The original code used background: rgb, but I switched it to background: rgba. It seems to be working fine, but ...

javascripthtmlcssgradient

All you need to know about the jQuery .css method

I've been struggling to get this script to function properly. Despite searching online, I haven't been able to find a satisfactory solution. $( document ).ready(function() { $("#container").click(function(){ var color = $(this).css("backgro ...

jquerycss

The webpage failed to show the hamburger menu

I'm trying to create a hamburger menu and have written the following code: <header class="header"> <nav class="flex flex-jc-sb flex-ai-c"> <a href="/" class="header__logo"> <img src="im ...

htmlcsswebsass