I want a background image on my page (background.png), but some rogue CSS is thwarting me.
I can see that my style.css from line 39 is being overwritten. I would think this is being done by something like style.css. I search and do not find anything but my original desired specification in that file. I can not find out what css is doing the overriding.
I have searched all the css files I can think of for the specified image (bg_p2_28.jpg). I have searched all the css files for background, nothing seems to come up. It is not being specified in the main HTML
I am barely struggling through as a reasonably competent programmer that has not used HTML since the mid 1990's. I am just trying to modify a template I bought.
What techniques can I use, or how do I interpret what I have here shown here to figure out what CSS override is ultimately being pushed into the page?
EDIT:
Adding the !important; works. It feels very dirty for some reason. I do not know why. I have tried following the javascript in, but the debugger is confusing to the uninitiated. Is the Important! a terrible thing to do, or reasonable? I think it would be useful to understand where these are being set in the java code, but when I search the code, I think the values are stored in variable, so can only be caught at run time.
That's coming from the inline style="" attribute.
If you don't see it in the HTML source, it's probably being set by Javascript.
You can right-click the element in the inspector and click Break on Attribute Modifications to find out where.
You could try background: url(src) !important;, not the perfect solution, but i think it will work for you in this case.
The grey element.style means that it's a style attribute directly on the element itself. Any style on an element will override styles from style sheets unless the sytlesheet style is marked with !important
Related
I am trying to find what is overriding my CSS element using chromes element selector but am unable too.
This answer seems outdated I can't find how to access "computed styles":
Chrome Developer Tools: How to find out what is overriding a CSS rule?
I don't know why this color is overridden with gray:
chrome
How can I find whats doing it with google chrome?
If you look at the image, it will tell you that the property is changed in the element.style.
In other words, the change is not applied using a selector such as class or id, but rather to the element itself.
This can be done in two ways, as far as I am aware.
1) In HTML, writing the properties directly within the element:
<div style="color:gray;"></div>
2) In Jquery, referencing the specific object (for example, using the id property) and then using the css property:
$('#divname').css({
color:gray;
});
With regard to finding what is causing the issue:
1) Finding out if the change has been made in HTML should be fairly straightforward, as you would just need to have a look at the HTML file.
2) If the change has been made through Jquery, things get a little more complicated: a ghetto method would be to search your script files for the "gray" string. Don't forget that scripts can also be embedded into HTML, however, looking for the property the HTML file would be a good way to proceed :)
Good evening. I'm trying to make a site with Django. Not being expert in CSS I took a template (minimaxing, from html5up.net). Everything works fine, as you can see (http://secret-reaches-8428.herokuapp.com/lesson/lezioneA00/) except that ordered and unordered list are not rendered as such. I can guess is something in the css, but I can't see where the problem is. There are the three .css files loaded in the header:
http://secret-reaches-8428.herokuapp.com/static/css/style.css
//same_domain/style-desktop.css
//same_domain/style.css
Question is: can anybody point out what part of the css is to be modified or, can anybody point out what the problem is?
Ok, I solved looking for standard css attributes and setting up properties as I wanted. Now I'm just curious to understand why the normal html behavior was overwritten, since there is no reference to in the css files.
You have to update your img sources. You have a problem with your img sources, not with your ul or ol rendering.
You try to reach an image here, but it does not exist. Try to fix the URL reference.
I'm using Eric Meyer's Reset CSS, and all hyperlinks "hover" (you know, act like the cursor is hovering over them) if the cursor is horizontally-adjacent to said hyperlinks, not necessarily hovering over the text of the hyperlinks themselves.
This is probably the doing of the Reset CSS, however I am not sure how to fix this, I'd figure it out eventually, but I'm hoping someone here can provide a quick fix.
Also, where should the Reset.CSS be in relation to my main.CSS? Should it be on the line above or the line below main.CSS for priority in the HTML file? That might be an issue as well.
Thanks!
It is usually a good idea to reset your styles first, using reset.css at the very top of everything else, and then add you own styles.
The basic rest.css from Eric Meyer does not touch anchors (a) in any way, so I suspect your own code (or browser) for strange mouseover-behaviour. Use your browsers developer tools (usually opened up by pressing F12) and check the styles applied to the element.
Based on what I understand, as far as I know this can be caused in two cases.
First, if your markup is like this <a><li>some hyperlink</li><a>, and your CSS is like this:
a:hover{
....
}
OR
your markup is like this <li><a>some hyperlink</a></li> <- this is correct way but your CSS is like this:
li:hover{
...
}
so you might want to check your markup, I don't think so that this is caused by your CSS reset.
Using the exact same CSS,
the onclick pseudo effect works fine with this code on one page of same site:
<a data-url="#" class="btn btn-share referral_button">Button Text</a>
(but admittedly it is on a different page with different divs)
but not on another page, where the code is:
<a data-url="#" class="btn btn-share referral_button" onclick="javascript:$find('ABC').set_activeTabIndex(3);">Button Text</a>
instead of behaving as it should it shrinks when clicked - and sort of reverts to how it would look without any css styled - or at least not the correct css styling
I initially thought it was something to do with the onclick="javascript... stuff somehow clashing/over-riding and affecting the CSS from performing how it should but * EDIT it can't be this because I just removed the whole onclick section and the problem still existed :( **
so it must be something else..
the relevant CSS is here: sorry it's long and probably bloated. the most relevant stuff i believe is at the bottom...
https://docs.google.com/document/d/1N7YQ5YuvY6DJn8-nr4sinx4LY7WOS88eErpRHe4IE_g/pub
Seeing as how its an invalid syntax, I would say remove the " \9" from all of your :active and .active statements
Like below:
.btn.active{background-color:#cccccc \9;}
EDIT: Furthermore, (not really relevant to the answer)
Your CSS is a pretty hot mess. (No offence)
You can easily clean that up and make it a lot more manageable.
Plus, it could just be my tired eyes, but it seams like half of it is just repeating and/or overwriting the other half (which goes back to cleaning it up and making it manageable).
Honestly though, your the one working on it, so its as long as you can read it and use it. To each their own. I prefer my CSS quite readable in a dev environment.
The most obvious suggestion is there is something on this mysterious "Other" page, that is overriding the style.
Use a tool like Firebug for Firefox to inspect the elements and its' styles this may give you a hint as to what is overiding the behaviour you are expecting.
Also check that the CSS is the same on both pages if you are not using a common CSS file.
Read up on CSS Specificity, which is could be the root cause of you problem. This could help explain why style b is overiding style a.
It boils down to some difference on the two pages.
It's the red marked "navigator" I am talking about. I need to move them away so they don't mess up my design. I have tried to change a lot of different settings without no success.
Here is the View for it:
What should I do?
I am using the following themes: Pixture Reloaded 7.x-2.2 and AT Core 7.x-2.2
Modules: Calendar, chaos tools, views, date modules..
It is obvious some mix up in css. It is a large possibility that elements created by calender inherit some css properties.
Easy fix is to view the source code of he page. Using FireBug(for firefox) or some alternative will make it easier to find. You will find some css rules being applied to your menu. Just try to enable and disable some css rules and see what happens.
When you find mischief just write a css function with higher priority which would negate that other global rule.
I got the same problem and i solved just yesterday hacking some css. I share you here what i have done in my case that i think i will help you also or at least work around there.
First to fixing the big buttons of the calendar navigation you should look in your theme css files at some css class called "ul.pager li a" or "ul.pager li span" there must be a property like "display:block" that is causing this buttons see that way. i just commented that property and they look as normal them should be.
In my case the theme css file was "navigation.css" and this property inside that file is found at line 375. Maybe in yours could be similar, anyway you can check and find where is using the firebug extension for firefox inspecting that buttons.
Second for fix the position of this navigation buttons is something similar but in the css file of the calendar module itself, after modifying the core css file of the module i recommend you to override it placing a copy of it in your template css folder and declaring it on the .info file of the template. In my case the file was calendar_multiday.css, in the line 778 and 818 there are the classes ".view .date-nav-wrapper .date-prev" and ".view .date-nav-wrapper .date-next" inside them with the property "right" and "left" i controlled the positions where must be this buttons.
This is the work around on how i solved it, hope this works for you also but if not anyway the problem is close there.