EDIT: I think this boils down to browsers rendering fonts differently. I reduced and reduced my code to try to figure out where the problem was, and I ended up just having a plain webpage with only <h1>Ladesoft</h1> in the body and nothing else, with nothing in my CSS file other than a global choice of font, and I noticed that Chrome and Firefox rendered the heading quite differently. Searching around online, I found this query, and basically it looks like there's unlikely to be any way of achieving my goal. So I'm going to have to resort to creating an image I think. I'll leave this post unanswered for now in case anyone comes up with a solution.
I'm having a problem where the header (h1) on my website looks completely different depending on which browser I use. I am doing something a little unusual with it, but I can't figure out how to get things to look the same. My website is http://www.ladesoft.com
I want to have the title of my site written with just the one line:
<h1>Ladesoft</h1>
I am using CSS to manipulate the text to look like this:
My CSS file can be found here: https://github.com/andylatham82/Website/blob/master/styles.css
Edit: Adding CSS code. Apologies for including it all, but I just don't know where the problem is.
html
{
height: 100%;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
body
{
height: 100%;
background-color: rgb(43, 43, 43);
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
margin-left: auto;
margin-right: auto;
}
h1
{
color: orange;
font-size: 600%;
font-weight: 100;
margin-top: 20px;
margin-bottom: -60px;
margin-left: -60px;
transform:scale(0.9,1);
text-decoration: underline;
text-decoration-color: cornflowerblue;
overflow: hidden;
position:relative;
z-index: -1;
}
h1::first-letter
{
color: cornflowerblue;
font-size: 300%;
margin-right: -20px;
float: left;
margin-top: -125px;
margin-right: -106px;
position: relative;
}
h2
{
color: cornflowerblue;
text-align: center;
font-weight: 50;
margin-top: 20px;
margin-bottom: 20px;
}
p
{
color: rgb(228, 226, 179);
}
table
{
margin-left: auto;
margin-right: auto;
padding: 0;
border-spacing:0;
}
td
{
color: rgb(228, 226, 179);
width: auto;
text-align: left;
border-spacing: 0;
padding: 2px;
padding-left: 10px;
padding-right: 10px;
}
a
{
color: cornflowerblue;
}
ul
{
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: orange;
}
li
{
float: left;
}
li a
{
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover
{
background-color: red;
}
hr
{
margin-top: 0px;
border-color: cornflowerblue;
align: left;
size: 4;
border-style: solid;
}
iframe
{
height: 650px;
width: 405px;
border: none;
overflow: hidden;
justify-content: center;
}
.gamelink
{
margin-left: 20px;
}
.date
{
color: orange;
}
.wrapper {
margin: 0px;
padding: 0px;
height: 128px;
display: flex;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
padding-bottom: 400px;
justify-content: center;
}
canvas {
border: 0px;
width: 512px;
height: 512px;
background: black;
image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
image-rendering: pixelated;
-ms-interpolation-mode: nearest-neighbor;
}
#centered
{
text-align: center;
margin-left: auto;
margin-right: auto;
}
One of my HTML files can be found here: https://github.com/andylatham82/Website/blob/master/pages/games.html
Edit: Adding HTML code:
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<meta name="keywords" content="Game, Video, Videogame, C++, C#, Monogame, Pico-8, Pico8, Arduboy, Lua, CSS, Ladesoft, Andy, Latham">
<meta name="description" content="Video games made by Andy Latham">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Andy Latham">
<link rel="stylesheet" href="../styles.css">
<TITLE>Ladesoft: Games</TITLE>
</head>
<body>
<h1>Ladesoft</h1>
<ul>
<li>Games</li>
<li>Software & Experiments</li>
<li>About</li>
</ul>
<hr style="margin-left: 55px; width: 48px">
<h2>Games</h2>
<p>I love making games. Here's a selection of my output. The purpose of any game is to be played, so I'd love to <a href=about.html>hear</a> from anyone who plays any of these!</p>
<br>
<table>
<tr>
<td>
<img src="../images/thumbnails/textadventurethumb.png" title="Text Adventure" alt="Text Adventure" style="float:left;"></td>
<td><span class="date">[2020]</span> A work-in-progress text adventure.</td>
</tr>
<tr>
<td>
<img src="../images/thumbnails/pointandclickthumb.png" title="Point-and-Click Adventure" alt="Point-and-Click Adventure" style="float:left;"></td>
<td><span class="date">[2020]</span> A work-in-progress 'point-and-click' adventure.</td>
</tr>
<tr>
<td>
<img src="../images/thumbnails/babydumpthumb.png" title="Text Adventure" alt="Text Adventure" style="float:left;"></td>
<td><span class="date">[September 2020]</span> Earn money by having (and abandoning) babies.</td>
</tr>
<tr>
<td>
<img src="../images/thumbnails/blackdeaththumb.png" title="Black Death" alt="Black Death" style="float:left;"></td>
<td><span class="date">[August 2019]</span> Play as bubonic plague and try to wipe out the villagers.</td>
</tr>
<tr>
<td>
<img src="../images/thumbnails/thecrawlthumb.png" title="The Crawl" alt="The Crawl" style="float:left;"></td>
<td><span class="date">[March 2019]</span> A mini dungeon crawling platform game.</td>
</tr>
</table>
<br>
<br>
<p id="centered">
-Ladesoft-
</p>
<br>
</body>
</html>
With Chrome on Linux, things look correct:
but with Firefox on Linux, this is what I see:
With Chrome on Windows, it's this:
and with Firefox on Windows, it's this:
And just for good measure, with Edge on Windows, it's this:
Would anyone be kind enough to help me work out what's going on? I understand that different browsers render things differently, but is there any way of achieving my goal of having this logo look the same everywhere without resorting to using an image?
There are a couple of problems in the approach which lead to malignment and different styles in the logo - variable fonts and reliance on underline.
The most obvious problem is that a selection of fonts is given, the first being Menlo which I believe may be present on some systems but is not present for example on my Windows 10 system. This means that the font style is different on different systems and that explains the different look of the orange characters shown in the question. Different fonts also have different spacing such as leading so you cannot compensate for this in general using px units.
To get exactly the same look fontwise you'll need to link to the font you want. I have used a google font Deja Vu mono as some of the fonts in the question are paid for and/or not available.
The more subtle problem is one of positioning of the lines and the first character. If you look at the position of underline on Firefox compared to Chrome it is not exactly the same in relation to the baseline of the characters. Whatever we do in CSS we cannot compensate for this without knowing exactly how each browser renders underline.
We avoid underline therefore and turn to borders and use borders to draw the 'L' as positioning of first character may also not be consistent across browsers. This approach worked reasonably well, except on some magnifications on some screens there was a pixel difference in the rendering.
So, the approach here uses linear-gradients to set backgrounds on the before and after pseudo elements. To get seemingly pixel-perfect fit we make the pseudo element colors overlap rather than abut.
Obviously you can tweak the sizes to suit, but all are in ems so things should be responsive.
Tested on Windows10 with Chrome, Edge, Firefox, IE11 and on iPadIOS 14 Safari and results are reasonably consistent. It may however be better to ditch using h1 as browsers do add their own styling and instead use div with a class. Only the h1 and its pseudo elements have been changed in this CSS, and the text of the logo has been transferred from the main HTML to pseudo elements, with the L rendered not as a character but as linear-gradients as browser rendering of first-letter differs.
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<meta name="keywords" content="Game, Video, Videogame, C++, C#, Monogame, Pico-8, Pico8, Arduboy, Lua, CSS, Ladesoft, Andy, Latham">
<meta name="description" content="Video games made by Andy Latham">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Andy Latham">
<TITLE>Ladesoft: Games</TITLE>
<link rel="stylesheet" href="../styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap" rel="stylesheet">
<style>
html
{
height: 100%;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
body
{
height: 100%;
background-color: rgb(43, 43, 43);
font-family: 'Space Mono', monospace;
margin-left: auto;
margin-right: auto;
}
h1 {
border-style: solid;
border-width: 0 0 0 0.2em;
border-color: transparent transparent transparent transparent;
height: 1.5em;
position: relative;
padding: 0 0 0.05em 0;
margin: 0 0 0.1em 0;
display: inline-block;
width: auto;
transform: scale(0.9, 1);
}
h1:before {
content: '';
position: absolute;
background-image: linear-gradient(to top, cornflowerblue 0em, cornflowerblue 0.11em, transparent 0.11em, transparent 100%), linear-gradient(to right, cornflowerblue 0%, cornflowerblue 0.21em, transparent 0.21em, transparent 100%);
height: 1em;
width: 1.1em;
top: 0.4em;
margin-left: -0.2em;
background-color: transparent;
display: inline-block;
z-index:2;
}
h1:after {
color: orange;
content: 'adesoft';
position: relative;
font-weight: 100;
padding-left: 0.1em;
background-image: linear-gradient(to top, transparent 0em, transparent 0.15em, cornflowerblue 0.15em, cornflowerblue 0.25em, transparent 0.25em, transparent 100%);
}
h2
{
color: cornflowerblue;
text-align: center;
font-weight: 50;
margin-top: 20px;
margin-bottom: 20px;
}
p
{
color: rgb(228, 226, 179);
}
table
{
margin-left: auto;
margin-right: auto;
padding: 0;
border-spacing:0;
}
td
{
color: rgb(228, 226, 179);
width: auto;
text-align: left;
border-spacing: 0;
padding: 2px;
padding-left: 10px;
padding-right: 10px;
}
a
{
color: cornflowerblue;
}
ul
{
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: orange;
}
li
{
float: left;
}
li a
{
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover
{
background-color: red;
}
hr
{
margin-top: 0px;
border-color: cornflowerblue;
align: left;
size: 4;
border-style: solid;
}
iframe
{
height: 650px;
width: 405px;
border: none;
overflow: hidden;
justify-content: center;
}
.gamelink
{
margin-left: 20px;
}
.date
{
color: orange;
}
.wrapper {
margin: 0px;
padding: 0px;
height: 128px;
display: flex;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
padding-bottom: 400px;
justify-content: center;
}
canvas {
border: 0px;
width: 512px;
height: 512px;
background: black;
image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
image-rendering: pixelated;
-ms-interpolation-mode: nearest-neighbor;
}
#centered
{
text-align: center;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h1></h1>
<ul>
<li>Games</li>
<li>Software & Experiments</li>
<li>About</li>
</ul>
<hr style="margin-left: 55px; width: 48px">
<h2>Games</h2>
<p>I love making games. Here's a selection of my output. The purpose of any game is to be played, so I'd love to <a href=about.html>hear</a> from anyone who plays any of these!</p>
<br>
<table>
<tr>
<td>
<img src="../images/thumbnails/textadventurethumb.png" title="Text Adventure" alt="Text Adventure" style="float:left;"></td>
<td><span class="date">[2020]</span> A work-in-progress text adventure.</td>
</tr>
<tr>
<td>
<img src="../images/thumbnails/pointandclickthumb.png" title="Point-and-Click Adventure" alt="Point-and-Click Adventure" style="float:left;"></td>
<td><span class="date">[2020]</span> A work-in-progress 'point-and-click' adventure.</td>
</tr>
<tr>
<td>
<img src="../images/thumbnails/babydumpthumb.png" title="Text Adventure" alt="Text Adventure" style="float:left;"></td>
<td><span class="date">[September 2020]</span> Earn money by having (and abandoning) babies.</td>
</tr>
<tr>
<td>
<img src="../images/thumbnails/blackdeaththumb.png" title="Black Death" alt="Black Death" style="float:left;"></td>
<td><span class="date">[August 2019]</span> Play as bubonic plague and try to wipe out the villagers.</td>
</tr>
<tr>
<td>
<img src="../images/thumbnails/thecrawlthumb.png" title="The Crawl" alt="The Crawl" style="float:left;"></td>
<td><span class="date">[March 2019]</span> A mini dungeon crawling platform game.</td>
</tr>
</table>
<br>
<br>
<p id="centered">
-Ladesoft-
</p>
<br>
</body>
</html>
Related
On the desktop everything works great but on mobile devices it doesn't accept a single CSS change.
(Background, writing on the pictures, text colour etc.)
My homepage is: https://julianjonathanjohnson.ch/
What have I tried so far:
- images reduced to far below 5Mb
- body{background:green}
body:after{content: "mobile"}
#media screen and (min-width:481px){
body{background:blue}
body:after{content: "481px and larger"}
}
#media screen and (min-width:769px){
body{background:red}
body:after{content: "769px and larger"}
}
My HTML is: (a mess ithink but order in chaos for me :D )
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> DogeWall </title>
<script src="js.js"></script>
<link rel="stylesheet" href="CSS.css">
</head>
<body id="page-wrap">
<h1>Hello dear DOGE HODLER <br> Welcome to DogeWall <br> the hall of fame <br> for the first to walk on the moon.</h1>
<ol>
<li class="P1">
<div class="TxtBild1">
<img src="Bilder/MoonBg.jpg" width="500" height="300">
<span> <strong> citation example: Name: Date: <br>
<em> "To the moon and much further"</em></strong> </span>
<span1> <ul>
<strong>I take with me <br> to the MOON: </strong>
<li>Toiletpaper</li>
<li>Fish snacks</li>
<li>Bulldozer</li>
<li> I donated <br> xxxyyz DOGE</li>
</ul> </span1></div></li>
<li class="P2">
<div class="TxtBild2">
<img src="Bilder/MoonBg.jpg" width="500" height="300">
<span> <strong> citation example: Name: Date: <br>
<em> "To the moon and much further"</em></strong> </span>
<span2> <ul>
<strong>I take with me <br> to the MOON:</strong>
<li>Toiletpaper</li>
<li>Fish snacks</li>
<li>Bulldozer</li>
<li> I donated <br> xxxyyz DOGE</li>
</ul> </span1></div></li>
</ol></body></html>
And my CSS is :
#page-wrap {
width: 800px;
margin: auto;
}
body {
background-image:url("Bilder/MoonBg.jpg") ;
background-size: cover;
background-attachment: fixed;
background-position: center;
color: bisque;
}
h1 {
text-align: center;
}
.TxtBild1 {
width: 500px;
height: 300px;
position: relative;
border: 5px solid rgb(0, 0, 0);
}
.TxtBild1 span {
background-color: silver;
background-color: hsla(0, 0%, 100%, 0.5);
position: absolute;
bottom: 5%;
width: 100%;
height: 20%;
line-height: 2em;
text-align: center;
font-family: Garamond, serif;
border-radius: 50%;
}
.TxtBild1 img{
display: block;
}
span1 {
position: absolute;
top: 0;
line-height: 2em;
text-align: center;
font-family: Garamond, serif;
border-radius: 50%;
}
.TxtBild2 {
width: 500px;
height: 300px;
position: relative;
border: 5px solid rgb(0, 0, 0);
}
.TxtBild2 span {
background-color: silver;
background-color: hsla(0, 0%, 100%, 0.5);
position: absolute;
bottom: 5%;
width: 100%;
height: 20%;
line-height: 2em;
text-align: center;
font-family: Garamond, serif;
border-radius: 50%;
}
.TxtBild2 img{
display: block;
}
span2 {
position: absolute;
top: 0;
line-height: 2em;
text-align: center;
font-family: Garamond, serif;
border-radius: 50%;
}
PS: The plan of my project is that it should look as simple everywhere as it does on the desktop.
I want to be able to easily duplicate the individual images with text on them, but still change their colour, background etc. easily, so I think my current chaotic looking approach is easily changeable.
EDIT:
The problem is found and funny, the code was all fine, my mobile device was the problem, other phones worked fine and when i used icognito on my phone it worked too, finally an problem with google options.
What kind of editor are you using? You're missing a beginning <head> tag.
https://jsfiddle.net/qy58gwdu/
Should work...
When I select "Open with Live Server" for my website, it looks great. The CSS is working correctly and it is doing what I want. But when I try to open the file for one of the pages directly from my computer (no VS Code), the CSS won't load. A page on my website with the exact same code that connects to the exact same CSS code (it is identical except is written in another language) looks perfect, but this one is crap. Any ideas on how to trouble shoot?
* {
margin: 0px;
}
/* Extra-Small devices (small phones and whatnot, 600px and under) */
#media only screen and (max-width: 600px) {
.logo{
width:50%;
}
.tablelinks {
display: none;
}
.tdlinks {
display: none;
}
a,a:visited {
color:white;
text-decoration: none;
}
.menuimg{
width:10%;
height: auto;
float: right;
position: absolute;
top: 30px;
right: 15px;
display: none;
}
h3{
color: rgb(144,38,143);
}
.button{
top: 10px;
right: 10px;
position: absolute;
}
.dropdowncell{
font-family: Arial;
color:white;
font-size:2.7vw;
background-color: rgb(144,38,143);
padding: 10px;
text-align: center;
border-color: rgb(144,38,143);
margin:0px!important;
}
.dropdowntb{
border-collapse: collapse;
}
/*CONTENT*/
.boxmainmed{
display: none;
}
.boxmainsmall{
display: inline-block;
}
.kidsimage{
display: initial;
width: 100%;
margin-top: 20px;
}
h2 {
font-family:Arial;
color:rgb(0,121,194);
font-size: 2.2vw;
padding-top:20px;
line-height: 1.6;
text-align: center;
display: block;
}
p { /*line spacing*/
font-family:Arial;
color:black;
font-size:14px;
padding:10px 1vw;
line-height: 1.6;
text-align: center;
}
.whatwedo{
display: initial;
}
.txtbox{
border-top:3px solid rgb(0,121,194);
border-bottom:3px solid rgb(0,121,194);
margin: 40px;
padding-bottom: 30px;
}
/*SPONSORS*/
.sponsors {
display: inline-block;
background-color: rgb(144,38,143);
width: 100%;
}
h1 {
font-family:Arial;
color:white;
font-size:100%!important;
}
.chinesethankyou{
padding-top: 10px;
font-size: 100%;
text-align: center;
}
.plklogo{
width: 25vw;
height: auto;
}
.ubslogo{
width: 19.308vw;
height: auto;
}
.cell{
display: table-cell;
width: 33%;
text-align: center;
}
}
/* Small devices (tablets and whatnots, 600px and up)*/
#media only screen and (min-width: 600px) {
.logo{
width:30%;
}
.tablelinks {
display: none;
}
.tdlinks {
display: none;
}
a,a:visited {
color:white;
text-decoration: none;
}
.menuimg{
width:10%;
height: auto;
float: right;
position: absolute;
top: 30px;
right: 15px;
display: none;
}
h3{
color: rgb(144,38,143);
}
.button{
top: 20px;
right: 20px;
position: absolute;
}
.dropdowncell{
font-family: Arial;
color:white;
font-size:2.3vw;
background-color: rgb(144,38,143);
padding: 10px 15px;
text-align: center;
border-color: rgb(144,38,143);
margin:0px!important;
}
.dropdowntb{
border-collapse: collapse;
}
/*CONTENT*/
.boxmainsmall{
display:none;
}
.kidsimage{
width: 100%;
height: auto;
position: static;
top: 0px;
}
h2 {
font-family:Arial;
color:rgb(0,121,194);
font-size: 2.2vw;
padding:20px 1vw;
line-height: 1.6;
display: inline;
font-weight: 700;
}
p { /*line spacing*/
font-family:Arial;
color:black;
font-size:14px;
line-height: 1.6;
padding:0px 10px;
display: inline-block;
border:1px solid white;
}
.txtbox{
width: 100%;
display: initial;
position: relative;
}
.whatwedo{
padding:30px 5vw;
width: 100vw;
display: table;
z-index: inherit;
column-width: 50%;
margin: 40px 0px;
}
/*SPONSORS*/
.sponsors {
display: inline-block;
background-color: rgb(144,38,143);
width: 100%;
position: relative;
}
h1 {
font-family:Arial;
color:white;
font-size:100%!important;
text-align: center;
}
.chinesethankyou{
padding-top: 10px;
font-size: 100%;
text-align: center;
}
.plklogo{
width: 25vw;
height: auto;
}
.ubslogo{
width: 19.308vw;
height: auto;
}
.cell{
display: table-cell;
width: 33%;
text-align: center;
}
}
/* Large devices (laptops/desktops, 992px and up)*/
#media only screen and (min-width: 992px) {
/*HEADER*/
.logo{
height: auto;
width: 21%;
display: initial;
}
.tablelinks {
margin:1.8vw 1.8vw 0px 0px;
width: 77%;
float: right;
position: absolute;
top:0px;
right:0px;
display: table;
}
.tdlinks {
font-family:Arial;
color:rgb(144,38,143);
font-size: 1.75vw;
font-weight: bold;
text-align: center;
width: auto;
padding: .7vmin 1vmin;
display: table-cell;
}
a,a:visited {
color: rgb(144,38,143);
text-decoration: none;
display: inline;
min-inline-size: 50px;
}
.dropdownmenu{
display: none;
}
/*CONTENT*/
.boxmainmed{
display: none;
}
.boxmainsmall{
display: inline-block;
position: relative;
height: 600px;
width: 100%;
}
.kidsimage{
overflow: hidden;
width: auto;
height: inherit;
display: inline-block;
z-index:-2;
position: relative;
}
h2 {
font-family:Arial;
color:rgb(0,121,194);
font-size: 2.2vw;
padding:15px 0px;
line-height: 1.6;
display: inline;
text-align: center;
font-weight: 700;
}
p { /*line spacing*/
font-family:Arial;
color:black;
font-size:14px;
line-height: 1.6;
padding:10px 1vw;
display: inline;
border: none;
}
.txtbox{
width: 48%;
height: inherit;
float: right;
display: initial;
position: absolute;
left:65vw;
margin-right: 30px;
min-width: 410px;
background-color: rgba(255,255,255,1);
}
.whatwedo{
padding-left:30px;
margin:auto;
width:75%;
min-width: 375px;
height: inherit;
display: table;
z-index: inherit;
float: left;
top: 0px;
}
/*SPONSORS*/
.sponsors {
display: inline-block;
background-color: rgb(144,38,143);
width: 100%;
margin: auto;
position: relative;
}
h1 {
font-family:Arial;
color:white;
font-size:30px!important;
}
.plklogo{
width: 250px;
height: auto;
margin: auto;
}
.cell{
display: table-cell;
text-align: center;
margin: auto;
}
}
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>LTP | Aims & Objectives</title>
<link rel="shortcut icon" href="ltpicon.ico" type="image/x-icon"/>
<meta name="description" content="Welcome to Language Training Programme">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta name="Microsoft Theme" content="none, default">
<meta name="Microsoft Border" content="none, default">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="stylingaims.css" type="text/css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!--WHY SPACING SOMETIMES WRONG??-->
</head>
<body>
<header>
<img class="logo" src="ltplogo.PNG">
<nav>
<table class="tablelinks">
<tr>
<td class="tdlinks">Aims & Objectives</td>
<td class="tdlinks">News</td>
<td class="tdlinks">Careers</td>
<td class="tdlinks"><a href=photogalwip.html>Photo Gallery</a></td>
<td class="tdlinks">Contact Us</td>
</tr>
<tr>
<td class="tdlinks">宗旨</td>
<td class="tdlinks">最新消息</td>
<td class="tdlinks">職位空缺</td>
<td class="tdlinks">圖片集</td>
<td class="tdlinks">聯絡我們</td>
</tr>
</table>
<div class="w3-container dropdownmenu">
<button onclick="myFunction('Demo1')" class="w3-btn button"><h3>Menu</h3><img class="menuimg" src="Hamburger_icon.png"></button>
<div id="Demo1" class="w3-hide w3-jumbotron">
<table class="dropdowntb">
<tr>
<td class="dropdowncell">Aims & Objectives</html></td>
<td class="dropdowncell">News</html></td>
<td class="dropdowncell">Careers</html></td>
<td class="dropdowncell"><a href=photogalwip.html>Photo Gallery</a></html></td>
<td class="dropdowncell">Contact Us</td>
</tr>
<tr>
<td class="dropdowncell">宗旨</html></td>
<td class="dropdowncell">最新消息</html></td>
<td class="dropdowncell">職位空缺</html></td>
<td class="dropdowncell">圖片集</html></td>
<td class="dropdowncell">聯絡我們</html></td>
</tr>
</table>
</div>
</div>
<script>
function myFunction(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
}
else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</nav>
</header>
<div class="boxmainsmall">
<img class="kidsimage" src="ltpstcokphoto_nofade.jpeg"> <!--GET LTP PICTURE-->
<div class="txtbox">
<table class="whatwedo">
<tr><td><h2>Aims and Objectives</h2></td></tr>
<tr><td>
<p>The LTP aims to help every child aged 3 to 18 years in residential care at Po Leung Kuk to become biliterate (able to read and write Chinese and English) and trilingual (able to speak and understand Cantonese, Putonghua, and English). We strive to achieve this through</p>
<ul>
<li><p>Formal English classes for children and young people from K 1 through Secondary levels,</p></li>
<li><p>Elective sessions for Secondary students to develop business and study skills and hobbies through English,</p></li>
<li><p>Formal Putonghua classes for children from K 1 to P 6 levels,</p></li>
<li><p>Storyteller sessions for all children and young people aged 2 – 18 years,</p></li>
<li><p>Informal activities to allow the children and young people to practice their language, and</p></li>
<li><p>Celebrations of social and cultural festivals</p></li>
</ul>
</td></tr>
</table>
</div>
</div>
<div class="boxmainmed">
<img class="kidsimage" src="ltpstcokphoto_nofade.jpeg"> <!--GET LTP PICTURE-->
<div class="txtbox">
<table class="whatwedo">
<tr><td><h2>Aims and Objectives</h2></td></tr>
<tr><td>
<p>The LTP aims to help every child aged 3 to 18 years in residential care at Po Leung Kuk to become biliterate (able to read and write Chinese and English) and trilingual (able to speak and understand Cantonese, Putonghua, and English). We strive to achieve this through</p>
<ul>
<li><p>Formal English classes for children and young people from K 1 through Secondary levels,</p></li>
<li><p>Elective sessions for Secondary students to develop business and study skills and hobbies through English,</p></li>
<li><p>Formal Putonghua classes for children from K 1 to P 6 levels,</p></li>
<li><p>Storyteller sessions for all children and young people aged 2 – 18 years,</p></li>
<li><p>Informal activities to allow the children and young people to practice their language, and</p></li>
<li><p>Celebrations of social and cultural festivals</p></li>
</ul>
</td></tr>
</table>
</div>
</div>
</div>
<table class="sponsors" width="100%" id="plswork">
<tr>
<td class="cell" style="width:33%;"><h1>Thank You Sponsors</h1></td>
<td class="cell" style="width:33%;"><h1>谢谢赞助商</h1></td>
<td class="cell" style="width:33%;"><img src="Po-Leung-Kuk-logo.png" class="plklogo"></td>
<!--LOOKS BAD IN EXPLORER??-->
</tr>
</table>
</body>
I had the same problem. In my case, it was caused by a typo in the file path of my css. I have no idea why liver server ignored it and put the file correctly anyways.
The problem was that I had:
<link href="/style.css">
Instead of:
<link href="style.css">
So check your files paths. Maybe the problem is there.
Basic live server is configured to launch in the Root folder of the server.
So the relative path for the CSS file will change depending on the launch via live server or directly from the browser.
If I understood correctly.
I encountered this error.
Launch the VSCode "Go Live" server from the website root folder
I had this issue because I launched the live server while working in a VSCode in a folder above the html folder where my .html files—my project (and GIT repo) are a level higher. I thought it was a browser issue, searched and found many misleading "solutions".
However, after reading Yannh's answer it occurred to me to open a new VSCode window of just my website root "html" folder; hitting "Go Live" from there launched the site complete with CSS.
I kept my original working window (with the full GIT repo) open, making changes there which were reflected on save in the live local browser preview.
Maybe you use SCSS file and it's not compiled?
Have you used SCSS for styling?
Assuming that you have used SCSS,
Browsers can't interpret SCSS files, so VS Code has an extension for converting SCSS to CSS and linking it to your html file, maybe that's why your file loads while using live server.
Try using https://jsonformatter.org/scss-to-css to convert your SCSS into CSS and then link it to HTML.
I had the same problem. The reason was that live-server shows mit the page with 25% scaling. Don't know why.
So everything which I have coded was 75% too large.
I am trying to make a website and am running into an issue of not being able to remove a chunk of white space.
I am using an image as a background and want the main text and logo to be in the middle of the background image.
I have tried using overflow-x: hidden; as well as messing with margin, padding, width and height values of different elements in the css file but, I cannot get it to work. I tried to set the width and height bigger but it won't expand to any size screen.
I haven't had this issue before and do not know why it is happening now.
My Code:
h1 {
font-family: "times new roman";
font-size: 2.5em;
color: rgb(100, 181, 204);
}
#box {
border-width: 0.25em;
border-style: solid;
border-color: black;
width: 50em;
margin-left: auto;
margin-right: auto;
padding: 1em;
font-family: sans-serif;
color: black;
background: rgb(135, 129, 140);
}
div {
margin: 0 auto;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
p {
font-size: 1.2em;
}
.centertext {
text-align: center;
width: 60%;
margin-left: auto;
margin-right: auto;
}
#logo {
margin-top: .5em;
margin-left: 13.7em;
margin-right: auto;
padding: 0em 0em 0em 0em;
}
#background {
position: absolute;
z-index: -1;
left: -40px;
top: -88px;
width: 100%;
height: 100%;
padding: 0 0 0 0;
margin: 0 auto;
}
footer {
display: block;
background: rgb(81, 40, 117);
padding: 0.1em;
border-width: thin;
border-style: solid;
border-color: black;
clear: right;
}
#mainnav {
border-width: .1em;
border-style: solid;
border-color: black;
width: 40em;
padding-left: 0em;
margin-left: auto;
margin-right: auto;
text-align: center;
background: rgb(81, 40, 117);
}
#mainnav a:link {
color: white;
}
#mainnav a:visited {
color: blue;
}
#mainnav a:hover {
color: black;
}
#mainnav a:active {
color: light gray;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Christie Matterns Portfolio website</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<img id="logo" src="images/logo.jpg" width="840" height="200" />
<div id="box">
<div>
<p id="mainnav">
Home |
Who am I? |
Questionair |
</p>
</div>
<h1 class="centertext">My Portfolio</h1>
<p class="centertext">
Hello, My name is Christie Mattern, I am a web designer!
</p>
<p>
I am based in Fort Wayne, Indiana and this website is my portfolio! I will use it to tell you a bit about me and to show my work progress.
<footer>
<p class="centertext">
Christie Mattern
</p>
</footer>
</div>
</body>
<img id="background" src="images/background.jpg" />
</html>
This is happening because your background image is outside your <body> tag.
There's better and more maintainable ways of doing what you're trying to do, without all that "hacking".
I'll try to modify a bit of your code and comment it out so you can understand it a bit more.
Using images as a background
When you want to use an image as a background, use it as a CSS background-image Property. There's some occasions it would be better to use the way you were trying to use it, but generally and for this specific case background-image is more suitable.
.myElement {
background-image: url("paper.jpg");
}
If you want your text centralized inside of an element with a background, wrap your content with a new element, insert the content inside of it, and then give to this new element the background-image property.
<div class="newElement">
<div class="content-wrapper">
<h2>Your Title Goes Here</h2>
<p>Your Description Goes Here</p>
</div>
</div>
.newElement{
background-image: url("paper.jpg");
}
All together your code should look something like this:
/* New Code Added */
.newElement {
background-image: url(http://lorempixel.com/400/400/abstract/);
background-repeat: no-repeat; /* Makes background nto repeat */
background-size: cover; /* Sets background size as a cover */
background-color: #cccccc;
padding: 2rem; /* Give the padding here instead of logo to avoid "breadking" the image's 100% width. A lesson for another day */
}
/* Old Code. Check comments */
h1 {
font-family: "times new roman";
font-size: 2.5em;
color: rgb(100, 181, 204);
}
#box {
border-width: 0.25em;
border-style: solid;
border-color: black;
/* width: 50em; No need for this being added */
margin-left: auto;
margin-right: auto;
padding: 1em;
font-family: sans-serif;
color: black;
background: rgb(135, 129, 140);
}
div {
margin: 0 auto;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
p {
font-size: 1.2em;
}
.centertext {
text-align: center;
width: 60%;
margin-left: auto;
margin-right: auto;
}
#logo {
width: 100%;
max-width: 840px; /* Sets a max-width. Same size of the picture's width. So we avoid image losing focus when the screen gets bigger */
height: auto; /* automatically follows the lead of the width, scalling the image equally without distortion */
margin: 0 auto; /* Centers image horizontally */
display: block; /* Needed for the horizontal center */
}
footer {
display: block;
background: rgb(81, 40, 117);
padding: 0.1em;
border-width: thin;
border-style: solid;
border-color: black;
clear: right;
}
#mainnav {
border-width: .1em;
border-style: solid;
border-color: black;
/* width: 40em; No need for this being added */
padding-left: 0em;
margin-left: auto;
margin-right: auto;
text-align: center;
background: rgb(81, 40, 117);
}
#mainnav a:link {
color: white;
}
#mainnav a:visited {
color: blue;
}
#mainnav a:hover {
color: black;
}
#mainnav a:active {
color: light gray;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Christie Matterns Portfolio website</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div class="newElement">
<div class="content-wrapper">
<img id="logo" src="http://lorempixel.com/840/200/food/" width="840" height="200" />
</div>
</div>
<div id="box">
<div>
<p id="mainnav">
Home |
Who am I? |
Questionair |
</p>
</div>
<h1 class="centertext">My Portfolio</h1>
<p class="centertext">
Hello, My name is Christie Mattern, I am a web designer!
</p>
<p>
I am based in Fort Wayne, Indiana and this website is my portfolio! I will use it to tell you a bit about me and to show my work progress.
<footer>
<p class="centertext">
Christie Mattern
</p>
</footer>
</div>
</body>
</html>
If you wanted a background image for all the website, just move the
background-image attributes to the body tag instead.
body {
background-image: url("paper.jpg");
}
Removing the width you were adding to the box and mainnav
elements, the content even becomes responsive so it's ready for mobile
devices.
Read more about background-image and its properties.
Not sure if I understood your question a 100%, but if you're trying to get the background image to cover the entire document, try wrapping it around the entire document with a css property.
Example: remove the img tag that you have.
<body id="background">
<!-- rest of your code here -->
</body>
then in the css add background-image to reference your img under the id background :
#background {
background-image: url("images/background.jpg");
}
I would like to print this HTML table with the elements displayed with rounded borders, but as soon as I print the page the CSS class seems not to be displayed anymore. Can anyone help?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.hashtag {
display: inline-block;
color: white;
font-size: 20px;
background-color: rgba(46, 200, 40, 0.5);
margin-left: 1px;
margin-right: 1px;
margin-top: 1px;
margin-bottom: 1px;
padding: 0.0em 0.5em;
border-radius: 1em;
text-indent: 0;
text-align: center;
}
</style>
</head>
<body>
<tr>
<td>
<p class="hashtag" align="center">CSS</p>
<p class="hashtag" align="center">WON'T</p>
<p class="hashtag" align="center">PRINT</p>
</td>
</tr>
</body>
</html>
You are using white text on a dark background. But most browsers don't print background images or background colors by default, which will result in white text on no/white background in your case, i.e. it will remain invisible.
It is possible to print background colors, but that's a browser preference/setting that can only be set/changed by the user, not via CSS or any other code in the website.
You are trying to print white text on a colored background, but most browsers will not print backgrounds by default (or if they do, then it is because the user has changed a setting to enable it).
You can prepare for this using a #media print { ... } addition to your stylesheet, which changes the applied style so it will print more nicely. For an example see the snippet below:
.hashtag {
display: inline-block;
color: white;
font-size: 20px;
background-color: rgba(46, 200, 40, 0.5);
margin-left: 1px;
margin-right: 1px;
margin-top: 1px;
margin-bottom: 1px;
padding: 0.0em 0.5em;
border-radius: 1em;
text-indent: 0;
text-align: center;
}
#media print {
.hashtag {
color: black;
background-color: white;
border: 1px solid black;
}
#btnPrint {
display: none
}
}
<p class="hashtag" align="center">CSS</p>
<p class="hashtag" align="center">WILL</p>
<p class="hashtag" align="center">PRINT (B/W)</p>
<button id="btnPrint" onclick="window.print()">Print</button>
I have 4 DIVs and I need them all to be sticked together. I have a white space between and only between first 2 DIVs and I don't know why. Any advices and a possible explanation? I don't have any padding of so, making this quite annoying.
#font-face {
font-family: FONT;
src: url(Montserrat-Regular.ttf);
}
p.title1 {
font-size: 2.5em;
}
p.title2 {
font-size: 3em;
}
div.surf1 {
display: block;
/*background-image: url("surf1.jpg");*/
background: #41c3ac;
background-position: center;
background-size: cover;
height: 600px;
}
div.surf2 {
display: block;
background: #41c3ac;
height: 600px;
}
div.surf3 {
display: block;
background: #ff6b57;
height: 600px;
}
div.surf4 {
display: block;
background: #8C78B1;
height: 600px;
}
div.text1 {
padding-top: 100px;
color: white;
text-align: center;
font-size: 2.5em;
}
div.button {
text-align: center;
font-size: 1.5em;
margin: 0 auto;
width: 15%;
padding: 8px;
border: 2px solid;
border-color: #e7dd84;
background-color: rgba(236, 229, 167, 0.2);
color: #e7dd84;
transition: 0.35s;
}
div.button:hover {
background-color: white;
color: black;
border-color: white;
transition: 0.35s;
}
body {
margin: 0;
font-family: FONT;
color: white;
}
<!doctype html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="surf1">
<div class="text1">
<b>Welcome to smartlearning.com, <br>the place where you can <br>learn and practice English</b>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="button">
Go to site
</div>
</div>
<div class="surf2">
<p class="title1">Interractive games</p>
<ul style="font-size: 1.5em">
<li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
<li>Those games are designed to help you learn and practice english by combining fun with hard-working.</li>
</ul>
</div>
<div class="surf3"></div>
<div class="surf4"></div>
<body>
</body>
</html>
The default margin-top on the nested p element is collapsing vertically, which essentially creates an equal margin-top on the parent .surf2 element (that is why you are seeing a space).
According to the spec, this doesn't occur if you establish a new block formatting context, which means that one option would be to set the overflow of the .surf2 element to something other than the default value visible. Changing it to auto or hidden would resolve the issue.
.surf2 {
background: #41c3ac;
height: 600px;
overflow: auto;
}
#font-face {
font-family: FONT;
src: url(Montserrat-Regular.ttf);
}
p.title1 {
font-size: 2.5em;
}
p.title2 {
font-size: 3em;
}
div.surf1 {
display: block;
/*background-image: url("surf1.jpg");*/
background: #41c3ac;
background-position: center;
background-size: cover;
height: 600px;
}
div.surf2 {
display: block;
background: #41c3ac;
height: 600px;
overflow: auto;
}
div.surf3 {
display: block;
background: #ff6b57;
height: 600px;
}
div.surf4 {
display: block;
background: #8C78B1;
height: 600px;
}
div.text1 {
padding-top: 100px;
color: white;
text-align: center;
font-size: 2.5em;
}
div.button {
text-align: center;
font-size: 1.5em;
margin: 0 auto;
width: 15%;
padding: 8px;
border: 2px solid;
border-color: #e7dd84;
background-color: rgba(236, 229, 167, 0.2);
color: #e7dd84;
transition: 0.35s;
}
div.button:hover {
background-color: white;
color: black;
border-color: white;
transition: 0.35s;
}
body {
margin: 0;
font-family: FONT;
color: white;
}
<!doctype html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="surf1">
<div class="text1">
<b>Welcome to smartlearning.com, <br>the place where you can <br>learn and practice English</b>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="button">
Go to site
</div>
</div>
<div class="surf2">
<p class="title1">Interractive games</p>
<ul style="font-size: 1.5em">
<li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
<li>Those games are designed to help you learn and practice english by combining fun with hard-working.</li>
</ul>
</div>
<div class="surf3"></div>
<div class="surf4"></div>
<body>
</body>
</html>
That's just one work around. See the spec for the specific rules relating to collapsing margins. You could also simply remove the margin from the p element.
For all your surf# classed elements, set their overflow to auto.
It appears that the margin on the children on the 2nd div is pushing the first div up.
I recommend either adding a unifying class to those elements or use this rule:
[class^="surf"] {
overflow: auto;
}
You need to set the class="title1" margin to 0px. -> margin: 0;