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.
Related
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.
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.
I am the worst developer in the world but I try. I can't even get this link to style probably. Can anyone tell me what I did wrong?
I created a link with a div
<div class="ny"><a href=http://nyapples.com>yayaya</a></div>
css
.ny a {font-size: 2em;}
It doesn't look like there is anything wrong.
All I can think of is an error in your browser or a conflicting CSS rule.
I would recommend using Chrome, right clicking and choosing Inspect element or using Firebug on Firefox, then the tool to select the hyperlink.
In both, once selected, look at what CSS rules are being applied and see if there is something taking preference over this rule.
if you're having problem with customizing the css, you may have another stylesheet overwriting your changes. try this:
.ny a {font-size: 2em !important;}
that should force it to take priority over other styling. with blogs where you're customizing something that you haven't done from scratch, that may be the easiest way to solve
There might be a few things that are causing this to happen:
Farther down in this style sheet, you are applying another style whose rule over-writes this one. As many other people here have suggested, inspect the element to see which rules are being applied to it the element. Remember to keep your most generalized or generic rules at the top and your most specific rules at the bottom of your stylesheet file.
Farther UP in this style sheet, you're missing a terminating character like a semi-colon or closing curly brace. This can be a pain in the ass to catch because it's not always immediately evident since some of the rest of the sheet will load instead of the whole thing just breaking.
Hard to say without seeing anything else, but your current markup and style are correct.
Your markup is correct. You might need to recheck your CSS as other folks posted previously.
I also recommend you work with a CSS reset before using your own stylesheet. This can avoid any conflict from browser rules. I recommend: http://meyerweb.com/eric/tools/css/reset/ or http://developer.yahoo.com/yui/reset/
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.
I am working on a big form and it contains a lot of buttons all over the form, therefore I am trying to get working input[type="button"] in my main css file so it would catch all buttons with out having to add a class to every single one, for some reason this is not working on IE7, after checking on the web it says that IE7 should be supporting this.
Also it has to be type="button" and not type="submit" as not all buttons will submit the form.
Could anybody give a hint what am I doing wrong?
input[type="button"] {
text-align:center;
}
I have also tried input[type=button]
I was struggling getting input[type=button] selectors working in IE7 or IE8. The problem turned out to be that the HTML Pages were missing a "!DOCTYPE" declaration. Once I added
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Then everything worked fine. You can obviously use a different "!DOCTYPE" declaration to suit your requirements.
input[type="button"]{ text-align:center; }
What do you expect that to do? The text in an <input type="button"> is already centered by default.
If you want to align the button itself within the parent, you have to set text-align on the parent element, not the button.
Attribute selectors — with or without quotes — do work on IE7. It's IE6 that's the problem browser there.
I've had no problems getting css statements like that working in IE7; IE6 is always the problem but I believe this CSS would work in there as well. So I don't think IE7 is the problem.
The first thing is that your CSS sample will only affect buttons, it will not affect submit buttons. But that's an easy fix; change your css to:
input[type="submit"], input[Type="button"]
{ text-align: center; }
Second, as Manolo Santos said, could you have another CSS statement that is overriding the text-align setting? A setting on just input elements? It's probably worth using a developer tool like Firebug or the developer components built into Chrome or IE8 to help find the CSS problem.
Attribute selectors are, unfortunately, not yet well implemented in all major browsers, because it is CSS3 and not 2.1, the current standard. Because the guys over at W3C are not that quick in making decisions, you better not set your hopes too high, because we won't be able to use css3 any time soon. Some aspects of it are already implemented, but this one isn't (surely not in IE6).
So, as you already said yourself, it would be much better to provide all of your inputs with a class, and make it a habit to do so every time you create a form. It's always handy and not a lot of work when you are already programming the form.
When I create a form, I always add the type of an input as a class, e.g.:
Especially the last two will come in handy in a lot of cases, because you don't háve to style the .button and .submit separately, but you cóuld if you would like to do so.
They work for me in IE7 (both forms, with and without quotes).
Maybe there's another selector that is masking yours. You could try making your selector more specific in order to give it more priority, e.g.:
body form input[type="button"] {
background: red;
}
I am pretty sure everybody is aware of the fact that the solution of adding a !DockType to the header isn't a possibility all the time.
For instance, I develop in DotNetNuke (DNN) environment which the developer doesn't have an access to the header. Then it makes it almost impossible to add !DocType.
In this case you don’t have too much of an option except relating a CssClass to the button and referring to it, explicitly, in the CSS module.
This question is old but if someone have a related problem.. I spend a few minutes trying to solve a similiar problem
input[type="Submit"] doesn't work on IE7 (despite of IE assigning the style correctly to the input as I saw in dev tools).
SOLUTION: I switched from Submit to submit and it worked!
I posted this here because it may help someone when debugging.
For whatever reason, there are times when attribute selectors will not apply before the page is displayed in IE7. This actually just happened to me. My selector was table[bgColor="#c0c0c0"] and would not apply on page load. Since I was using IE9 (Browser Mode: IE7, Document Mode: IE7 Standards), I was able to use F12 Developer Tools to look at my CSS file. I unchecked the selector and then checked it again. The attributes applied after that. This is reproducible exactly in good ol' IE7, so I'm going to have to find a work-around. (Note: Neither using single, double, or no quotes nor making variations in capitalization make an impact here.)