I have this navigation that only appears on smartphones. For testing purpose you can see a desktop version here: http://dknytkom.dk/forside/
I am trying to replace the anchors "menu" and "Søg" with icons using background image. But for some reason the styling rules only affects one of either. If I switch the order of the css command lines, I get to select the other.
I've tried using attributes, like a[href="..."]; I've tried using a:nth-child(...), and finally given them an id each but to no avail.
Anyone got a clue?
first of all we appreciate if you post the css selector code that apply to just one of them.
second as i understand your path to the picture has problem, correct it and then tell us what was the result.
if you have problem with selector use a very specific one like these two:
for first one use : a#menu-knap.counter
for second you can use a#soege-knap.counter
Sorry for the inconvenience. I remove some css comment around the statements, and yup, it worked.
Related
Hej Folks,
i'm stuck with CSS and the :nth-child and :not selector.
The Situation:
I have a searchfield where the results are displayed below. When entering the site all results are already shown. For better reading each 2nd result row gets a highlight color unsing :nth-child(odd)
The Goal:
When a user enters a value into the search bar i want do hide (not remove!) all invalid rows. It works pretty fine by adding the class __inivisible. It just sets the display attribute to none.
The Problem:
After adding the class __invisible the :nth-child selector won't work as expected. I have combined it with a :not(.__invisible) selector to exclude all irrelevant and invisible results. Thus he still counts them.
Maybe its a bit hard to understand, so here is a jsfiddle example: http://jsfiddle.net/SHGp2/3/
i would expect that the 2 pink rows should be the only rows where he has to decide whether ist odd or even, so one should be pink and one should be blue.
if you don't understand what im talking about, disable the comment in the __invisible class. You will see two pink rows instead of one pink and one blue.
Maybe i got the function of the :nth-child selector wrong, if so, is there a way to get the thing working with pure CSS?
Thanks in advance! :)
P.S.
no JS in this fiddle ;)
nth-chlid counts the children of the parent, regardless of whether they are visible, or have any other conditions applied to them. Unfortunately there is no way to do what you're trying here, as even nth-of-type only compares tag names.
Your best option is to completely remove the rows when they are filtered out. I would suggest making a clone of the table, and then you can clone this "template" whenever you need to get the original full table back.
I am in the process of using Foundation to create a website, and I have come across a problem that I can't seem to find the solution too. I have noticed that when expanded, some of my drop-downs get cut off in the Mobile Version of the Top Bar, and I was wondering if anyone had come across this issue, or had a fix for it. Did I do something in the CSS that made the JS no longer count all of the elements correctly?
You can see what I am saying here.
http://www2.100foldstudio.org
Just try this by adding in css.
.jScrollPaneDrag {
height:0px!important;
}
I think the link is break in theme
Update the link from
http://www2.100foldstudio.org/wp-content/themes/100foldstudio/_/js/functions.js
to
http://www2.100foldstudio.org/wp-content/themes/100foldstudio/js/functions.js
Figured out that if I add a List Item at the end of the main top bar section in "mobile" mode, and added a clearfix class to it, the js kicked in and started calculating the height correctly.
Thanks guys,
I'm currently working with a set of links that are getting their background images replaced when they are focused, hovered over, and non-focused; but right now I also need to fix it so that when you hover a focused link you'll get yet another result. My searching hasn't found anything and my experiments with anything like:
a:focus:hover { background:url(image.url) no-repeat;}
have met with less than desired results. Does anyone know of way to simply do what I'm trying for?
This should work, but focus won't work in IE without a valid doctype, so I doubt :focus:hover will fare any better.
Solution found, that method does work; but only when you remember to include the class and sub-class names that you are applying to an item.
Is there a way to bold only part of the text in a drop down list option or is this not possible?
I know that you can style the entire option with CSS, but that is not what I am looking for. And HTML inside of an option tag does not render.
Here would be an example of a drop down list item:
SomeID - Description of ID
You cannot do this. The most likely solution you'll find "out there" would be to add a surrounding span with hard coded style, but neither IE (7) nor Firefox (3.0.12) honor this. In fact, if you look at the generated source in Firefox, the internal span is completely stripped out.
What you can do is use a JavaScript solution to give you the appearance of a select without actually using a select.
EDIT: And here's a great HOWTO on how to do it: http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/
Not possible or at least not working cross browsers. If you really need this, you can create your own dropdown but I wouldn't recommend it.
What is the simplest and most elegant way to simulate the hover pseudo-class for non-Anchor tags in IE6?
I am specifically trying to change the cursor in this instance to that of a pointer.
I think the simplest way is to use the hover.htc approach. You add the hover.htc file to your site, then reference it in your stylesheet:
body { behavior:url("csshover.htc"); }
If you want to keep things as clean as possible, you can use IE conditional comments so that line is only rendered users with IE6.
Regarding your request -- I am specifically trying to change the cursor in this instance to that of a pointer -- the easiest way is to specify cursor:pointer in your css. I think you will find that works in IE 6.
Try this to verify (where div can be any element):
<div style="background:orange; cursor:pointer; height:100px; width:100px;">
Hover
</div>
I would say that the simplest method would be to add onmouseover/out Javascript functions.
Another alternative that will fix many more issues in one go is to use IE7.js.
Another approach, depending on what the item is, is to add a non link anchor and set its display to block. Either put the anchor within or surrounding the item you want the pseudo hover behavior on.
Aside:
I actually already needed to swap the image anyhow
Make sure you take a look at Image Sprites. Sometimes its much nicer to use one image and "shift" the image then to use two separate images and "toggle" or "swap" between them. In my experience its been much nice when as user interacts with it is sometimes an advantage that there is a single request for the 1 image then multiple requests for multiple images.
I liked the mouseover/out best since I actually already needed to swap the image anyhow. I really should have thought of doing this with javascript to begin with.
Thanks for the quick answers.
#Joseph
Thanks for that link. I had never heard of this technique before and really like the idea.
I will definitely try that out and see how I fare with it.
If your willing to use JQuery, I would use Set Hover Class for Anything technique.