I have a menu that uses its own styling but jQuery Mobile css keeps overriding my menu styling. I wished they would limit there styling to ui-body. Is there a way to prevent jQuery Mobile css from overriding my menu styling? I have tried moving my styling before and after the jQuery Mobile include link but no help. also have tried data-role="none", no help. Thanks for your help.
Try using !important to stop JQ Mobile from overriding your styles.
EX:
font-weight:normal !important;
Ok, it would help if you supply example code but I'm assuming the following is happening.
Sample html:
<div class="my-menu">
<ul class="menu">
<li><a href="#"></li>
<li><a href="#"></li>
<li><a href="#"></li>
</ul>
</div>
jQuery mobile probably has a class set as follows:
<style>
a {color:blue;}
</style>
To override this you need to be more specific with your classes:
<style>
div.my-menu ul li a {color:red;}
</style>
Related
I am trying to understand angularJS and have the following fiddle written, which is a very simple message ticker.
The messages are shown by changing the CSS display attribute of one of the li elements.
<div id="ngtickerMessage" class="ngtickerMessage">
<ul >
<li ng-style="{display:setVisible($index)}" data-ng-repeat="msgObj in msgs track by $index">{{msgObj.msg}}</li>
</ul>
</div>
</div>
Is it possible to (cross-) fade the contents of the li element based on ngAnimate using the ng-style attribute ?
I used opacity instead of display in the ng-style of li and added a CSS transition to it. FIDDLE. Hope it helps.
I am new to CSS so please don't be to harsh on me. I am trying to place the yellow background DIV right below the "Header" DIV, but for some reason, it seems to place a padding before and after and I don't really understand why. If I remove the list, than the problem disappears.
This is the HTML code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS</title>
<link rel = "stylesheet" type="text/css" href="css.css" />
</head>
<body>
<div id="headerDiv">
<p>Header</p>
</div>
<div id="listDiv">
<ul>
<li>Menu item 1</li>
<li>Menu item 1</li>
<li>Menu item 1</li>
<li>Menu item 1</li>
</ul>
</div>
<div id="mainviewDiv">
Main View
</div>
<div id="footerDiv">
Footer
</div>
</body>
And this is the CSS:
#charset "utf-8";
/* CSS Document */
div#headerDiv { background-color:#F00;
height:100px;
position:relative;
}
div#listDiv {background-color:#FF0;
}
div#listDiv ul {list-style-type:none;}
div#listDiv li { display:inline;}
div#mainviewDiv {background-color:#060;}
div#footerDiv {background-color:#999;}
I don't know if you have tried this, but adding this to the top of your CSS file might help you out:
*{
margin:0;
padding:0;
}
But when you publish your website use Eric Myers CSS reset
And like Maxime Morin said, you might want to check out http://nicolasgallagher.com/about-normalize-css/
set your #listDiv and #headerDiv to have a margin:0px;
Renders fine in Chrome telling me you're probably using IE. You can solve issues like this by using a CSS reset http://meyerweb.com/eric/tools/css/reset/ which sets all your CSS elements back to 0 so all browsers start at the same point, overriding some of their built in default CSS.
The thing to keep in mind about resets is you know have to style each element you use. For example lists will have no padding, no default list style etc. You can of course remove some items from the reset but that sort of defeats the purpose of them.
The problem is probably the top margin of the ul element, due to collapsing margins.
Also make sure the divs don't have a margin and padding (which they probably have not, because divs don't have margins by default.
People often use CSS reset like this to remove all those margins and paddings on all elements. After that, you can add specific styling where you need it. You should consider using that once you start the 'real' styling.
Some tags has default styles - even if you don't really declare them.
You can override this rules for example by adding simple:
margin:0;
padding:0;
into your CSS declarations.
Your Unordered list is creating left padding of 40. Replace your code with this:
div#listDiv ul {list-style-type:none;
padding:0;
}
You will come across a lot of default styles troubles if you're just starting out. Keep at it and you will learn. We all had to start somewhere!
I need to vertically align the Facebook and Twitter share buttons. This is how I render them:
<a name="fb_share" type="button" share_url="http://www.livkontrol.com/blog?id=1"></a>
Tweet
Even though they are almost the same size, one appears much on higher than the other. They also seem to ignore any kind of CSS rule I apply to the link element. Does anyone knows how to override the CSS of these elements and have them vertically aligned side-by-side?
I've had the same issue. Facebook uses an inline tag that sets the text on the bottom, causing it to render below twitter and facebook. My solution is to override it by placing CSS after the actual button call. Works nicely:
<style media="screen" type="text/css">
.fb_iframe_widget span
{
vertical-align: baseline !important;
}
</style>
The call modifies facebook's own CSS style.
the answer provided by Marie doesn't seem to work anymore.
For me this does the trick:
html:
<ul class="social">
<li> put button markup here </li>
<li> and next button </li>
...
</ul>
css:
.social li{
display:inline;
}
.fb-share-button{
position:relative;
top:-7px;
}
it might be neccesary to adjust the value for top, depending on the button style/size, future changes.
ps: I know this is an old question, but google likes it..
The correct answer is here
style="height:20px; vertical-align: top;"
I got it to align by styling the first Facebook span with !important to override its inline style:
.fb-like > span {
vertical-align: baseline !important;
}
Tho I'm not sure if this will work on all browsers.
This worked for me, added to my own css.
.fb_iframe_widget span{vertical-align:inherit !important;}
I have some classes that are grouped. However in IE7 and lower it doesn't implement any of the classes in the group. It just seems to ignore them:
#subnav a,
#subnav span {
/* css here */
}
And the html:
<div id="subnav">
<ul class="depth-1">
<li class="selected">
Some Link
</li>
<li>
Another Link
</li>
<li>
<span>Header</span>
<ul class="depth-2">
<li>
Google
</li>
</ul>
</li>
</ul>
</div>
Is CSS grouping not supported in IE7 and below or is something else causing this to happen?
Thanks
You could try a few things here:
make sure this rule group is last in the css stylesheet to ensure that no other styles are overwriting these ones
make the selectors as specific as possible, to ensure the elements are targeted. So, instead of #subnav a, try div#subnav ul.depth-1 li.selected a
make sure the styles can be applied to those particular elements. a and span are inline elements and do not accept all styles.
Story short I have widgets sidebar. I style it like this:
.widgets ul {padding: 10px}
Now one of the ULs inside widgets I want to avoid padding from it, but keeping all other ULs use default padding of 10px.
So i tried to give class to children UL which I want no padding on like this
.tabs {padding:0}
I tried ul.tabs, and .widgets ul.tabs nothing seems to take effect. It still receives padding 10px. And I can't afford to do custom padding for every UL inside the widgets.
Can you please tell me what I am missing ?
The html is pretty basic.
<ul class="widgets">
<li><h2>Widget title 1</h2>
<ul>
....my widget content
</ul>
</li>
<li><h2>Custom widget 1</h2>
<ul class="tabs">
...this one I want to have padding:0..
</ul>
</li>
</ul>
Thats the html basic framework. I set padding:10px to any ul in PARENT widgets ul but I want specific custom widget to have its own custom styles, I can't do it :( in this case ul class=tabs
The "C" in CSS stands for "cascading". Learn about the cascade and you will see that your second rule is less specific than the first, so the first wins.
In general, the rule with more class selectors wins, and #ids trump most stuff.
To answer your question, adding specificity will do it.
.widgets ul.tabs {padding:0}
(assuming the .tabs is indeed on the ul like you said.)
A more specific CSS selector should override a less specific one. So your experiment with using .widgets ul.tabs should work. Is it possible that when you tested that, your browser had cached an earlier version, or some such?
Here's my sample HTML page. First I tried it the way you had it; it didn't work (as it shouldn't). Then I changed it to what is here, and it worked (in Firefox).
<html>
<style>
.widgets ul {padding: 10px}
.widgets ul.tabs {padding:0}
</style>
<ul class="widgets">
<li><h2>Widget title 1</h2>
<ul>
....my widget content
</ul>
</li>
<li><h2>Custom widget 1</h2>
<ul class="tabs">
...this one I want to have padding:0..
</ul>
</li>
</ul>
</html>
example of what dman is talking about, with your code:
http://jsfiddle.net/SebastianPataneMasuelli/8WRam/
( i think you might have missed the 's' in .widgets )