I have uploaded my site to the web server which address is http://dsbangladesh.com. All the styles are working fine in the localhost. But look at the Hours sidebar content at the page http://dsbangladesh.com/shawarma-house-banani/b/6. The font size is larger (16px). But it should be 13px as the main body font size. Inspect element is not showing any override. Why the difference is there? Like this many of other elements are rendering with strange css property. For example the login modal. It should be on the middle of the page but coming at the bottom. Please help me to find out the problem.
Thanks.
It looks like you're seeing a user agent stylesheet issue. It's a little different depending on the browser you use, but the fix is the same.
First, to identify the issue, open up your web inspector to view the applied CSS and check out the style applied to table. In Chrome Inspector, I see there's some user agent styles applied to the general table element, namely font-size: medium;
The fix here is pretty simple - override the user agent default style. The direct fix would be to add table{ font-size: inherit; } to your CSS sheet, but a more in depth fix is to use a CSS Reset snippet. There's quite a few options to use such as YUI, Eric Meyer's Reset and Normalize.
Related
Its a simple unordered list, which im working on, cant expose much of the work but im using Material UI for this list.
Now, the problem
(user agent) html.css
has a css written with
padding-inline-start: 40px
but its not applied to the ul element. Though when i input this in "element", it work perfectly.
My research on this has led to to know that every browser has its own css written which is known as
user agent stylesheet
Dont know what is happening here, but yes development is becoming a mess.
If anyone knows the answer, thanks in advance.
According to this thread, the user agent stylesheet is overridden by any custom stylesheets that you enter:
User agent style sheets are overridden by anything that you set in your own style sheet. They are just the rock bottom: in the absence of any style sheets provided by the page or by the user, the browser still has to render the content somehow, and the user agent style sheet just describes this.
The Material stylesheet that you are using probable overrides the default value of padding-inline-start. The reason it changes when you input it in "element" is because you are changing the page after all the other CSS has been applied. You might try adding a style element at the bottom of your CSS that sets the property how you want it.
I have this footer and a logo that works fine without bootstrap, but bootstrap is just messing it up. I can't find whats wrong, because I don't know what bootstrap applied to the element. I know I can overwrite it, but I need to know what to overwrite. Is there any way of showing the styling bootstrap applied to the element or just disable all bootstrap styling for that element, not knowing what it is? Also, I need the bootstrap for the rest of the site, so I can't remove the link.
You have the override the governing style rule. Follow these simple ways, you can use Google Chrome to find out the inherited styles:
Open the URL in the browser.
Right click and select inspect on the Inspect.
On the right side, click on the computed.
You will be able to see from where it's inherited.
In the above example, check out the font-size and font-weight. There are so many inherits. Hope this was helpful.
CSS is hierarchical, meaning the styles from the firstly included CSS file gets overwritten with a secondly included file, if both have definitions for the same tag/class/id.
Add bootstrap as the first include CSS in your head of the document and then include your custom CSS files.
This should solve most clashing CSS styles automatically.
So I have had the unpleasant of adopting a project... Anyway, there is a div on the site that displays some information, and for some reason there is an embedded style somewhere that is causing it to display: none; I used Google Chrome's Web Developer plugin to disable all embedded styles and it works fine then. As I inspect the element I can see the style that is causing it, but when i try and disable the CSS property display, it disables but doesn't create that strike-through on the property. I implicitly put an inline style of display: block !important; and still no good. There also doesn't seem to be any reference to a location where that style comes from, doesn't say User Agent Stylesheet, not a reference to any other stylesheet.
The funny thing is, IE it works fine. The div shows perfectly... Firefox, and Safari cause the same problem which led me to think it might actually be a WebKit bug. Just need some more light on this maybe?
Found it. The div's class was advert_container and one of my my browser plugins was AdBlock and this caused the div to be removed...
Were you referencing this display:block !important, inline with the html element, or in some style sheet somewhere?
The closer the CSS attribute is to your problem div this should apply this. Also referencing !important generally overrules other CSS attributes, however if the other CSS attribute is more specific, it could also be the reason why this is getting overruled.
If you are in developer tools, and get the intended effect, you should just copy the css it created, and paste that in your html page.
I have been tasked with making some updates to an existing web control and placing it on an existing web page. The web control uses a lot of hard coded formatting to make it look "pretty", and the web page uses CSS to override just about every visual element you could imaging. So when the control is placed on the page it looks REALLY bad. Its basically unusable and I'm not sure what the best approach is to fix it.
Is there a way to clear CSS from, for example, all elements which are part of a specified DIV, or some way to prevent the main css from being applied to these components?
You could try a CSS reset stylesheet (just add the class yui3-cssreset to your element).
The only problem, though, is that it only normalizes little nuances between browsers, and isn't made for completely killing all stylesheets.
You could, however, edit in code to reset the background, font, border, etc.
You can use the not pseudo selector like:
:not(#idname) {
Properties... }
But that won't work everywhere without a JS shim.
how can i find in a early way that this css class is being used or not in website ?
like-
style property that i write in my css is being used or not?
and
class or id is being used in webpage?
exe:
.textstyle4{
font:normal 12px Arial, Helvetica, sans-serif ;
color:#777;
}
i want to know in my whole website where this css style is being used?
this is an example.
The CSS Usage addon for firefox does what I think you are looking for:
https://addons.mozilla.org/en-US/firefox/addon/10704/
If you want to see what CSS styles are being applied to an element that is being rendered on your browser you should look into using Firefox and Firebug to view the DOM and CSS information.
http://getfirebug.com/
If you are using IE8 you could use the IE8 Developer tools to do the same thing.
There's also "Dust-Me", a firefox extension to find unused CSS:
https://addons.mozilla.org/en-US/firefox/addon/5392/
However this plugin doesn't work with FF5+
So you want to be able to do something like click a CSS class and have it find all pages on your site that use that class? Not aware of any such tool, kekekela's answer of CSS Usage is probably about as close as you'll get--which will let you find what CSS an individual page uses.
Dust-Me https://addons.mozilla.org/en-US/firefox/addon/5392/
While this is rather old a question, TopStyle 5 kicks out reports about Class Usage, Orphan classes, Undefined Classes, ID Overview and Case Mismatch for whole sites, all linked to the respective file or spot in the stylesheet. However, AFAIK only stylesheets are analyzed, not style blocks or inline styles, but that may depend on the layout of the site. For the sites here style blocks are inserted dynamically, so that may be the reason TopStyle misses them. Of course it's not free.