I am completely stumped. I am trying to add a background to my page and set the text. I am trying to do both to my body. For some reason, this has no effect:
body
{
padding-top: 80px;
background-image: url(../img/WorldGrainyBlurred.png);
background-position: -80px;
font-size: 100%;
font-family: "HelveticaNeue-CondensedBold", "Helvetica Neue";
}
To see if it was applied at all, I tried making the page red and making the padding huge but it never applied. I can see that the css is being applied, but this statement seems to be having no effect. Any ideas?
EDIT: JSFiddle http://jsfiddle.net/5ytdP/
You need to take these random CSS lines out that are right before the body {...}:
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
jsFiddle
The padding now is rendered properly. The background image doesn't show because it has relative path that is not on jsfiddle.net, but the browser is looking for it now. Maybe those lines need to go inside the body rule? I am not familiar with them, but I haven't seen CSS outside of a rule block before.
Related
I have a <label> element in my ASP.NET core MVC project, that splits to multiple lines instead of showing in a single line. I've inspected the element in google chrome to see what css is being applied. It is getting it from my custom.css class. Below is my custom.css file.
body {
padding: 1em;
font-family: Arial, Arial, Helvetica, sans-serif;
}
h1{
margin-top:0;
color: navy;
}
label{
display: inline-block;
width = 50em;
padding-right: 1em;
}
div{
margin-bottom: 0.5em;
column-width = 300px;
}
The css in the inspect element is as below.
I've tried updating the custom.css files in the code, but it still somehow picks the same values for css. Tried cleaning and rebuilding the code. Still doesn't work.
However, when I un-select the width property(as shown below) in inspect element, it shows as expected. I'm removing the width property from custom.css file but it is still coming up during run.
I'm unable to explain why this is happening and how to get the label in a single line. Tried updating the custom.css file in code and the changes simply don't reflect. Why has this been happening and how to fix it.
If you're interested in the entire code source code
your source code link is not working so only just looking at your screenshots i'm suggesting the following changes, see if it helps you.
since you are using tag instead of a class the other classes or id selectors may be applied to your label width, the CSS selector specificity applied(or decrease) on the following order,
ID
class
tags
but don't use ID for this purpose since it's hard to override them in the future, use classes instead.
for now just set the width of the label as 100% so it will take full space of available width and also add !important to make it as high-priority origin that can override any inline styles or other overriding class styles.
label {
display: inline-block;
width = 100% !important;
padding-right: 1em;
}
Color and background-color are not working. I have no idea what's going wrong here. I scoured this site for an answer, but no question quite applies to my situation.
I have separate html and css files, and the css file IS linked correctly in the html file. I know this because everything other than color and background-color are working as intended (font-family, margin, padding, position, display, etc).
When I change the element's color/background color via its style attribute in its opening html tag, that works. But I can't get it to work from the css file. I tried changing the height to auto and the overflow to hidden, and I tried adding the !important tag (which shouldn't matter, because nowhere else in my file so far do I try to change the color/background color of anything).
If it helps, here is this snippet of my code:
<div class="db-header">
<h1 class="title">My Title</h1>
</div>
And the css:
.db-header {
margin: 100px;
background-color: 'red';
color: 'white';
font-family: 'arial';
}
In this case, the margin becomes 100px on all size, and the font becomes arial. But no color changes. I tried writing the color as a hex code and that didn't work. I also tried using the h2's class tag, which didn't work either. I tried changing the color/background color of multiple other elements using their tags, classes, and id's as selectors, but nothing worked. I even tried changing the colors using jQuery. Any ideas? Thanks for any help.
Remove the quotes from around your colours.
.db-header {
margin: 100px;
background-color: red;
color: white;
font-family: 'arial';
}
I'm trying to use inline CSS to style an image sprite. So obviously, I need background-position to work, but it's not. I'm not sure what's wrong. It's supposed to be a clickable image that links to another page of the site, but the CSS isn't working.
<div class="homepage"><img src="http://imageLinkToHomepage.com/" style=background-image: "-20px;"></div>;
<div class="homepage"><img src="http://imageLinkToHomepage.com/" style="background-image:-20px;"></div>
I think you had some quote marks mixed up there...
Looks like you're trying to apply the background-position property to an image tag, which won't work. Background properties won't apply to image tags. For your specific use case, you could apply a background image to your anchor tag without needing an image element - like so:
<div class="homepage">
</div>
.image-button {
display: inline-block;
width: 55px;
height: 55px;
background: url('http://3.bp.blogspot.com/-q0CJBWRLWUs/T_z2_c7TunI/AAAAAAAABPk/rS7fmE1P-B4/s1600/megaman7.png') no-repeat 0px 0px;
}
.image-button:hover {
background-position: -55px 0px;
}
View this in action here: http://codepen.io/anon/pen/PqKMLo
I was facing the same issue and I got it done by writing !important.No rule was overridden but css was not applying the position without making it important, seems like a bug.
<div class="ProposalBanner" style="background:url(...\imgs\BannerPRop.jpg) no-repeat center -31px !important"></div>
First time I've ever noticed this but is probably an easy one. How come IE and chrome give different heights to fonts? What are the best practices to combat this? This is messing up my header layout, I'm trying to get it to look the same on all browsers.
The code to produce Img:
<html>
<head>
<style>
body{margin:0;}
div {
margin-top: 5px;
font-size:16px;
}
.c1 {
font-family: Arial;
background: blue;
}
.c2 {
font-family: Lucida Sans Unicode;
background: red;
}
</style>
</head>
<body>
<div class="c1"> My Text 1 </div>
<div class="c2"> My Text 2 </div>
</body>
</html>
Edit: - Additionally
Here is an image of the text laid over one another. The text height in pixels is the same in each but the problem seems to be that they don't both use the same margin/padding(whatever it is) at the top and bottom of the text.
Have you tried setting defaults for the webpage?
This problem actually looks like it is line-height.
Browsers tend to render things differently from one browser to the next. Try setting defaults.
Line-height actually changes the size of the line the text sits on. Might be padding in this case...
line-height
margin
padding
font-size
Theres a lot of defaults you should/could set. This does not ensure the same look from one browser to the next. It does help alot though.
Good luck!.
It's only because you haven't set a font-size, so it uses the default size of that browser. I tried the code and had the same thing, but after setting a size it didn't show up anymore.
div {
margin-top: 5px;
font-size: 30px;
}
And just for your knowledge, you can use rem to set size by default browser size, like this:
div {
margin-top: 5px;
font-size: 1.5 rem;
}
And that gives you 1.5x the default size of the browser.
Update
Problem seems to be in line-height, which you should set for the divs. It could also be the padding of the divs. Try setting those and I hope it helped. If not then try setting div display: block.
I've spent a few good hours debugging myself, and a few good hours researching but nothing seems to be solving my problem. I have a caption in my header that is supposed to be cut-off at the bottom, which looks fine in Safari and Chrome, but in Firefox it is positioned much higher:
First window: Firefox
Second window: Safari (chrome renders the same)
I spent about an hour and a half changing everything around in my CSS thinking it had to do with other elements around it, but made no progress. Finally I decided to make an extremely simplified version to see what the problem is:
First window: Firefox
Second window: Safari (chrome renders the same)
Same exact thing. I have a CSS reset applied so that is not the problem. I've tried setting the line-height, but that didn't fix it. I've tried every value for the CSS display property. Nothing is fixing this.
HTML/CSS for test example above:
<div class="test">
<h1>Test</h1>
</div>
.test {
margin: 0;
padding: 0;
width: 100%;
height: 185px;
line-height: 185px;
border: 1px solid red;
}
.test h1 {
font-size: 12em;
}
My website can be viewed at samrapdev.com.
Quick link to CSS stylesheet
In short, I need to figure out how to get both browsers to display the text at exactly the same height
Try and specify a font-family in your stylesheet though it's not pixel perfect
#header .youAreHere h1
{
...
line-height:1;
}
line-height must be set on h1, unless you have something like
* {line-height:inherit;}
Even if you take a webfont and define the line-height of your element you can have variations due to the line-heights of the other elements.
What works for me is to define the line-height of the body on the top of using a webfont.
Also do not forget to reset margins and paddings for all elements you're using. A good trick is to use a reset.css before your actual style sheet (you can find some at http://www.cssreset.com/)
body{
line-height: 1;
}