I have been using the following CSS to apply an effect at the bottom of elements in a menu:
.leftMenuProductWrapper div:last-child{margin-bottom:20px;}
This works fine initially, however after adding more elements in the menu, I realized it was a problem. I really only want to select the last div with .leftMenuProductButton within .leftMenuProductWrapper
Anyway to do this without using Jquery, just pure CSS?
Sounds like http://reference.sitepoint.com/css/pseudoclass-nthlastchild
Might want to check your browser compatibility though.
Related
I have 2 modals that I'd like to style differently at the modal-dialog level. I'm not sure how to do it. It seems that if I apply a style that I think should only apply to one, it applies to both of them. One modal template is passed as an HTML string, the other is passed as a script/ngTemplate that is part of the partial page that the controller runs on, if that difference matters. The one that is passed as a string has an ID on the root div, and the CSS that is applied to that doesn't seem to work. But if I have just a .modal-dialog in my css, that is applied to both modals, as I would expect it to. In the Chrome debugger, the #ErrorModal selector is greyed out, so it does see it, it's just not applying it, even with an !important, and I'm not sure why. When either modal is displayed, the HTML looks similar, in that the one that uses the template doesn't contain any of the classes from the parent div that it's wrapped in. One of the main things I want to do is set the background-color of the error modal to white, but leave my other one opaque.
I've looked at this question, but I don't know that it will let me apply styles 'above' the template.
My css-fu isn't very strong, nor is my Angular, but it seems like the specificity should make it apply.
Any ideas?
Turns out there is an option you can pass to the modal, windowTemplateUrl. I haven't found great documentation for it, but I was able to cobble something together using this question as a springboard.
I have a div and apply the latest version of tinymce (4.2.5) to it, including some of my websites stylesheets.
When I use the editor old fashioned way the loaded css is only applied to the div I'm attaching tinymce to. Like a charm.
But I want to use the inline: true option. When I use that all the css is applied to the complete page of the application, not only the div.
Is this expected behavior? Or should I look for another approach? My main reason to use the inline feature is that it keeps the toolbar visible on scrolling. Unfortunately tinymce loads different sets of html for the inline and fixed toolbar (for example, the menu bar and icon/tool bar are separate div's. On inline they have a parent div) so just applying the same or similar css isn't working out.
Anybody has any tips or tricks for me? Or should I accept the limitations of one or the other?
You will have to accept the limitations.
Both editor modes need different css for the UI and in inline mode it seems to be necessary to apply it to the complete page (even though you don't like that).
I am trying to make a horizontal nav that can contain multi-line content in each navigation element and have each item's height be the same.
Here is a partial solution that should explain what I'm after, using display:table.
Unfortunately display:table doesn't work in Internet Explorer 7 which (+html5 shiv) will be the primary browser for viewing the page (corporate and internal). Even here the problem is that the <a> only fills up as much space as the content, when I want it to be active everywhere inside the li (as if the <a> tag were wrapping the <li>, which is not allowed)
I want it to be as semantic as possible, and hopefully not use tables (though if that's the only way.. it's the only way). Is there any way to achieve this? (even in a table right now it's not quite working)
Is it an option to use jQuery?
You could solve it then this way: http://jsfiddle.net/nywYz/2/
My code creates CSS divs with dynamic names
i.e.
cke_record_body_19
cke_record_body_54
Is it possible to style all divs that contain the string cke_record_body_ in their name using CSS?
The best cross browser solution is to style them by adding a class to each div.
Can you just have your code give these divs a class="cke_record_body" attribute? Then you can just apply a style to them however you want and ignore the ids.
If you really have to this should work:
div[id*="cke_record_body_"] {
}
Keep in mind I believe this is CSS3 so I have no idea what current support is, but really this is the only way to do it in straight CSS without other libraries. If you are using jQuery or something see Nealv's answer.
sure:
$("[id^=cke_record_body]*").something()
I have a label with a tooltip attribute for rollover effect. This works all great. However, it seems to get hidden behind any dropdown lists that are nearby. I have tried adjusting the z-index, without any luck. This issue does not appear in firefox, and I have not tested it in later versions of IE.
I realize this is probably due to IE6s poor css standards-compatibility, but how can I get around this?
Not the best because it requires javascript/jQuery library, but there's a workaround:
http://dhtmlgrounds.wordpress.com/2008/12/23/ie6-select-box-z-index-bug/
IE6 has a know error that selects always end up the highest in the z order...
Custom select control optional?
Have a look at this
Another idea is to use the ajaxtoolkit autocomplete?
The select dropdown in IE6 is implemented as a Windows control, so the browser isn't really drawing it. Thus, it doesn't support features like z-index. One possible solution is to hide all select boxes on the page when you show your tool-tip. Another option is a custom dropdown, which you can find in libraries like Ext.
As astander and MikeWyatt said, selects in IE are topmost. There are two paths to work-around this problem:
Use a custom select box, rendered with divs, etc. This is rather cumbersome, since you won't be able to replicate all of the drop-down functionality.
Place an <IFRAME> under the tooltip (tooltip z-index > iframe z-index). This will work-around the problem, yet you have to worry about the positioning of the iframe overlay.