I have a web server running on linux Redhat with apache.
My server hosts the 'font awesome' fonts.
When requesting the web pages from another computer, if Chrome is used the icons are correctly displayed. If ie9 is used the icons are not displayed.
If the 'font awesome' page is opened with ie9 or chrome, the icons are correctly displayed.
I read other posts, I changed the #font_face, I still can not manage to display the icons of my pages with ie9?
Any ideas where to look?
Thank you
Ben
I found out what was the problem. It was a wrong declaration in the DOCTYPE tag, just put DOCType html and it worked out.
in case this problem occurs to you, use the 'font awesome' web page as a reference and compare with your page.
I copied the 'font awesome' page and modified to check against my page.
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
float: left;
margin-left: 5px;
}
ul li a {
text-decoration: none;
padding: 8px 12px;
color: #FFF;
background: #545454;
font-size: 20px;
border-radius: 50%;
transition: color 0.3s ease-in-out;
-webkit-transition: color 0.3s ease-in-out;
}
ul li a:hover {
color: #C86565;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Habitath</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="Habitath a online coach hiring website" />
<meta name="keywords" content="habitath, ecosystem, online coach website" />
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Squada+One" rel="stylesheet">
</head>
<body>
<ul>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-github"></i></li>
</ul>
</body>
</html>
Related
I am creating a personal website in html and am trying to add a background image to the "index.html" page. I have pasted my the index.html and style.css code below:
HTML File:
<!DOCTYPE html>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital#0;1&display=swap" rel="stylesheet">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Jack Hanel</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
Gallery
Education
<h1>Hello, I'm Jack Hanel</h1>
<img src="Photos/headshot.jpeg" height="257" width="207">
<p>Age: {age}</p>
<p>Date of Birth: 08/30/1998</p>
<p>Gender: Male</p>
<p>Height: 5'10"</p>
<p>Weight: 165 lbs</p>
<p>Born: Phoenix, AZ</p>
<p>Raised: Greenville, SC</p>
<p>Current Location: Charlotte, NC</p>
LinkedIn
Twitter
Instagram
Replit
</body>
</html>
CSS File:
<style>
body {
background-image: url(Photos/AbstractWallpaper.png);
}
h1 {
font-family: 'EB Garamond', serif;
font-size: 28px;
}
a {
font-family: 'EB Garamond', serif;
background-color: lightgrey;
padding: 4px
}
p {
font-family: 'EB Garamond', serif;
font-size: 18px;
background-color: lightgrey;
padding: 4px
}
img {
margin: 4px
}
</style>
I've added the same background-image code line to the h1 tag, and it applies, although only showing the very top of the image. So I know the background-image code itself isn't the problem. Please help! Also, any other general advice is appreciated, I am brand new to HTML and CSS.
Thank You
I've tried adding the background-image element to the h1 tag, and it worked, although it only showed the very top of the image. But when I apply this line of code to the body tag, nothing appears.
I recently started trying to learn webdesign and I've already jumped into my first project. I've created a template in photoshop but I'm having trouble reproducing it in my visual studio code. Any help would be awesome. I've included my questions in the CSS comments. Also, not very relevant but, these past 3-4 days of this new learning experience have been great and very challenging! Would love some general coding tips if possible. Sorry for being an absolute noob. My first project ideal outcome
body {
margin: 0;
background-color: #282828;
}
/* how can I make the navbar go a few pixels down? like in the photo */
.navbar {
width: 100%;
float: left;
background-color: #cb209d;
}
/* can't make the searchbox go to the left side of the navbar :( */
.searchbox {
float: left;
}
/* how am I supposed to center the social logos without using position: absolute? */
li {
list-style: none;
float: right;
border-right: 1px solid #282828;
display: inline-block;
font-size: 35px;
padding: 0px 25px;
color: #282828;
}
/* Can't seem to fix these vertical dividers... I know, I'm a handful :/ */
li:last-child {
border-right: none;
}
#u2b {
border-right: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script
src="https://kit.fontawesome.com/f77b4d6781.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="style.css" />
<title>first project</title>
</head>
<body>
<!-- top navigation bar -->
<div class="navbar">
<ul>
<li id="u2b"><i class="fab fa-youtube" aria-hidden="true"></i></li>
<li><i class="fab fa-facebook" aria-hidden="true"></i></li>
<li><i class="fab fa-instagram" aria-hidden="true"></i></li>
<li>
<input
class="searchbox"
type="text"
name=""
placeholder="Search me fam"
id=""
/>
</li>
</ul>
</div>
</body>
</html>
How can I make the navbar go a few pixels down? like in the photo?
Margin or Paddings, how to decide? Consider your HTML layout.
Can't make the search box go to the left side of the navbar?
Research about flexbox and study your layout, it's widely supported as well.
The last 3 answers can also be answered by good use of HTML layout and flexbox.
I would suggest you to research more about the display property as well
Once you've read the CSS Tricks Article, play around with Flexbox Froggy
I have an issue and i really dont know how to solve it because of my lack of knowledge( i am a begginer) . Well let me explain you. I am building a blogspot, so i have a header and a footer files which I want to get loaded in every .html files in the project. In order to achieve that I used a script which I found in stack overflow.
The script works fine but I have some minor issues with it. But before continue, let me paste my index.html and header.html and my css files to understand better. This is my index.html file which includes the script.
<!doctype html>
<html lang="en">
<head>
<title>The Spooky Side</title>
<meta charset="utf-8">
<meta name="description" content="Front Page">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="articles-box.css">
<link rel="stylesheet" href="``header-footer-style.css">
<link href="https://fonts.googleapis.com/css?
family=Anton|Dosis|Montserrat|Nosifer&display=swap" rel="stylesheet">
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("#header-id").load("header.html");
$("#footer-id").load("footer.html");
});
</script>
</head>
<body>
<div class="header-cl" id="header-id"></div>
<div class="footer-cl" id="footer-id"></div>
</body>
</html>
This is the header.html file
<!doctype html>
<html lang="en">
<head>
<title>The Spooky Side</title>
<meta charset="utf-8">
<meta name="description" content="Header Page">
<link href="https://fonts.googleapis.com/css?
family=Anton|Dosis|Montserrat|Nosifer&display=swap" rel="stylesheet">
<link rel="stylesheet" href="header-footer-style.css">
</head>
<body>
<div class="header-cl" id="header-id">
<a class="header-company-name" href="">The Spooky Side</a>
<a class="header-content" id="about1" href="">About</a>
<a class="header-content" href="../blog/blog.html">Blog</a>
<a class="header-content" href="">Contact</a>
</div>
</body>
And finally this is my css file.
/*H E A D E R */
.header-cl{
display:flex;
grid-column:1/-1;
background-color: white;
}
.header-company-name{
font-family: 'Nosifer', cursive;
color:black;
font-size: 2em;
padding-top:17px;
padding-left:30px;
text-decoration:none;
transition-duration: 1.2s;
}
.header-content{
font-family: 'Dosis', sans-serif;
color:black;
font-size: 1.6em;
text-decoration:none;
padding: 20px;
transition-duration: 0.7s;
/*^^^space between buttons^^^*/
}
/*F O O T E R */
.footer-cl {width : 100%;grid-column:1/-1;background-color:
black;color:white;
}
.footer-company-name {
display:flex;
justify-content: center;
align-items: center;
font-family: 'Dosis', sans-serif;
font-size: 1.4em;
padding-top:20px
}
.footer-content{
display: flex;
justify-content: center;
align-items: center;
margin:0px;
}
.footer-anchors{
font-family: 'Dosis', sans-serif;
color:white;
font-size: 1em;
text-decoration:none;
}
/*HOVERS DAMN*/
.header-content:hover{
color: #FF0000;
}
.footer-anchors:hover {
color: #510000;
}
.header-company-name:hover{
color:#FF0000;
}
/*I D S */
#about1{
margin-left: auto;
}
/*space between blog's name and other options */
And now which is the issue. I am going to post three screenshot. When I run the header.html I got this result which is the right one,(I dont post the footer.html because is the same with the header)which is looks like this.
header.html
But when I run the index.html in the Atom it looks like this.
index.html run in Atom
And finally when I run my code in google chrome it looks like this[Index HTML run in google chrome3
As you can see this is my problem. In google the header and the footer are not displayed,and i really dont know why. But in the atom the index.html displays the header but without the correct form, and finally in the header.html when I run it its correct. Anyone have idea why this happening or how can I fix that?
how folder looks
It looks like you need to load a fragment (just the contents of #header-id from header.html into #header-id on index.html)
Try this:
$("#header-id").load("header.html #header-id");
https://api.jquery.com/load/#loading-page-fragments
I have been banging my head on the table trying to figure out why this happens. I have set up an anchor that has padding on the top, bottom, and left sides. Inside that anchor is two text elements and as the background of the anchor is an image.
Now when I zoom out (not shrinking the viewport) in chrome, everything seems to shrink as expected until I hit 80%. At this point the content continues to shrink but not the padding on the left side! In FireFox it seems to work as expected.
Attached is my code, please any ideas on how to explain this will be appreciated.
html {font-family: 'tex gyre heros', helvetica, arial, sans-serif; font-weight: normal; font-style: normal; font-size: 10px}
a,a:link,a:visited,a:hover {text-decoration: none; color: inherit;}
.logo {
padding: 10em 10em 0 0;
background: url(../images/some-image.svg) left center no-repeat;
display: inline-block;
vertical-align: bottom;
}
.logo.main {
padding: 1.2em 0 2.1em 12em;
}
.logo.main .logotype, .logotype.block {
display: block;
}
.logotype {
font-weight: bold;
white-space: nowrap;
}
.logotype.title {
font-size: 4em;
line-height: 1.1;
color: #646469;
}
.logotype.subtitle {
padding: 0 0 0 0.078em;
font-size: 2.1em;
line-height: 1.1;
color: #000000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Company">
<base href="">
<title>Company</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" charset="utf-8"/>
<link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/>
<link rel="stylesheet" href="css/default.css" type="text/css" media="screen" charset="utf-8"/>
</head>
<body>
<header>
<a class="logo main" href="">
<span class="logotype title">Line 1</span>
<span class="logotype subtitle">Line 2</span>
</a>
</header>
<section>
</section>
<footer></footer>
</body>
</html>
The issue here comes from the difference in pixel representation between browsers. Meaning - Chrome and Firefox might handle some fixed pixel values differently (don't ask me why, its just how the world functions with everything).
Possible solution 1: Try and set the padding values in % so that they can be relative to each other.
Possible solution 2: This thread on CSS Tricks about not breaking the layout when zooming:
Possible solution 3: Check your viewport tags. Use this thread.
Like #DarkxPunk said, the link goes to the far left side on Firefox and somehow does not go to the far left in Chrome.
Issue visualization for further investigation:
Chrome:
Firefox:
I created a cocos2d-javascript game and am testing it on Chrome. The HTML of the webpage is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Testing</title>
<link rel="icon" type="image/GIF" href="res/favicon.ico"/>
<meta name="viewport" content="width=100%, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="full-screen" content="yes"/>
<meta name="screen-orientation" content="landscape"/>
<meta name="x5-fullscreen" content="true"/>
<meta name="360-fullscreen" content="true"/>
<style>
body, canvas, div {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
width: 100%;
height: 100%;
margin: 0px;
}
</style>
</head>
<body style="padding:0; margin: 0; background: #000; width:100%; height:100%; margin: 0px;">
<script src="res/loading.js"></script>
<canvas id="gameCanvas" width="100%" height="100%"></canvas>
<script src="frameworks/cocos2d-html5/CCBoot.js"></script>
<script cocos src="main.js"></script>
</body>
</html>
As you can see, I set it up so that the canvas will fit the whole page. This is how the game looks (it is by default 500x500):
If I resize the window, the canvas will generally resize correctly. But sometimes it will have some sort or margin:
What is wrong? I imagine the problem is the HTML itself, rather than cocos2d.
It only seems to occur with Chrome. Firefox seems fine.
I am using Mac OSX Yosemite.
Try:
*, html {
margin:0 !important;
padding:0 !important;
}
And I would suggest removing the properties inside the body style attribute(just for cleanliness), and leaving just properties inside the style tag inside the head.