I've made an global css that I used in two page (basic search and advance search page). I use it in advance search page, and the css script is running well. But when I move to basic search page (by click a link), the css not working. I used firebug to see what happen, and then I found that the css script is strike-through.
How can I solve it,.?
That basically means that your CSS property is being overriden by another CSS.
See where that property is defined, and you'll probably need to fix the order of the CSS inclusion on your web-page.
If you want to override the css from here means, all you have to do is set !important to your css.
like input.range{ width:73px !important}
Hope it will help you.
The width: 73px;rule is overridden. As you see the input.range is defined in cramp.css. Above you should find a rule that overrides it.
Related
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
I want to edit the class "top-labels" from the shopping cart page but I can't find it in the css stylesheet. How can I get around this?
Can anyone help?
Cheers
Use an A-grade modern web browser, like Chrome, Firefox or Safari. Find the developer tools for your choice. You might install Firebug for Firefox for example.
With that, right-click on the element you're interested in, say the one with the class top-labels. The browser tools will tell you exactly which CSS file contains the definition of the class, and the line number.
It cannot really be much easier. You can also change the CSS in your browser in that definition and see what the changes do, live. That is invaluable.
I think we need more info but from what you've said I'd guess that the top-labels class is either located in a different style sheet or is an inline style on the page.
You could try adding the top-labels style into the stylesheet you're using and add the styles you want to it that way.
If anyone has figured out how to remove the outline that Chrome & Safari add on focus to a textarea, specifically in ckeditor, I'd love to hear it. I've applied multiple variants of "outline:none" to:
A custom CSS file I defined in config.js
The editor.css file of the skin I'm using
The main CSS file of the actual page
Nothing works, found a suggestion here http://cksource.com/forums/viewtopic.php?t=17983 that claimed to work, but no dice.
I know I'm late to the game on this one, but I found this question while trying to solve the problem on my own.
Luckily, I was able to figure it out.
.cke_focus {
outline: none;
}
The .cke_focus class is added to the element via javascript whenever it has focus.
I added this into my own stylesheet which is called after the one included with CKEditor. If you need to, you can always up the specificity, but you shouldn't need to.
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.
I have some styles applied to html for example
<body style="background: #C3DAF9;">
and when I use forms authentication it is ignored. If I put the style into an external .css file then it works.
This doesn't seem like normal behaviour to me.
Have you tried inspecting your HTML elements with Firebug? That should hopefully tell you what, if anything, is overriding your CSS.
Solved the problem. I'm not sure I understand why it happened but here is the offending code;
if (User.Identity.IsAuthenticated) {
if (User.Identity is BookingIdentity) {
BookingIdentity id = (BookingIdentity) User.Identity;
Response.Write("<p/>UserName: " + id.Name);
}
}
Removing the Response.Write makes everything work again.
The Response.Write (which I added to check the user was logged in at same time as the forms authentication) seems to be doing something to the page render? Any ideas?
Turns out that Response.Write was the problem, it essentially aborts the rendering of the rest of the page from that point. (or words to that effect)
That's weird. I've experienced this problem but the other way around: when I use external style sheets the external style sheet is the one being ignored, and only my inline CSS works.
The solution to that problem was to add permissions for the folder where the external CSS file resides.
One suggestion: View the source of the rendered page, and check the body tag there. It is possible that the style is being overwritten somewhere with the value of the external CSS file.
Learn how to use Firebug and use it to determine what styles are applied to your page.
The background style does not take a 'color' value.
You are looking for background-color.
Yes you should check the output html, and your browser.
If there is no style tag in your html output you could use and try:
<body bgcolor="#C3DAF9">