I have the following dropdown menu: http://jsfiddle.net/McKgU/ which as you can see works fine. However When out on eBay the layout is all over the place.
You're styling all unordered lists and list items. What!? You need to make your selectors very specific so you don't interfere with existing styles on the page.
You can wrap everything in a div and then use the child selector to select the ul and li.
Or, since you already have a ul#menu, use that in the CSS. ul#menu { ... } This will only style ul elements that have the "menu" ID. I'd still change the id from menu to something more specific in case the page has a ul with menu id, too.
Refrences: Selectors
Try this: http://jsfiddle.net/McKgU/5/
What I've done:
1) Prefixed your "menu" id with #NOINTERFERE00_
Why? Since "menu" is a fairly common name choice for ids/classes/whatever, the likeliness of there being another element on the page with the same name is very high. This ensures that there's no interference (css or js) between your 'menu' and any other element with the id "menu" on the page.
2) I've added !important to the end of each css declaration.
Why? It's also very likely that the author of the page you're inserting this into has styles targeting ul's, li's and a's. This ensures yours take precedence (unless the author is using important on his own stylesheet. He shouldn't in most cases, but might.)
What I haven't done:
3) Reset all the styles applied by the original author's stylesheet to ul, li and a's. (I'm still figuring out the better way to do it)
Scoped CSS solves both problem 1 and 2 in a more elegant way. However only Chrome supports is at the moment, I believe.
Related
I'm trying to learn how to make my own Tumblr theme following their documentation http://www.tumblr.com/docs/en/custom_themes.
There is a number (or {PostID} as the documentation describes it) on each post that I don't want.
I think it has something to do with the <ol id="post"> ... </ol> around the posts but if I remove it or change it to <div class="posts"> ... </div> it just turns into bullet points.
Does anyone know how to remove the numbers or bullet points completely?
There's a few bits here and there that are a little more advanced than you need to delve into right now but the most of it is basic HTML.
You can change the templates but unfortunately the post ID has to stay ..it's built in.
You can find more info here; https://webapps.stackexchange.com/questions/28049/changing-messy-tumblr-url
Good luck with the template.
When you changed ol to div, did you change the children, too?
The ol element is a list which contains li elements, which are list items, and typically displayed as bullet points.
If you want to remove the display of the ol, use CSS. For example: ol#post li {list-style-type: none;}.
If you want to change the HTML element (e.g., from ol to div), make sure that you also change the li elements (e.g., also to div).
If you want to remove the post ID (which is displayed somewhere on your site), edit your theme and remove {PostID}.
Here is a difficulty I am trying to solve. I am working inside a client's page to develop a scroller interface. Basically, I cannot change the doctype, the surrounding elements and the stylesheets or scripts that are already in the client's page and I have to make my little block of code "fit" inside this. This is common for web developers.
The tricky part now is that some img elements inside my block are actually being targeted by a CSS rule inside the inherited client's stylesheet (which, of course, I cannot remove or change). It would be too long to explain why here in this case I actually can't use more specific CSS rules myself to compensate this, but it's a fact. So my question is : is there a way to prevent a HTML element from being targeted by a CSS rule other than creating another rule or deleting the rule? The difficulty is that a rule like
.containter1 .containter3 { ... }
will target an element inside :
<div class="container1">
<div class="containter2">
<div class="containter3">Element
...
Elements inside the page don't make "walls" for CSS rules, which "jump" over containers to target elements. So a rule like
img { ... }
will target any img tag. The only way I know to compensate this is to create a more specific CSS rule targetting the precise img to protect. But I cannot do that here. Is there a way to get the same result without creating a CSS rule, only by adding HTML?
/* EDIT TO CLARIFY */
I know CSS rules, specificity, inheritance, etc. My question was more pragmatic. Consider this example to clarify the problem : imagine you have a client's stylesheet that you can't touch and that defines the following general rule:
img { display:none; }
The problem is that you cannot set a corresponding generic rule to do the opposite, like :
img { display:not-none; }
because there is no such thing as the opposite to none. The opposite of "none" can either be "inline", "block", "inline-block", and so on.
So basically, this means that the first generic rule forces you to explicitly define the display property for each and every img in your page. And that sucks. So I was trying to find a hack to solve situations like this (my actual problem is even worst than this, believe me, but this example is much clearer and quicker to explain).
If you're saying you want to prevent targeting without changing any code, then no, that's obviously not possible.
In-line styles always over-ride style-sheet rules ( unless they're using an !important tag, then you'll need to also use it).
You should be able to reset whatever elements you need, using syntax from your favorite CSS reset. Here are some options:
http://www.cssreset.com/
So, something like -
<div style="border:0 !important;padding:0 !important;margin:0 !important;height:auto;"></div>
is your best bet.
The only way you can change CSS for specific element is modification of existing styleshits or creating new style which is more specific and will overload other styles.
and I have to make my little block of code "fit" inside this.
Once you have make some block of code, you can put style tag inside that block of HTML code like this, for instance:
<div id="block_of_code_available_for_modification">
<style type="text/css">
//css code which will fix styles of your content without influencing other elements on a page.
</style>
</div>
Or, if you have just a few elements you need to fix styles for, you can use style attribute of HTML elements (once you can set modify HTML, you can always add something like below... Well, the same as adding style tag). Priority of css properties inside style attribute is the highest one. Except if there is no !important in some previouse styles:
<img style="any css properties you need" src="..." />
The default display value for an img element is inline-block. If you want to reset the display value for all images, why not use that?
If you've got multiple different types of elements that are being set to weird values, then the problem is maybe a bit more complex as you'd need to consider which elements to set to what display type. But all HTML elements do have well-defined default display types, so it shouldn't be too hard to reset them all.
img {display: inline-block;}
span, a, etc {display:inline;}
div, etc {display:block;}
... etc ...
If it comes down to it, you could just use one of the reset CSS scripts that are available, to set everything back to the correct defaults.
No there is no way you can stop other rules from getting applied on a particular element.
you have to redefine all those rules for that html element so they will overwrite all the other rules.
I have a CSS/HTML based menu and when i hover on a single menu item All child menu items shown. what can be the
root course for this problem ?
where should i start debugging in CSS file or HTML list ?
What can be the common curses for this ?
(Rather posting the code i prefer to solve this for own learning experience !
It sounds like a CSS selector issue. If more things are showing than you expect, it could be that the CSS selector (for :hover) is too broad and is picking up more items than you intend. You may need to make the CSS selector be more selective so that it only affects some of the child menus at a given time. You might be able to do this by defining different selectors that start with different IDs and then apply the :hover to just child elements of a specific element. If your code is a pure HTML/CSS implementation, that seems to be the most likely cause. It could also be that they way you have structured the HTML causes all of the child menu items to fall under the same parent element (or branch), so you may also need to ensure that each set of child menus has some unique parent/grandparent that you can base the CSS selectors on. Hope that helps point you in the right direction--good luck with figuring it out!
li and ul are already defined throughout the website and i have a gallery page that i use a nextgen gallery plugin.
However there is a collision with the li style and nextgen li style i guess,
web page global css li is overriding the gallery's li and putting check box next to it, in which other pages are done like this.
How can i reset this only for this block of gallery? possibly place in a div?
Thanks.
You need to determine the specificity of your selector and change it accordingly.
Alternatively, open the gallery's CSS and add !important.
If !important isn't working then it sounds like you need to work out the most specific rule that is giving it the unwanted style.
Use Firebug in Firefox. You can see the most specific rules, disable them, and edit them.
you can try adding the second stylesheet after the global stylesheet, that way the second one will override the first
I've difficulties to set up css rules of tags containing text inside li tag. Anything inside li becomes anormaly smaller. To make it readable, I need to make it bigger in an important scale (for instance, from .8em to 1.1 em). Unfortunately, the new text's size doesn't always match the one before it was put inside the anchor tag.
What I want is to be able to restore the previous settings as before I place the tag containing the text inside the li tag. Is there a trick to do that? Let's say, for font-size = 12px, do I need to make it, for instance, 15px to go back to 12px?
EDIT
Actually, a tag is not causing me trouble, but it's rather li tag which shrinks all the put inside. So, I've edited the above post by replacing all the a tag by li tag. I'm sorry for that. Anyway; while I thought I've run into an issue, after reading article suggested by S. Jones, I'm aware of the inheritence property on some tags.
Here's the issue. Let's say, I have
<a href = "somewhere">Somewhere<a>
a { font-size: 12px;}
After I put the above tag inside a li tag
<li><a href = "somewhere">Somewhere<a></li>
a { font-size: ???;}
After reading S. Jones article, I wonder if I need to disable inheritence or use IMPORTANT!!!
Thanks for helping
It sounds like you've got cascading and inheritance issues with your CSS.
You might want to look through the following:
Cascading Order and Inheritance in CSS
CSS Structure and Rules
There are several ways that you could fix your issue, but I can't say sure without seeing your CSS and HTML. If you could post some sample HTML along with your CSS file which illustrates your issue - several people here on SO will be able to recommend solutions.
Debug Recommendation: If you're not currently using it, you might want to look at installing the Firebug plugin for Firefox. It's a great tool for inspecting your page. You can highlight specific areas, and Firebug will show you which HTML elements and CSS classes are responsible for the layout.
UPDATE: Thanks, that's much more clear. Check your CSS file for any styling being applied to your list elements (li, ol, ul). You'll either need to remove some styling from these elements, or define font-size specifically for a elements nested within li.
For Example: li a {font-size:12px;} which will set the font size for a elements, only when they are nested within li elements.
Cheers.