CSS Stylesheets at Top or Bottom? or How to Solve Blank Page Issue

  • Home
  • Languages
  • CSS
  • CSS Stylesheets at Top or Bottom? or How to Solve Blank Page Issue

CSS stylesheets at top or bottom? or How to solve blank page issue?

Google is fast busting the tradition of styles 'belonging' in the head. They do indeed recommend that critical styling belongs either in the <head> tag or even inline, but that other, non-essential styles should be referenced after the closing </html> tag. This does work on most, if not all modern browsers (I've not tested all).

The reason behind this is to load the bulk of the styles as a non-blocking reference, allowing the browser to begin writing to page before getting all the (potentially) bulky styles. Depending on what's in the 'critical' styles, this could cause an initial layout of hideous proportions before styling is rendered (FOUC). That is probably what you are experiencing with the "blank page" issue.

Remember also that CSS was released almost 20 years ago (1996), so it's not surprising that Google (and others) are manipulating and pushing out the traditional parameters of the concept.

A ridiculously simple example:

<!DOCTYPE html>
<html>
<head>
    <title>It's a Brave New World</title>
    <link rel="stylesheet" type="text/css" href="css/critical_styles.css" />
</head>
<body>
    <!-- best page ever -->
</body>
</html>
<link rel="stylesheet" type="text/css" href="css/bulky_nonessential_styles.css" />

My HTML + CSS site is showing a blank space on right and bottom of the screen while the margin is 0 on both bottom and right

I am not sure what you are asking but I checked it and the problem comes from the bootstrap you have.

The Class 'row' you put under the section of Front-pg is giving you

margin-right: -15px
margin-left: -15px;

You can overwrite this one by adding a class row in your own CSS file:

.row{
   margin: 0;
 }

Just make sure that the CSS file you have is below the bootstrap stylesheet when linking the CSS in the HTML

CSS causes blank page in chrome

why did you do this?

html:before, #container:before {
content:"";
float:left;
height:100%;
margin-top:-999em;
}

remove html:before,.

Complete list of reasons why a css file might not be working

  1. Are you sure the stylesheet is loaded? You can see it using the "Net" tab of Firebug on firefox, or on "Network" tab of the Console of your browser.

  2. (If 1 works) can you have a simple sample style and see whether this is getting applied (and visible in the console)?

Strange Blank Space at Top of Page – HTML, CSS, and PHP

The H1 on the register page has a default Margin to it. Sometimes, I don't know why, if you give the first element a margin, it applies it to the parent.

By giving the H1 #register_title a top margin of 0, you should fix your problem. 

#register_title { margin-top: 0; }

Always remember to use a reset.css implementation or keep in mind that elements are styled by default.

Edit:
I'd like to point out that this was an issue because of all your previous elements were absolutely positioned. You really should not be using absolute positioning the way you are. You should use margin-top, padding-top to move elements down the page. Absolute positioning should only be used when no other avenues of positioning an element are available.

Footer taking up alot of blank space when at the bottom of page

The best solution would be to remove the flex from the body element & instead set the flex properties on the container. With your current structure, you can fix this by adding the following CSS to footer.

footer {
  width: 100vw;
  position: fixed;
  bottom: 0;
}

* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}

.container {
  width: 100%;
  border: 1px solid gray;
  background-color: rgb(255, 255, 255);
  border-bottom: 0px;
}

@font-face {
  font-family: Gemosh;
  src: url(Gemosh2.otf);
}

header {
  font-family: Gemosh;
  padding: 1em;
  color: black;
  background-image: url(header.jpg);
  background-size: cover;
  text-align: center;
  letter-spacing: 1em;
}

header h1 {
  margin-top: 5%;
  font-size: 60px;
}

footer {
  padding: 1em;
  color: white;
  background-color: black;
  text-align: center;
  font-size: 15px;
  position: fixed;
  width: 100vw;
  bottom: 0;
}

.navbar {
  display: flex;
  margin-bottom: 0px;
  justify-content: center;
  justify-content: space-evenly;
  padding: 1em;
  padding-bottom: 1em;
  padding-top: 0em;
}

.dropdown {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  position: relative;
  color: white;
  text-decoration: none;
  padding: 1.5em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  background-color: #444444 !important;
  border-radius: 5px;
  font-size: 15px;
  transition: 0.2s;
}

.dropdown a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 0em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  border-radius: 5px;
  transition: 0.2s;
  text-align: center;
}

.dropdown>.dropdown-sub {
  display: none;
  z-index: 1;
  flex-direction: column;
  position: absolute;
  top: 35px;
  background: #636363;
  color: white;
  border-radius: 5px;
  transition: 0.2s;
  width: 100%;
  right: 0px;
}

.dropdown:hover>.dropdown-sub {
  display: flex;
}

.dropdown-option:hover {
  background-color: #abcdef !important;
  color: white;
}

.active-dropdown {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  position: relative;
  color: white;
  text-decoration: none;
  padding: 1.5em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  background-color: #04AA6D !important;
  border-radius: 5px;
  font-size: 15px;
  transition: 0.2s;
}

.active-dropdown a {
  display: block;
  background-color: #11c784 !important;
  color: white;
  text-decoration: none;
  padding: 0em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  border-radius: 5px;
  transition: 0.2s;
  text-align: center;
}

.active-dropdown>.dropdown-sub {
  display: none;
  z-index: 1;
  flex-direction: column;
  position: absolute;
  top: 35px;
  background: rgb(4, 199, 129);
  color: white;
  border-radius: 5px;
  transition: 0.2s;
  width: 100%;
  right: 0px;
}

.active-dropdown:hover>.dropdown-sub {
  display: flex;
}

.dropdown-option a:hover {
  background-color: #abcdef !important;
  color: white;
}

.main {
  padding: 1em;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.test {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  font-size: 50px;
  padding: 10px;
}

.londontxt {
  flex: 20%;
  padding: 2em;
  font-size: 15px;
  padding-bottom: 0em;
  padding-top: 0em;
}

.pic {
  flex: 20%;
  padding: 10px;
}

.pic img {
  margin-left: 10%;
  width: 80%;
}

.pic h2 {
  margin-left: 10%;
}

@media only screen and (min-width: 600px) {
  .londontxt {
    padding: 3em;
    padding-bottom: 0em;
    padding-top: 0em;
  }
}

@media only screen and (min-width: 680px) {
  .londontxt {
    padding: 4em;
    padding-bottom: 0em;
    padding-top: 0em;
    font-size: 20px;
  }
}

@media only screen and (min-width: 821px) {
  header {
    display: block;
    font-family: Gemosh;
    padding: 1em;
    color: black;
    background-image: url(header.jpg);
    background-size: cover;
    text-align: center;
    height: 350px;
    letter-spacing: 1em;
  }
  header h1 {
    margin-top: 5%;
    font-size: 120px;
  }
  .navbar {
    justify-content: center;
    gap: 50px;
    padding: 1em;
    padding-bottom: 4em;
    padding-top: 1.5em;
  }
  .navbar a {
    padding: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
    transition: 0.2s;
  }
  .dropdown {
    padding: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
  }
  .dropdown a {
    background-color: #636363 !important;
    padding: 0em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    text-align: center;
  }
  .dropdown>.dropdown-sub {
    top: 40px;
  }
  .dropdown-option a:hover {
    color: white;
  }
  .active-dropdown {
    padding: 1.8em;
    padding-top: 1em;
    padding-bottom: 1em;
  }
  .active-dropdown a {
    padding: 0em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }
  .active-dropdown>.dropdown-sub {
    top: 40px;
  }
  .main {
    flex-direction: row;
  }
  .londontxt {
    font-size: 15px;
    padding: 1em;
  }
}

@media only screen and (min-width: 1000px) {
  .londontxt {
    font-size: 20px;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>City</title>
  <link href="london.css" rel="stylesheet" type="text/css">
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <div class="container">
    <header>
      <h1>City Gallery</h1>
    </header>
    <div class="navbar">
      <div class="active-dropdown">
        <div class="dropdown-title">London</div>
        <div class="dropdown-sub">
          <div class="dropdown-option"><a href="">Overview</a></div>
          <div class="dropdown-option"><a href="">Wikipedia</a></div>
          <div class="dropdown-option"><a href="">Pictures</a></div>
        </div>
      </div>
      <div class="dropdown">
        <div class="dropdown-title">Paris</div>
        <div class="dropdown-sub">
          <div class="dropdown-option"><a href="">Overview</a></div>
          <div class="dropdown-option"><a href="">Wikipedia</a></div>
          <div class="dropdown-option"><a href="">Pictures</a></div>
        </div>
      </div>
      <div class="dropdown">
        <div class="dropdown-title">Tokyo</div>
        <div class="dropdown-sub">
          <div class="dropdown-option"><a href="">Overview</a></div>
          <div class="dropdown-option"><a href="">Wikipedia</a></div>
          <div class="dropdown-option"><a href="">Pictures</a></div>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="londontxt">
        <h2>London</h2>
        <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
        <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
      </div>
      <div class="pic">
        <h2>Tower Bridge:</h2>
        <img src="londonbridge.jpg" alt="Sample Image">
      </div>
      <div class="pic">
        <h2>Big Ben:</h2>
        <img src="londonbigben.jpg" alt="Sample Image">
      </div>
    </div>
  </div>
  <footer>Copyright © 2022 Johannes</footer>
</body>
</html

how to avoid extra blank page at end while printing?

You could maybe add

.print:last-child {
     page-break-after: auto;
}

so the last print element will not get the extra page break.

Do note that the :last-child selector is not supported in IE8, if you're targetting that wretch of a browser.

White space at top of page

Add a css reset to the top of your website style sheet, different browsers render some default margin and padding and perhaps external style sheets do something you are not aware of too, a css reset will just initialize a fresh palette so to speak:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

UPDATE: Use the Universal Selector Instead:
@Frank mentioned that you can use the Universal Selector: * instead of listing all the elements, and this selector looks like it is cross browser compatible in all major browsers:

* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }

Related Topics

How to Keep The Width of The Parent Element When Position: Fixed Is Applied

Why Do I Have to Add "Overflow:Hidden" to Make The Navigation Bar Visible on The Page

Detecting Printed Page Size with CSS Media Queries

Left/Right Float Button Inside Div

Century Gothic Font Usablility Question

Detect Unused CSS Rules

Changes Made to (Static) CSS File Not Reflecting in Django Development Server

What Are The Best Practices for Writing Maintainable CSS

Input Text Very Small When Hovering on Autofill Suggestion

Default Javafx-CSS

Make Bootstrap Carousel Responsive on Height

Site 5X Faster via Mod_Rewrite, But CSS Images Are Broken

How to Use HTML5 Now to Create a Website

CSS3 Button Background Color Infinite Transition

Object Oriented CSS: Should It Matter

Overlap Images in CSS

How to Specify The Use of Text or Titling Figures in CSS

Vaadin - Coloring Table Cells Based on Content


Leave a reply



Submit