I have the following HTML:
<div id="graphicArea">
<div id="page1" class="pageArea land"></div>
<div id="page2" class="pageArea land"></div>
</div>
my CSS stylesheet file snippet (this works):
.pageArea {
width:220px!important;
height:210px!important;
}
my CSS stylesheet file snippet (this don't work):
.pageArea.land {
width:220px!important;
height:210px!important;
}
neitheir this works:
div.pageArea.land {
width:220px!important;
height:210px!important;
}
There is not much in this file further on, so I'm pretty sure it's not overriding the css.
Anyone know why cant it work?
Thanks.
EDIT
All this css is within #media print { .. }. I don't think its relevant though.
EDIT2
Does FF has any issue regarding setting a div height/width in mm? I guess that's the whole point...
According to the CSS 2.1 specification, your code should work. Are you using Internet Explorer 6?
edit 1: .class1.class2 works with Chrome, and probably other browsers as well. Are you sure your selector is not working? Try "display: none" to be really sure.
.pageArea.land means that the element you're targeting has 2 classes, pageArea and land.
How is your HTML laid out? Is .land a child of .pageArea? If so you just need a space between them, i.e.
.pageArea .land {
....
}
Try this:
<div id="page1" class="pageArea land"></div>
.pageArea {
width:220px!important;
height:210px!important;
}
.land {
width:220px!important;
height:210px!important;
}
you have the dot of land in the pageArea , It must look like div.pageArea, .land
You have to have a space between .pageArea.land like this .pageArea .land You can try the following css structure
div#page1 .pageArea{
css goes here
}
div#page1 .land{
css goes here
}
div#page2 .pageArea{
css goes here
}
div#page2 .land{
css goes here
}
Use Firebug to determine which styles are influencing the final appearance of these elements, once the cascade is applied.
Given the small snips HTML and CSS you've given us, it looks alright, yet you are telling us that you're not getting the desired result. Add to that your superfluous use of !important, and I think it's safe to conclude that your stylesheet contains many conflicting properties that aren't shown in your code sample, and one or more of them are influencing .pageArea.land.
EDIT All this css is within #media print { .. }. I don't think its relevant though.
If it's in #media print { } the css will be applied when PRINTING
To have it be applied in the browser use #media screen { }
And if you want to see it in both print and on screen use #media screen, print { }
Related
pretty new to CSS and HTML and was hoping somebody could help me fix this. I wanted to be able to change the icon for the cursor although when I run the code, simply no change. A few visits to chatGPT hasnt done me much either. Here's my code:
body2 {
cursor: url("assets/img/wiiu/Smile_icon_32x32.png"), url("assets/img/wiiu/cursor.svg"), auto;
}
And yes, it is 32x32.
I've tried moving it to different classes, changing words, changing everything. Although nothing has worked.
here is a good reference: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor?retiredLocale=de
So basically you try to applie to a body2 HTML element you're CSS code. If its a class try the CSS selector .body2 {} or in the case its an id of a HTML element #body2 {}.
In you're css you've got one main picture and the second one as fallback. Just make sure you set the correct path corresponding to the location of you're CSS file.
To ensure that, you can also try the full path instead of the relativ one like C:\Users\xxx\Smile_icon_32x32.png
You are using the wrong css declaration, your code will only work if you have defined a custom html element having <body2> as tag.
What you probably want is:
body { ... }
applied to <body> tag
or a css class
.body { ... }
applied to or any other tag having body as class.
or a css id
#body { ... }
applied to or any other kind of tag with body as id.
Alternatively check in the browser console if the rule is applied and if the image path is resolved correctly.
Here is an example where http://example.com/32x32/990000/fff.png&text=PNG don't exist and https://dummyimage.com/32x32/009900/fff.gif&text=GIF exist so the gif will be used instead of the png :
.body2 {
display:inline-block;
cursor: url("http://example.com/32x32/990000/fff.png&text=PNG"),url("https://dummyimage.com/32x32/009900/fff.gif&text=GIF"), auto;
}
<div class="body2">display</div>
sorry for this trivial question, but i just don't get it. I would like to set the witdh of this image:
<img class='icon weather/mostlycloudy'
src="/fhem/images/default/weather/mostlycloudy.png" alt="mostlycloudy"
title="mostlycloudy">
I've tried things like
[class~="weather"] {
witdh:50px;
}
.img.icon {
witdh:50px;
}
and everything I could imagine, but the width attribute never appears if I check it with chromes inspect tool. I'm sure that I edit the correct .css file, because I can see the influence for other elements of that page. I surely am no html or css expert and maybe a bit dumb... Could you please help me?
There are 2 errors in your code.
First, the selector. img is an HTML element and therefore should not be prefixed with a . as it was a class name. (unless you're having a class named img).
.img.icon {
Should be:
img.icon {
Second, you wrote witdh instead of width. You've should notice that in the inspector this property has been marked with a ! as there's a mistake.
img.icon {
width:50px; //not wi**td**h
}
https://jsfiddle.net/zmztezc2/
img.icon (selecting the img element type) rather than .img.icon (which looks for a class containing img) should do the trick.
If you're looking to match any class starting with weather/, then I suggest [class*="weather/"].
You can't use "/" in class name.
<img class='icon weather mostlycloudy' ...>
img.weather {
witdh:50px;
}
img is tag, so you dont use coma before it. icon is class, so before class you use coma
img.icon
Little change in your code
[class~="weather"] {
width:50px;
}
img.icon {
width:50px;
}
I am using wkhtmltopdf 0.12.3.2 on Windows.
I know there are a lot of questions and answers around this topic, but I still can't find an answer to my problem; I don't know where to put the according CSS - or the CSS doesn't work for some (other) reason:
for example i tried to put the page-break related CSS directly into my html file which i want to render. i tried to force page-breaks with <span class="break_here"></span> in my <body>:
<!-- ... -->
<head>
<style>
span.break_here {
page-break-after: always !important;
}
</style>
</head>
<!-- ... -->
this didn't do anything.
then i also tried to put it into #media print{} or #media screen{} which did not change anything either:
<style>
#media screen{
span.break_here {
page-break-after: always !important;
}
}
</style>
thanks for any help!
edit: there is even another possibility by adding the --user-style-sheet option for using an external stylesheet.
Adding pagebreaks via a standalone element in wkhtmltopdf has caused me problems as well.
I've found that applying the pagebreaks to an element which wraps the contents to be much more reliable.
This doesn't work so well:
<div>some content</div>
<div class="pagebreak"></div>
Whereas this does the trick:
<div class="pagebreak">some content</div>
To make this work, I did not use .pagebreak{page-break-after: always!important;}
But, instead used: .pagebreak{page-break-inside: avoid!important;}
It's also good to note that pagebreaks on print should be as high-up in the dom-tree as possible. Applying pagebreak rules to elements that are deeply nested can cause headaches (or at least has for me in the past)
Hope this helps!
I have a css-problem I really don't seem to understand :) I have been styling css for three years now, but I've never had this problem.
I have declared some styles in my css-file that should apply for the content of my page. This is generally the right css, but there are some exceptions, like the page_child_title. I was under the impression that if I declared a style further in my css for specific classes, these would override earlier css-declarations. well now, in this case, it is not true. When I inspect with firebug, it seems that my browser really wants to use the font-size-css of ".page a" instead of using the ".page_child_title" (and I for one do not agree with my browser). The color of ".page_child_title" is applied correctly however. Below you can find the Html and css I'm talking about.
Html
<div id="page" class="page Jobs">
<div class="page_child">
<a class="page_child_title" ...
Style.css
.page p, .page ul, .page a {
font-size: 10px;
text-align: justify;
}
style.css (line 208)
.page_child_title {
color: #006633;
font-size: 12px;
}
style.css (line 262)
I have already tried replacing ".page_child_title" with ".Jobs a" but this didn't work. Then I tried declaring ".page_child_title" before ".page a", same result, so now I'm kind of stuck. Does anyone know what could be causing this problem?
.page a is a more specific selector. Therefore its settings will be used.
This phenomenon is called css specificity:
http://css-tricks.com/855-specifics-on-css-specificity/
a.page_child_title { ... } would work.
It would seem to me that selecting an element by its type rather than classname would be more specific.
Try changing .page_child_title to a.page_child_title
Example.
There are two solutions,
http://jsfiddle.net/ErsS4/
Change page_child_title to
a.page_child_title
Or
http://jsfiddle.net/m5V8f/
This meathod is a direct statment to the element.
Hope this helps!
An easy fix should be to change your style to
a.page_child_title
I believe it has something to do with the hierarchy of css and declaring the style of a itself.
Note, this is different than the older question How can I apply CSS on all buttons which are present in that page? because this is an already existing style. So given that a style, which we'll call "standard_label_style" already exists in an included CSS file, what can I do to say that all the labels on this page should have that style short of adding:
class="standard_label_style"
to each and every one? And yes, I know I could apply the styles ex-post-facto with a snippet of jQuery or JavaScript code. I'm just trying to learn how I'm supposed to do it with CSS.
Follow Up
I've gotten several comments that say just use syntax like this .standard_label_style, label... Unfortunately that does nothing like what I want. That would allow me to apply additional rules to the standard_label_style class, as well as rules to labels within this page, but would not allow me to apply that style to all the labels on this page. To see an example of this, here is a stylesheet and html to demonstrate. The label without a class will still not appear in red but that's what I'm hoping to have happen. I want to apply an existing class to all those labels on the page, not just the one with the class and without adding new styling on this page, the existing style should be the only style.
included.css:
.standard_label_style { color: red; }
test.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="included.css">
<style>
.standard_label_style, label { }
</style>
</head>
<body>
<label class="standard_label_style">Test Label</label><br/>
<label>Unclassed Test Label</label>
</body>
</html>
CSS doesn't really work like that.
You can apply a style to all labels directly:
label {
color: Lime;
}
or apply a class to all labels
.labelClass {
color: Lime;
}
<label class="labelClass"></label>
You can also have multiple selectors, so you could ammend your current style to be
.labelClass, label {
color: Lime;
}
What you can't do in standard CSS is something like
label {
.labelClass;
}
The good news is that there are a bunch of server side libraries which make CSS suck less and let you do exactly this kind of thing, see for example dotLess if you're using .NET which provides nested rules and a basic inheratance model.
To apply a style to every label on the page, use this CSS:
label {
/* styles... */
}
If you have an existing style (e.g. "standard_label_style") in the CSS already, you can apply that to every label:
.standard_label_style, label {
/* styles... */
}
This will affect every label through the site, so use with caution!
In your css file, can't you just put
.standard_label_style, label
{
//styles
}
.standard_label_style, label {
/* stuff */
}
I'm not sure you can... one possible workaround (feels a bit hackish though) is to attach the style to your body tag, then change the css to be this:
body.standard_label_style label{
//Your styles here
}
One of the most underused CSS tricks of all time: Give your bodies an id or class!
HTML:
<body id="standard_label_style">
<label>Hey!</label>
</body>
CSS:
#standard_label_style label{
the styles
}
will take the styles, while
HTML:
<body id="custom_label_style">
<label>Custom!</label>
</body>
Will not.
You are dealing here with CSS precedence. Declarations which are "more vague" (body tag, classes) are applied before declarations which are "less vague" (specific elements, inline CSS).
Thus your answer depends on how the stylesheet is defining label styles. If for example it says label {...}, then that's fairly specific, and your best bet is to use a more specific CSS style, see:
http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/ (good tutorial?)
CSS precedence
The level of "specificity" you need to override, as I said, depend on how specific your other stylesheet was. According to the link, "CSS embedded in the html always come after external stylesheets regardless of the order in the html".
There is also a chance that if you yourself define label {your custom css} that should work, if you import your stylesheet afterwards. It is what I would try first to see if it works. Have you tried this? What was the result?
Note that if you want to completely override the other stylesheet, you will need to also reset any CSS you are not using by settings its values to inherit or as appropriate.