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.
Related
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.
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
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! :-)
I was thinking this morning, my mind was on CSS and creating different style sheets for IE7, IE8, FF, etc.. I started wondering if there was a tool that exists to make this easier. I was thinking something along the lines of this:
Build the "core" style sheet.
Any time a "broken" rule is entered
into the "core" style sheet, a fix
is added to the associated browser
specific style sheet.
If a fix is added it would also be
noted, so you know that a particular
style has extras in the browser
specific sheets.
This could work in two different ways, either automatic, IDE style, or as a tool which you input the core css and output all the different css you need.
Thoughts? Does something like this exist?
The problem with this is that the term "broken" is subjective. No machine is able to tell what you consider to be "broken". Granted there are some well-known bugs, but even then you're only really scratching the surface.
Your best bet is to just code using web standards and using a tool like SASS to make coding your CSS easier.
For instance, if you are using HTML5Boilerplate and want to add an IE6 specific rule, all you do is something like this:
#mydiv {
/* mydiv specific styles */
.ie6 & {
/* IE6 specific styles for #mydiv
}
}
Compass is doing some of what you were looking for.
I know it is has been 5 years since you asked but this might help someone in pain :)
Chrome appends an stylesheet and it make a lot of problems for me. for example this selector
html>body, html>body * {background-color:#ffffff !important}
is one oe the things I can't override in my own styles. Anyone has a solution for that?
Though all browsers have a default stylesheet for elements, none of them set the background color as !important which wouldn't allow you to change it. What you show must be getting attached from elsewhere, not Chrome, but, without a link or the complete markup, anything we tell you would just be a wild guess.