body
{
font-family: 'Lucida Sans Unicode';
font-size: xx-small;
color: #008080;
}
on the top of my style sheet, and non of those specs are taking affect on my page, nothing, i tried doing it on td, table, tr, span, div just in case i needed to be more specific, but nothing is working, i want to make global changes without having to change things one by one and i can't seem to find a solution, any ideas?
thanks - your input is appreciated
ps: more info for those interested:
i have a standard mster page, and content pages, listview control that populated data from a database, but all the elements in my controls of concern is html elements (im sure some would be runat="server") the style is linked correctly as well, as other styles on the style sheet work...
here is the code where the text is not changing..
HTML TAGS ARENT DISPLAYING IN MY COMMENTS FOR SOME REASON...???
Clear your temporary files and try restarting the browser - chances are that its using a chached copy of the page.
There is nothing syntactically wrong with that code. The issue must have something to do with how it is being applied to the HTML (and thus with some code or HTTP response header that you haven't shared with us).
Hard to say without seeing the html and style sheet, but perhaps later declared styles are "overwriting" your body style?
If you can't see these changes they are being overridden by other styling applied somewhere else.
The easiest way to debug what css rules are being applied to elements on your page is by using a tool like the firebug extension available for firefox (available from http://getfirebug.com/)
Once you have this you can select an element and see what has been applied by what rule - and then you can override that rule!
There is also an IE dev toolbar, and developer extensions for chrome and firefox that do the same thing.
Hope that helps.
Related
Dots & Dashes currently has a rather unsightly nav-above box on its blog pages, as seen above the below post:
http://dotsanddashes.co.uk/blog/huge-moves-savage-sister/
Having inspected the element on Chrome, it seems easy enough to remove it via HTML, although I'm struggling to find all the applicable bits in the CSS stylesheet... I think/ hope this is a pretty rudimentary fix, for which I apologise in advance, but my grasp of CSS is slightly dodgy in truth..!
Thanks.
You can hide it with CSS using the rule:
#nav-above {
display: none;
}
This will remove it from the flow of the page so things should appear the same as deleting from the DOM tree in the Chrome inspector.
Note that the relevant source and images etc are still downloaded by users so ideally you should actually remove it from the source if you no longer want it.
Site:
oldfashionedgoods.com
I'm using SquareSpace to build a splash page for my site, and while I've been able to figure everything out, this last thing plaques me.
I'm trying to have it so when you type your email in to the submit field, it uses the font Cutive Mono, just like I'm using for the text above the box.
So far I have this:
input[type=text] {
color: #cc5723;
font-family: cutive mono;}
While I do not want it to be that amber color, I was messing with the color to make sure I was working with the correct item. The text changes color as I type, but the font will not change. What am I missing here?
I'm a complete newb so sorry if this is a dumb question! I already looked everywhere online, but nothing seems to work. Thanks!
I suspect it is being overridden by another CSS style. Try using:
input[type=text] {
color: #cc5723;
font-family: cutive mono !important;}
If that works then it is being overridden somewhere in your CSS.
NOTE:!important should only be used to test. It is not a solution.
I have tried a basic example here: http://jsfiddle.net/n4S3s/ which seems to work fine.
Your other styles have priority over this. Use
font-family: cutive mono !important;
to test.
Yep. important! works. I just wasn't sure of it, but here is the
DEMO
The other answers are correct; other styles in your CSS are overriding this one. I'm not sure I like using !important to force the style; I think of that as a last resort. But it's good for testing.
But more importantly, would you like to know how you could figure this out for yourself? Use the Developer Tools in Chrome (or any browser). Simply right-click the input element and select "Inspect Element". Then look at the Styles panel in the bottom right and you can see what styles are in effect for this element, and which CSS rules they came from. You can also temporarily toggle off any styles, edit the styles, etc.
Stack Overflow is a fast way to get questions answered, but the Developer Tools are much faster! :-)
So, this is a question that's been nagging at me for a long time. I've been digging much more into CSS these days. I'm trying to stay away from jQuery for this project as it's in Drupal and I'm trying to stay away from custom code.
So, we have a class the system applies to BODY called "not-logged-in" when the user isn't logged in. Now this should work well for us (as I understand CSS), as we're only allowing admins to "log in". We are having collisions when we have someone editing a node -- all our custom classes are loaded in both cases and some of the editing controls are looking funky because of it.
So the BODY style is something like this:
<body class="html not-front not-logged-in no-sidebars page-node page-node- page-node-1 node-type-page footer-columns" >
... [much body content here--other divs, other classes, elements with IDs] ...
<div class='mycustomclass'>Should be bigger if logged in</div>
</body>
So, when I try to add a CSS selector and style, like this:
.not-logged-in .mycustomclass {
font-size: 20px;
}
It seems to ignore .mycustomclass. I've run into this before and chalked it up to my poor CSS-fu. And there was always jQuery, so I really didn't have to care. I'd really appreciate it if someone could clear this long-time mystery up for me.
Your syntax is fine, no problems there.
I imagine one of two problems:
The class is not actually being loaded, either on the body, or on your mycustomclass element. Check both in the rendered source (i.e. in the browser), not just your own code. As it's Drupal, it could be caching so your changes are not being loaded. Clear the Drupal cache.
Specificity. Perhaps there is another class on the element, or perhaps there's a global rule. Either way, something could be overriding your CSS on that element.
To solve both, use Firebug and the Web Developer Toolbar in Firefox. Both are essential for doing CSS.
Be sure that Drupal is adding the css script tags in the <head> of your HTML. You should have them follow after your stylesheet references. That's it, the drupal css (the one that is adding the not-logged-in class to the <body>) must execute before your css.
I have a CSS file where I put all my styles inside and whenever I define any code such as:
MYtitle{
color: brown;
font-size:19px;
font-family:"Comic Sans MS", Times, serif;
}
Then I call it in my html file using:
<MYtitle> This is my defined Heading </MYtitle>
It will work in Firefox and other browsers but not in Internet explorer, it will not sense my styles at all.
Is there another way to define the above to also work with Internet Explorer? I'm trying to build a website that works in all browsers
Any tips or help is greatly appreciated.
Thanks.
Internet Explorer will only style valid HTML elements, and that's why there's the HTML5 shiv for IE8 and earlier. You can work around this by calling document.createElement with the element name in JavaScript:
document.createElement('MYtitle');
Here's a demo.
More likely than not, however, you shouldn't be using your own tag type. This renders your markup invalid and can cause compatibility problems, akin to those you've just experienced. A possible alternative is CSS classes instead, though they might not fit the bill entirely. It depends on what you're trying to do.
I have a div- workarea, where, I want to load contents of body of a template. I could load the content, but how to load css of the template. If I tried to load it, it overrides the default css of the page into which I'm loading the template's body content. I don't want to use iframes in my project.
Thanks in advance
Another alternative is to create a reset stylesheet just for that div container. Put aa id selector on the container div in which you load content and use that ID as a prefix for styles you use in the template.
<div id="template_content"></div>
and css as
#template_content h2 {....}
#template_content p {...}
If you cannot do this than your only option is iframe.
Your only simple option here is to use an <iframe>, styles cascade down, that's just how they work and were intended to work, if you want a section of the page with drastically different styling that also doesn't inherit, an <iframe> is the perfect tool do this.
Many people think frames are bad, that that's a different thing from iframes, no matter which side of the line you're on <iframe> elements are perfectly legitimate to use here. Why try to solve the problem in a very round-about way when the perfect tool for the job is laying there ready to use?
For example this is how almost every rich-text-editor works in a page, via an <iframe>, for many reasons but to keep the styling separate is one of them :)
Give Some id to that div like WorkArea. Now in css file, write your styles and from. Do not attach anything to any divs of the body from css, using body as parent class
might be hard but give the display or preview area important dominance...
like...
#template_content {
background: green !important;
}
then when you load in another style sheet, #template_content's background cannot be changed unless you have !important defined on the stylesheet you are loading in.