I've got two HTML pages
EDIT: fiddle if you click on fiddle options and switch between the doc types you can see the difference in how they're rendered.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Styles.css" title="Styles" />
<meta charset="utf-8" />
</head>
<body>
<div class="page1" >
<div class="classTextbox1">
<p>
<span class="text165">
this is a big string this is a big string this is a big string this is a big string this is a big string this is a big string
</span>
</p>
</div>
</div>
</body>
</html>
and
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="Styles.css" title="Styles" />
<meta charset="utf-8" />
</head>
<body>
<div class="page1" >
<div class="classTextbox1">
<p>
<span class="text165">
this is a big string this is a big string this is a big string this is a big string this is a big string this is a big string
</span>
</p>
</div>
</div>
</body>
</html>
The stylesheet for both of them is
p { margin-top: 0; margin-bottom: 0 }
table { border-collapse: collapse; border-spacing: 0 }
tr { vertical-align : top }
body { margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; word-wrap: break-word }
.text127 {font: 13px "Times New Roman", "Times New Roman", serif; line-height: 15px }
.text165 {font: 11px "Helvetica", "Helvetica", sans-serif; }
.classTextbox1 { position: absolute; left: 24px; top: 60px; width: 73px; height: 12px; overflow: hidden }
.page1{ position: absolute; top: 0px; width:816px; height:1008px }
Besides the doc type the HTML pages are identical and the style sheets are identical. However, when the HTML5 doc type is viewed in Chrome (latest) and Firefox (32) the text appears several pixels lower than it does in HTML4. I'm not sure if line-height is the culprit, but I'm lost for what the problem is. Any ideas? TIA.
I think this has something to do with you putting the font size on the span which is an inline element. This is whee it gets tricky as I don't know what's going on when you do this but apparently when the inline element has a different font size than the container block element the line height gets affected. I did a couple of tests using jquery to alert the line height in FF with HTML5 doctype. The line height returns 17.xx when you set the font size of 11px on the span and it returns 13.xx if you set it on the p
If you put the font css in the paragraph tag, it will solve your problem
http://jsfiddle.net/ywu5107e/1/
p {
margin-top: 0;
margin-bottom: 0;
font: 11px "Helvetica", "Helvetica", sans-serif;
}
You can also have a read at HTML5 vs HTML4 - h1 tag rendered with extra space - how to remove? the first answer is helpful
Related
I was just messing around with CSS & HTML and added a header with a background color to the top of my website. Then I saw that there was lots of white space on top of the header's background color and to the sides of it. How do I get rid of this white space using CSS? Here is my code along with a picture of how the website looks right now:
<!DOCTYPE html>
<html>
<head>
<title>
Website
</title>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhaina" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<style>
.typeofvirus{
font-family: 'Open Sans', sans-serif;
}
br {
line-height: 2%;
}
#topheader{
background-color: #2c3e50;
width: 100%;
color: white;
margin-top: -1%;
}
html, body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<p></p>
<section id = "topheader">
<div id = "topheaderdiv">
<h1 style = "font-family: 'Baloo Bhaina', cursive; text-align: center;"><big>Hello</big><br><small><small><small style = "font-family: 'Nunito', sans-serif;">This is a webpage</small></small></small></h1>
</div>
</section>
<h2 class = "typeofvirus">What are Microbes?</h2>
<p></p>
<h3 class = "typeofvirus"><big>Types of viruses caused by microbes in the bathroom</big></h3>
<ul>
<li style = "font-family: 'Open Sans', sans-serif;"><i><big>Dermatophitic fungi</big></i>: Caused by people walking barefoot in bathrooms</li>
<li style = "font-family: 'Open Sans', sans-serif;"><i><big>Gastrointestinal viruses</big></i>: Caused by contact with a toilet. This can remain on a solid surface for over a week. This causes stomach ailments.</li>
<li style = "font-family: 'Open Sans', sans-serif;"><i><big>Residual fungi</big></i>: which can cause asthma or allergies. This is caused by the mold in the bathroom due to lack of cleaning.</li>
</ul>
</body>
</html>
You need to reset your body and html margin and padding too:
Add this to your CSS:
html, body {
margin: 0px;
padding: 0px;
}
I would go with anned20's answer but for the sake of academic curiosity you can also add
overflow: hidden;
to body and html. Or manually give the element a negative upper margin and a 100% width like this
#topheader{
background-color: #2c3e50;
width: 100%;
color: white;
margin-top: -1%;
}
But, again, anned's solution is ideal.
I am trying to give the date a margin of 15px between the bottom of the header and the text itself, but it doesn't move no matter what I tried.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<script src="myscripts.js"></script>
<title>The Impertus ยท Understand the News</title>
</head>
<body>
<div id="Preheader">
<img src="images/masthead.png">
<div class ="ph" id="hd"></div>
<p class="ph">May 14, 2016</p>
</div>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css?family=Oswald');
html, body {
background-color: #E1D4C0;
margin: 0 0 0 0;
}
.ph {
display: inline-block;
margin-bottom: 15px;
}
#Preheader {
height: 150px;
width:100%;
background-color: #104386;
font-family: Oswald;
color: #F5EDE3;
}
Created Fiddle here: https://jsfiddle.net/fhkh6ae0/
Add .ph { vertical-align:15px; }
See https://jsfiddle.net/fhkh6ae0/2/
Try
.ph {
padding-bottom: 15px;
}
I think your issue lies in your html elements display property.
I see you are using this for the .ph class:
display: inline-block;
In order for your elements to align next to each other, but I think what you are trying to achieve here is possible by applying a float to your #hd and .ph elements:
float: left;
Here is some detailed information on CSS Floats by CSS-Tricks. The method you are using can be a good thing to do in a lot of specific situations, but for your specific case, I think this is the right path to take.
Here is a Fiddle for you.
You can see I changed some things and I added new things. One is the float property I am referencing above, and I have added an overflow: hidden property to the main container #Preheader , this is a fix for floating elements that try to escape their position or break your layout in bits. Remember the last one.
Just add a padding in #Preheader and it will be okay. take a look https://jsfiddle.net/fhkh6ae0/3/
#Preheader {
height: 150px;
width:100%;
background-color: #104386;
font-family: Oswald;
color: #F5EDE3;
padding-bottom:15px; /*added*/
}
I am trying to place a solid color banner that stretches across the top of the screen like on this website, facebook, and others. For some reason I am encountering difficulties doing this
I created a div tag in my HTML file for the banner and tried to apply CSS to the div tag but nothing is working.
<!DOCTYPE html>
<html>
<head>
<style>
#banner {
background-color: #333FF;
font-family: Arial;
position: absolute;
left: 0;
right: 0;
padding:15px;
height:800px;
background-size:100%;
}
</style>
<title>Random Password Generator</title>
</head>
<body>
<div id="banner"><h1>fdsfdsfdsfds</h1></div>
</body>
</html>
I also tried linking to an external CSS file but that isn't working either.
How can I make a simple, solid color banner at the top of the page, on every page?
#333FF is an incorrect color. It should be like this: #333FFF. See the W3C Specification for more info on the length of hex codes (hint: they need to be six characters long).
Working example : http://jsfiddle.net/ntim/SKnxP/
position:absolute; also doesn't seem necessary in your case.
You don't actually need to use position absolute unless you want it to be over the top of anything. Instead, you can just use the following:
<style>
#banner {
background-color: #333FFF;
font-family: Arial;
padding:15px;
height:800px;
background-size:100% 100%;
}
</style>
here is something based on a template I use:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="CSS-STYLE-SHEET.css">
<style type="text/css">
body
{
background-color: #E7E7E7;
text-align: center;
font-family: Arial, Helvetica;
font-size: 15px;
color: #000000;
border-spacing: 0;
border-collapse:collapse;
padding: 0;
margin: 0;
}
#Banner {
background-color: #333FFF;
top: 0; /* Probably not necessary... */
height: 40px;
width: 100%; /* Also probably not necessary */
}
#ContentMain
{
background-color: #FFFFFF;
height: 100%;
}
</style>
</head>
<body>
<div id="ContentMain">
<div id="Banner">Banner goes here</div>
Content goes here
</div>
</body>
</html>
should work.. the grey bit at the back is because the html and body tags dont fill the entire screen - something like this should fix it (I would use min-height), but I have not included it here as then if you want a page taller than the browser window and works in Internet Explorer things get annoying...
Jsfiddle here
I have existing documents that I'm trying to insert logical page numbers into. In the xhtml snippet below, this is the .pagerule-cls div. I found a document that this doesn't work well with because the affecting css for the first element on the page has a margin-top of -1em. My page number insertion ends up in the center of the h1 text of the orginal document. Is there anything I can do to make sure the h1 heading "Introduction" comes after my page number insertion with appropriate pagerule-cls css?
By the way, the style on the body element is also my insertion to change the left and right margins.
Andy
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
<style>
.calibre14 {
display: block;
font-size: 1.5em;
font-weight: bold;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
margin-top: -1em;
text-align: center
}
.calibre4 {
display: block;
margin-bottom: 0;
margin-left: 1.25em;
margin-right: 0;
margin-top: 0;
text-align: justify
}
.pagerule-cls {
text-align: center;
font: 13px Arial, Helvetica, sans-serif;
}
</style>
</head>
<body style='margin-left:100px;margin-right:10px;min-width:400px;max-width:800px;'><a name='stagpage6' id='stagpage6'/><div class='pagerule-cls'>7</div>
<div><blockquote class="calibre4"><span>
<h1 class="calibre14"><span><span class="bold"><a></a>INTRODUCTION</span></span></h1>
<div></div></span></blockquote></div>
</body>
</html>
The simplest way is to add margin-bottom: 1em; to .pagerule-cls, which maybe would result in a too large margin for the other documents. Better is to add this extra style only to the document in question. How do you modify the documents? Could you query for the -1em?
I'm using the following css to define my background:
body
{
background-image: url('background.png');
font-size: 12pt;
font-family: Veranda, Arial, Helvetica, sans-serif;
}
The image background.png is stored in the root directory, but whenever I refresh the webpage, the background remains white. MY instructor currently has a copy of my files and is attempting to figure it out himself, though the problem wasn't obvious to him at a cursory glance. My full html and css are as follows:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta http-equiv="content-type" content = "text/html charset = utf-8" />
<link rel = stylesheet href = "style.css" type = "text/css" media = screen>
<title>
Title
</title>
</head>
<body>
<div id = "wrapper">
<div id = "leftsidebar">
<h3> Navigation </h3>
</div>
<div id = "content">
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<p align = "justify"> Paragraph 1.</p>
<p align = "justify"> Paragraph 2 </p>
<p align = "justify"> Paragraph 3 </p>
</div>
</div>
</body>
</html>
CSS:
<style type = "text/css">
<!--
body
{
background-image: url('background.png');
font-size: 12pt;
font-family: Veranda, Arial, Helvetica, sans-serif;
}
div#wrapper
{
width: 80%;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #000000;
}
div#header
{
padding: 15px;
margin: 0px;
text-align: centre;
}
div#leftsidebar
{
width: 25%;
padding: 10px;
margin-top: 1px;
float: left;
}
div#content
{
margin-left: 30%;
margin-top: 1px;
padding: 10px;
}
div#footer
{
padding: 15px;
margin: 0px;
border-top: thin solid #000000;
}
-->
</style>
CSS files are not supposed to contain
<style type = "text/css">
<!--
I assume that leads to an error parsing the first CSS block (the body one).
html is not allowed in you style.css
You need to remove the <style type = "text/css">, the html comment tag <!-- and obviously the closing tags for each.
You also dont need the ' ' around the background url, it can be written like this.
background-image: url(background.png);
Make those changes, and assuming background.png is in the correct directory it will work.