I am working on editing our intranet site and basically all I am able to change is the CSS. Although I have gotten it to look like I want with these limitations, I have one little snag. If I was told correctly, the html is generated via a .aspx file, and in this html is the inline CSS applied to the navigation menu of
border-collapse: collapse;
When I preview it in Chrome and Firefox it works fine, but when I view it in IE10, the navigation is pushed to the left. If I disable it using the developer tools, it works fine, but I can't access the html since it is generated, so I can't, at lease as far as I know, create a rule that can trump it. I have zero experience with ASP, but I have opened the file and looked through it, but it's all greek to me. Any thoughts? TIA!
Use !important in your stylesheet to override the inline value, like this:
Inline style:
<div style="background: red;">
The inline styles for this div should make it red.
</div>
Stylesheet:
div[style] {
background: yellow !important;
}
Note: This will result in a div with a yellow background, even though the inline style said for the background to be red.
Related
I need to get the area outlined in red in the image below completely transparent. I'm new to this HTML stuff, but I've tried searching for transparency and opacity in the HTML editing section and I don't seem to be able to find the correct bit to edit.
If there's a simple CSS code someone could provide me with that would be even better.
I'm using the Picture Window theme on Blogger.
Thanks :)
The CSS I would use is background-color: rgba(0,0,0,0); (red,green,blue,alpha)
for alpha, 0 is transparent, 1 is solid, so 0.5 would be halfway transparent
If you are unsure where to put this css, you'll need to identify the div; you can use developer tools in most popular browsers to find the ID or Class of the div; right click on it and choose "Inspect" or "Inspect element" or similar.
EDIT:
The div you need to alter is <div class="content-outer">....</div>
add the style background:none; to remove the existing background.
<div class='content-outer' style="background:none;box-shadow:none;">
<div class='content-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
see here
If you want to ensure the box-shadow (fuzzy outline) does not appear on older browsers, see https://www.w3schools.com/cssref/css3_pr_box-shadow.asp for browser specific css. For example for older versions of chrome you would also add -webkit-box-shadow:none;
Bit of a strange occurrence with my web page, currently trying to resize the font of a facebook like button I have on my website.
Currently the HTML I'm targeting is:
<span id="u_0_3">2.1k people like this. Be the first of your friends.</span>
In the google chrome console adding either of the following will change the font
1.
#u_0_3 { font-size: 14px }
2.
span#u_0_3 { font-size: 14px }
but adding either of these lines of code to my web pages stylesheet has absolutely no effect. No clue how to proceed from here as it works in one stylesheet and not the other?
The reason the styles aren't updating when adding the code to your stylesheet as opposed to in the browser is because you're trying to a stylesheet on an iframe, which isn't possible. You can however add the styles using jQuery or something along those lines.
Try this...
$("iframe#idhere").contents().find("span#u_0_3").css('font-size', '14px');
Ensure that you have added CSS file reference in your HTML.
Also, clear browser cache and load the page.
I'm making a user stylesheet for the add-on 'stylish.'
It applies a semi-transparent dark box over the entire page for night-browsing.
I'm using:
html:before {
content:url()!important;
position:fixed!important;
width:100%!important;
height:100%!important;
top:0!important;
left:0!important;
background:rgba(2,3,3,.35)!important;
z-index:99999999999999999!important;
pointer-events:none!important;
}
to create the fixed, overlying div.
This works just fine, however, if there are any iframes in the site, it will apply this code into the iframes' HTML as well as you can see here:
because these social networking widgets rely on an IFRAME, its repeating the code into those pages, creating a double-overlaying of the semi transparent dark box i've made.
the desired look would be:
I've tried hack-ish things, like applying a much-higher z-index to iframes and specifying the background-color and background of * of anything in the iframes to 'white' and 'opaque' so that it 'floats' on top of the parent html page, but this doesn't work perfectly. i've also tried something like:
html:not(iframe):before{}
but this also doesn't work. I'm wondering if there is a way to do what I'm trying to do in a way that doesn't rely on 'html:before' to create the same effect, or if there's a way to do that but not have it repeat inside the html of iframes on a page.
I've exhausted my efforts trying to get this to work, so any help would be really appreciated. Thank you.
Unfortunately, there is no way using CSS to target only the contents of an iframe from within the source of the iframe, i.e. the page that contains the iframe element.
I'm assuming, since you're using Stylish, that your CSS is in a Firefox user stylesheet. If so, you may have to look at the source URLs of those iframes, create a #-moz-document rule targeting those URLs at their domains, and remove the html:before pseudo-element accordingly.
Something like this, which should go beneath what you already have:
#-moz-document domain(/* Facebook Like */),
domain(/* Tweet Button */),
domain(/* Google +1 */)
{
html:before
{
content: none !important;
}
}
The content: none declaration disables the pseudo-element, preventing it from being rendered.
Having to exclude specific domains in this manner means this method is extremely limited and not very versatile at all, but it's the best I can think of.
You may want to try a different route:
html {
box-shadow: inset 0 0 0 2000px rgba(2, 3, 3, .35) !important;
}
Demo
This way the webpage is still useable when the user's browser doesn't support pointer-events.
You may also want to checkout this question: CSS - max z-index value
To apply these styles to only the parent document's <html> element, and not to iframes, simply apply the box-shadow to document.documentElement with JS:
document.documentElement.style.boxShadow = "inset 0 0 0 2000px rgba(2, 3, 3, .35) !important";
Edit:
I don't know about the addon thing but you could give your HTML tag an ID and target it that way, although if you want this to apply to all pages then that's an issue
or maybe use html:first-child ? I honestly don't know what will happen, you can give it a try though
CSS doesn't allow you to style HTML inside an iframe. Since you're using an add-on, this is a non-standard implementation of CSS. Styles are not inherited by iframes, because an iframe is basically a new browser window. The add-on is adding the style to every HTML page in the browser window. There's no way for the browser to know that a page is inside an iframe (at least not in a way that's accessible via CSS).
I need to print report page that has couple of background images on it. But only these images are not printable. These images are logos actually for graph and hence very important in report.
I have another option that I can crop them and include in page as tag but this is last option. Hence before that I would like to know if there is any way to forcefully print these images? Can anybody help me out?
By default, a browser will ignore background css rules when printing a page, and you can't overcome this using css.
The user will need to change their browser settings.
Therefore, any image which you need to print should be rendered as an inline image rather than a css background. You can use css to display the inline image only for print though. Something like this.
HTML
<div class"graph-image graph-7">
<img src="graph-7.jpg" alt="Graph Description" />
</div>
CSS
.graph-7{background: url(../img/graphs/graph-7.jpg) no-repeat;}
.graph-image img{display: none;}
#media print{
.graph-image img{display:inline;}
}
Using this code, or similar code, means the image is used once in html and once in css.
The html version is hidden using css, and for print it displays as normal. This is a hack, but it will do what you want it to do. It will print the image.
Having said that, what you're doing is terribly bad practice. Nothing which conveys meaningful information to the user should be conveyed using css alone. Not only is it semantically incorrect, but it makes the graph less useful to users. An inline image is much better, and if you can, that's what you should use.
it is working in google chrome when you add !important attribute to background image make sure you add attribute first and try again, you can do it like tha
.class-name {
background: url('your-image.png') !important;
}
also you can use these useful printing roll and put it at the end of css file
#media print {
* {
-webkit-print-color-adjust: exact !important; /*Chrome, Safari */
color-adjust: exact !important; /*Firefox*/
}
}
And in my html editor looks just fine:
alt text http://img441.imageshack.us/img441/7348/bien.png
But when i see it on the browser (Chrome & Firefox) looks like this:
alt text http://img59.imageshack.us/img59/642/malhh.png
Im very new to layout with tag, any idea of what im making worng?
put "margin: auto;" in the style of div contenido and usuario. Then add padding-top: 58px; in div usuario (as you are trying to put that div 58px lower.)
Oh! of course remove those margin-top styles from every where and use padding style instead.
What's wrong? You're relying on the rendering engine of your HTML editor and you shouldn't.
Only use a recent version of Firefox, Safari, Chrome or Opera for testing (edit: I forgot IE8 and I shouldn't have; it's support of CSS2.1 is good. It just lacks dozens of extensions but that's another story), then the other browsers including IE and forget your not-so-awesome rendering tool.
I believe your specific issue is being caused by the lack of trailing semicolons at the end of your style properties. That will often cause bad rendering.
margin-top: 1px" >
should be
margin-top: 1px;" >
Also, you should definitely take the advice of #Christian Mann and put the CSS in the of your document or, even better, in an external stylesheet. Inline CSS styles should be avoided.