Where is this image being generated on my webpage? [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I can't figure out where the chain link image is coming from on my blogger page (http://jareds94-wine.blogspot.com). Using Google Chrome's inspect feature I can see that it has something to do with hentry::before but it's not coming from the CSS so it must be coming form a javascript file right? Any help would be much appreciate as I'm trying to change it to another image.

It's not a bitmap image, but a character from the font awesome toolkit
.hentry:before {
content: "\f0c1";
z-index: 2;
font-family: FontAwesome;
}
Here \f0c1 relates to the character in the font which renders as a chain link

That "Image" is actually just a glyph supplied by FontAwesome.
It is being generated by your css like so:
.hentry:before {
content: "\f0c1";
z-index: 2;
font-family: FontAwesome;
}

Related

How do I put bootstrap navbar ON hero image [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I am using the Hero Image example code from W3Schools and the Bootstrap Navbar, and they won't connect. Like there's a little space in between filled with background color. StackOverflow wouldnt let me post the code here because it was too long, so here are the links:https://www.w3schools.com/howto/howto_css_hero_image.asp
https://www.w3schools.com/bootstrap/bootstrap_navbar.asp
https://kalpact.repl.co
Your navbar has an explicit bottom margin, coming from navbar.less:.
.navbar {
margin-bottom: #navbar-margin-bottom;
}
Ideally, you should find where "navbar-margin-bottom" is defined and change it to 0. But... I've searched for that definition and can't seem to find it anywhere. You may have to just add this to your main stylesheet:
.navbar {
margin-bottom: 0;
}

Why does z-index not work with sticky elements? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have some rollover effects in a sticky footer and a responsive menu / nav that sticks to the top. When the nav is opened and is long enough to go over the footer it covers everything except the rollovers.
nav closed http://www.musictheorytutorials.com/navclosed.png
nav open http://www.musictheorytutorials.com/navopen.png
I have tried lots of changes, searched on here and then tried to rebuild a simple version in jsfiddle as an example of it not working and it worked! However making these changes to my actual page do not...
Here is the jsfiddle that does work: /m_d_a/y7Lj3rms/26/
Here is rge jsfiddle that doesn't: /m_d_a/4bLyt681/5/
I can't get the code tags to work properly when cutting and pasting in either, sorry.
I know there is a lot of javascript, most of which is cut and pasted from linked js plug-in files which I don't understand, so I think it's gonna be something in there. If anyone can trudge through this I would really appreciate it. I will also change the title of this question to reflect a working answer to help people in the future.
Thank you.
just modify this selector in your css
from
.menu {
position: relative;
z-indez: 100;
}
to
.menu {
z-index: 100 !important;
}

HTML5 form layot issue with input field moving around [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a HTML5 form which does some calculations using jQuery.
I found an issue that I had never seen before - if someone can figure out why and from where it is coming - when I enter data in the input fields, they move up, and the span element - which is the result moves down:
bit.ly/1xXEEa0
Applying float:left for the inputs will fix the issue.
input {
width: 33%;
min-height: 30px;
float: left;
}

Floats / Margins in Firefox [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm having a weird issue that I appear to only see in Firefox. Chrome and surprisingly IE work just fine. The site that link below works fine in both of these browsers but in firefox the whole page gets pushed to the right while the #spotlightbar get pushed to the left. Im at a loss of what the problem may be. Any suggestions?
http://www.bristolymca.net/index.php
EDIT: So this has been solved. Thanks for the quick help to all.
SOLUTION: Obviously when you you float one div on a page inside of a content block either the rest needs to be floated as well or you need to clear the float before and after what you have floated. This was my mistake in misnaming CSS classes. So for future reference make sure those are the same name!
You have no styles on
<div id="contentHome">
Add some css like this;
#contentHome {
float: left;
width: 100%;
}
Well, my first suggestion would be to prevent using tables for layout elements and inline styling.
I removed the inline styling and added the following css properties to it:
width: 100%;
float: left;
That solved the problem to me.
PS: Pretty webpage, congrats!

My Background image doesn't show up and is not inspected in the browser [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I used mozila and I try to "inspect element" to see if my background image is there. The inspect element even doesn't show the css style mark up like background-image: blah blah; at all.
I am very sure that I have written the code correctly:
background-image: url ('social-icon/button.png');
Some discussion out there said that it may be caused of "javascript" and adviced to disable the javascript, but I don't know how to do that. Eventhough it is true that the problem is the javascript and it means that I can't use Javascript in my html file, it will be worse.
I am just confused?
EDITED :p
LOL, THE PROBLEM IS BECAUSE I HAVE A SPACE BETWEEN URL AND THE SOURCE. IT SHOULD BE LIKE
url{there is no space here}('social-icon/button.png');
It's so funny how we all can't see a little problem when our focus is to the another point of the question. :D :D :D
Is your css file correctly linked in the .html? I understand it as you have your img as a background-image in css?
<link rel="stylesheet" href="yourCss.css">
It's a long shot, but try with removing the image part,
background: url('social-icon/button.png');
try this (copy-paste this code)
background-image: url(../social-icon/button.png);
Tell the results!

Categories

Resources