I'm writing some custom chrome extensions to reformat certain sites. I'm having lots of luck with simply hiding things, however I've run into a problem trying to adjust a right-margin on something. Viewing the HTML results in the following:
<div id="bodyContent2" class="en">
In the styles area of the Chrome development tools I see
#bodyContent2.en {
margin-right: 330px;
min-height: 920px;
width: auto;
}
If I manually change that to margin-right: 0px; with Chrome it does exactly what I want. However, the following lines of CSS do not work when called from my manifest.json file in my extension:
#bodyContent2 {margin-right:0px;}
[id='bodyContent2']{margin-right:0px;}
#bodyContent2 .en {margin-right:0px;}
.en {margin-right:0px;}
None of them work and I don't understand why not. I literally just started working with chrome extensions today. Help is much appreciated. In the individual attempts I see the following CSS striked through in the chrome dev tools:
#bodyContent2 {
<strike>margin-right: 0px;</strike>
}
.en {
<strike>margin-right: 0px;</strike>
}
Add !important to your rules to give them higher priority:
margin-right:0px !important;
If you want to understand the order in which css rules are applied read about selector specificity.
Related
I created a global CSS file. It is working perfectly, except that I am unable to set margins.
For Example CSS:
.update_date {
font-size: small;
text-align: right;
margin: 0;
}
This is a CSS style for class update_date. When I use it, except margin, everything is applied. It's the same case with every other class. None of these classes are overridden in any other place.
Can someone provide a workaround on how I can set margins globally.
Environment:
Angular 10/11
Try using
.update_date {
font-size: small;
text-align: right;
margin: 0 !important;
}
this happens because that style is getting overridden by another
You should avoid "!important" if you can. It can cause unintended styling issues later down the line - see below.
My suggestion: In your browser, use your "Inspect Element" (Ctrl + Shift + I) tool to figure out where in the DOM Tree your styling is coming up and what is overriding it. This will help identify if !Important is truly the only solution you can use.
Inspect Element Tool Picture Example
Hard to say with your code snippet what is actually happening and being this post is 1.5 years old, you may already know this info. But I didn't see any other responses, so just wanted to raise awareness to the "!important" property.
More about !Important
From W3 Schools (I am sure you can find this elsewhere as well): https://www.w3schools.com/css/css_important.asp
"Tip: It is good to know about the !important rule, you might see it in some CSS source code. However, do not use it unless you absolutely have to."
I use tlk chat integration, and I kept seeing 2 scrollbars only on Windows Firefox + IE.
tlk allow me to put a custom CSS to their chat.
I did some research and I've tried all of these below trying to prevent it, but none of them CSS seem to work. On top of my HTML file, I've added
//html, body {height:100% !important;}
// html { overflow-y: scroll !important ;}
// * html .clearfix { height: 1% !important; }
// html {overflow-y: hidden !important; }
Fiddle = https://jsfiddle.net/bheng/yrq93jyy/show/
If you view it on a Windows, you will see this like me
How can I debug this?
This has absolutely nothing to do with laravel nor PHP.
The element #tlkio has a CSS rule overflow: auto; which is differently interpreted by different browsers. To override it, you can do something like this:
#tlkio {overflow: hidden !important}
Ideally, you'd change the original rule without overriding it, but I assume you can't do it since it's a third-party integration.
Check it out: https://jsfiddle.net/yrq93jyy/1/
When I use in-page links or "anchors" to reach a part of the page, the scrollbar doesn't allow me access to the content above -- even though it is there in the HMTL.
My site is developed in WordPress but I think the problem is more my CSS.
See the naughty
http://adanewmedia.org/submissions/#review
versus the nice http://adanewmedia.org/submissions/
Any ideas are appreciated!
Line 92 of style.css, remove this:
#main {
overflow: hidden;
}
Seems like a weird bug, or maybe you have a height set in some parent element to the #main div. Removing that style should fix it though.
Further inspection I found this (style.css line 96):
#main-content, #secondary {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
This is where your issues begin. Removing this nonsense fixes your original issue, but changes up the style of your site quite a bit. If you want to remove the black sidebar/footer, do that instead of pushing the containers all over the place.
When I tried playing with your code, it seemed to be this line in your style sheet that caused it - http://adanewmedia.org/wp-content/themes/twentyfourteen-child-ada/style.css?ver=3.9.1
#main-content, #secondary {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
Not sure what you are trying to do with that.
Also: firebug is rendering the page very oddly - I'd try validating your code as if Firebug is struggling to render the page correctly, then browsers are also likely to throw unexpected layout issues.
I'm using a fairly basic vertically expanding page layout in CSS, and I'm trying to adapt this layout so that my client can edit the page using templates in Dreamweaver. It's... well, rough going. I'm used to doing most of this stuff by hand, but it's working out fairly well.
I'm using a min-height trick similar to this page to get the content to expand nicely in the browser, for shorter pages viewable on large monitors. The code works perfectly in all browsers (not supporting anything older than IE7 for the site, and other browsers are fine) but Dreamweaver doesn't render the min-height properly.
I've been able to get it to work by using a .css file that only dreamweaver uses (it doesn't exist on the server) that makes it editable in dreamweaver, but if that file is committed, the magic breaks on the live site. This just feels like a dirty hack.
The quick way out, I guess, is this: is there a way to get dreamweaver to ignore a line of CSS, or to make it use a line of CSS that would be ignored by a real browser? Or, is there a way to get a min-height layout working properly in dreamweaver?
The code I'm using for this is basically the following:
Site Code:
html, body {
padding: 0px;
margin: 0px;
height: 100%;
}
body {
position: relative;
width: 100%;
height: 100%;
}
#mainFrame {
position: relative;
min-height: 100%;
width: 980px;
/*center in parent*/
margin-left: auto;
margin-right: auto;
}
and the code that makes dreamweaver happy:
html {
height: 100%;
}
#mainFrame {
height: 100%;
}
I read somewhere that Dreamweaver's layout engine was based on IE's rendering engine, which would probably explain most of the issues. I'm using CS3, and my client is using CS5, which is going to complicate things further down the line, but I'm already prepared for that. If anyone knows of a magic solution to this, I would appreciate it greatly, as I've kind of given up on it for now.
Thanks
I don't use Dreamweaver either, but this Adobe article on IE conditional comments might be relevant: I wonder if you can adjust the Dreamweaver preferences to load a conditional comment version string that would be ignored by a real browser.
i know this answer won't help.... but I personally (would) never rely on WYSIWYG-rendering.... i'm using DW CS5 myself, but only with code-view
I actually came up with my own answer for this, which is significant cheating, but it does work. The following utilized CSS comments to hide (from Dreamweaver) PHP code, which causes the server to spit out basically an empty file. Conditional comments are almost definitely a better way to do this, but it's still an interesting solution (I thought) and it might be useful to someone.
/* <?php if (false) { ?> */
body { /* some editor-only CSS */ }
/* <?php } ?> */
Having CSS layout issues with Internet Explorer 7 (big surprise). Upon using the Developer Tools to inspect the CSS, I discovered that some properties defined in the stylesheet are not appearing in the parsed CSS structure... THEN I saw THIS being shown as the parsed value for the background-image property:
background-image : url(/trunk/httpdocs/images/layout/HCBL_Homepage_01.jpg); WIDTH: 1200px;
pretty much obliterating the width property that was defined.
The actual code in the CSS file for this element:
div#header {
width: 1200px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-image: url('/trunk/httpdocs/images/layout/HCBL_Homepage_01.jpg');
background-repeat: no-repeat;
}
If anyone could offer any insight, or provide a link describing this problem (and maybe a workaround...) I would be very appreciative.
Also, I am only interested in this from a parsing of the stylesheet and CSS syntax perspective. I am not concerned with rendering and display issues at the moment; I simply want to get IE 7 (and I have a feeling IE 6 will have similar issues) to recognize and parse ALL of the CSS properties that have been defined in the stylesheet.
Also, here is a
link to some static HTML and CSS
that illustrates the problem described.
Thanks in advance guys!
Are you sure that you have regular inverted commas around you url, not fancy curly ones? Do you get the same behaviour if you change them to quote marks?
I'm not 100% about your folder structure or how you are accessing your image but have you tried without the first slash or adding .. before the first slash?
Where are the CSS and JPG files located from your website's root directory?