shiva upadhyay
Reputation: 331
Why is my CSS getting overridden?
MY CSS is called ppcss.css but after the 3 jquery links that i have, it overrides my css and makes my page look different. Can anyone help me solve this issue? modify or change code for explaining me. thank you.
$(function() {
$( "#tabs" ).tabs();
});body { background-color:#00BFFF;}
div#header { width:auto;
height:75px;
background-image:url('banner.gif');
}
h1{ color:white;
text-align:center;
font-size:1.8em;
}
h3{ color:white;
text-align:center;
font-size:1em;
}
div#wrapper{width:1200px;
background-color:#fff;
margin-left:auto;
margin-right:auto;
}
h1.head,h3.subhead{font-family:georgia,serif;
margin-left;20px;}
h1.head{font-size;2.25em;
padding-top:15px;
}
h3.subhead{ margin-top:-20px;
letter-spacing:1px;
}
ul#navlist li{ display:inline;
list-style-type:none;
padding-right:30px;}
ul#navlist{
background-color:#ADFF2F;
margin-top:.99px;
margin-bottom:1.99px;
}
ul#navlist a{
text-decoration:none;
font-size:1.5em;
}
ul#navlist a:hover{ color:red;
}
div#leftcol{ float:left;
width:180px;
margin-left:2px;}
div#maincol{float:left;
width:500px;
margin-left:15px;
margin-right:15px;
text-align:center;
}
div#maincol h5{font-size:85%;
line-height:1.25em;
text-align:center;
margin-right:1px;
font-family:arial, sans-serif;
}
div#rightcol{ width:180px;
float:right;
margin-right:20epx;
}
div#footer{ background-color:#ADFF2F;
height:15px;
clear:both;}
#home div.smfeature{width:180px;
height:auto;
border:thin solid red;
margin-bottom:10px;}
#home div.smfeature h4 { font-family:arial,sans-serif;
font-size:75%;
color:brown;
background:#48D1CC;
text-align:center;
letter-spacing:2px;
padding:.5em;
margin-top:0px;
margin-right:0px;
}
div#searchbox2 { background-color:#7B68EE;
text-align:center;
}
div#links { width:150px;
height:auto;
text-align:center;
}
a { text-decoration: none;
}
p a:hover{ color:red;} <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li><a href="#home">Homepage</a></li>
<li><a href="animals.html">Animals</a></li>
<li><a href="Algae.html">Plants</a></li>
<li><a href="FAQS.html">F.A.Qs</a></li>
<li><a href="ContactUs.html">Contact us</a></li>
</ul>
<div id="home">
<div id="wrapper">
<!-- header -->
<div id="header">
<h1 class="head"> Underwater World </h1>
<h3 class="subhead">
A New World!
</h3>
</div>
<!-- left column -->
<div id="leftcol" >
<div class="smfeature">
<h4> Who we are. </h4>
</div>
<div class="smfeature">Upvotes: 4
Views: 414
Answers (4)
Heri Hehe Setiawan
Reputation: 1633
Simple workaround will be increasing the CSS-specifities. For example I've updated every ul tab properties into 'html body #tabs > ul[role=tablist]' and it will now respect your new rules.
$(function() {
$( "#tabs" ).tabs();
});body { background-color:#00BFFF;}
html body div#header { width:auto;
height:75px;
background-image:url('banner.gif');
}
html body h1{ color:white;
text-align:center;
font-size:1.8em;
}
html body h3{ color:white;
text-align:center;
font-size:1em;
}
html body div#wrapper{width:1200px;
background-color:#fff;
margin-left:auto;
margin-right:auto;
}
html body h1.head,html body h3.subhead{font-family:georgia,serif;
margin-left;20px;}
html body h1.head{font-size;2.25em;
padding-top:15px;
}
html body h3.subhead{ margin-top:-20px;
letter-spacing:1px;
}
html body #tabs > ul[role=tablist] li{ display:inline;
list-style-type:none;
padding-right:30px;}
html body #tabs > ul[role=tablist]{
background-color:#ADFF2F;
margin-top:.99px;
margin-bottom:1.99px;
}
html body #tabs > ul[role=tablist] a{
text-decoration:none;
font-size:1.5em;
}
html body #tabs > ul[role=tablist] a:hover{ color:red;
}
html body div#leftcol{ float:left;
width:180px;
margin-left:2px;}
html body div#maincol{float:left;
width:500px;
margin-left:15px;
margin-right:15px;
text-align:center;
}
html body div#maincol h5{font-size:85%;
line-height:1.25em;
text-align:center;
margin-right:1px;
font-family:arial, sans-serif;
}
html body div#rightcol{ width:180px;
float:right;
margin-right:20epx;
}
html body div#footer{ background-color:#ADFF2F;
height:15px;
clear:both;}
html body #home div.smfeature{width:180px;
height:auto;
border:thin solid red;
margin-bottom:10px;}
html body #home div.smfeature h4 { font-family:arial,sans-serif;
font-size:75%;
color:brown;
background:#48D1CC;
text-align:center;
letter-spacing:2px;
padding:.5em;
margin-top:0px;
margin-right:0px;
}
html body div#searchbox2 { background-color:#7B68EE;
text-align:center;
}
html body div#links { width:150px;
height:auto;
text-align:center;
}
html body a { text-decoration: none;
}
html body p a:hover{ color:red;} <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li><a href="#home">Homepage</a></li>
<li><a href="animals.html">Animals</a></li>
<li><a href="Algae.html">Plants</a></li>
<li><a href="FAQS.html">F.A.Qs</a></li>
<li><a href="ContactUs.html">Contact us</a></li>
</ul>
<div id="home">
<div id="wrapper">
<!-- header -->
<div id="header">
<h1 class="head"> Underwater World </h1>
<h3 class="subhead">
A New World!
</h3>
</div>
<!-- left column -->
<div id="leftcol" >
<div class="smfeature">
<h4> Who we are. </h4>
</div>
<div class="smfeature">Upvotes: 0
Mohamed-Yousef
Reputation: 24001
jquery-ui.css apply its own styles to .tabs() if you want to use your own style .. remove this
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
or you can go to jquery-ui.css and make it blank
Upvotes: 1
th1rdey3
Reputation: 4358
You have to put your css after jquery-ui.css. Also in your css you have to override all the properties set by jquery-ui.css. For example, css loaded to ul li by jquery-ui.css are -
-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(255, 255, 255);
background-image: url(http://code.jquery.com/ui/1.11.2/themes/smoothness/images/ui-bg_glass_65_ffffff_1x400.png);
background-origin: padding-box;
background-size: auto;
border-bottom-color: rgb(170, 170, 170);
border-bottom-style: solid;
border-bottom-width: 0px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(170, 170, 170);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(170, 170, 170);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(170, 170, 170);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-style: solid;
border-top-width: 1px;
color: rgb(33, 33, 33);
display: block;
float: left;
font-family: Verdana, Arial, sans-serif;
font-size: 18px;
font-weight: normal;
height: 59.375px;
line-height: 22.8800010681152px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: -1px;
margin-left: 0px;
margin-right: 3.51999998092651px;
margin-top: 1px;
padding-bottom: 1px;
padding-left: 0px;
padding-right: 30px;
padding-top: 0px;
position: relative;
text-align: left;
top: 0px;
white-space: nowrap;
width: 194.53125px;
So, you have to override all of them.
I also noticed that you didn't set the id navlist in your ul. So your ul was not getting the css you wrote. I have modified you snippet a bit. It's not exactly ok, but it does show the effect of your css.
$(function() {
$("#tabs").tabs();
});<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<style>
body {
background-color: #00BFFF;
}
div#header {
width: auto;
height: 75px;
background-image: url('banner.gif');
}
h1 {
color: white;
text-align: center;
font-size: 1.8em;
}
h3 {
color: white;
text-align: center;
font-size: 1em;
}
div#wrapper {
width: 1200px;
background-color: #fff;
margin-left: auto;
margin-right: auto;
}
h1.head,
h3.subhead {
font-family: georgia, serif;
margin-left;
20px;
}
h1.head {
font-size;
2.25em;
padding-top: 15px;
}
h3.subhead {
margin-top: -20px;
letter-spacing: 1px;
}
ul#navlist li {
display: inline;
list-style-type: none;
padding-right: 30px;
}
ul#navlist {
background-color: #ADFF2F;
margin-top: .99px;
margin-bottom: 1.99px;
}
ul#navlist a {
text-decoration: none;
font-size: 1.5em;
}
ul#navlist a:hover {
color: red;
}
div#leftcol {
float: left;
width: 180px;
margin-left: 2px;
}
div#maincol {
float: left;
width: 500px;
margin-left: 15px;
margin-right: 15px;
text-align: center;
}
div#maincol h5 {
font-size: 85%;
line-height: 1.25em;
text-align: center;
margin-right: 1px;
font-family: arial, sans-serif;
}
div#rightcol {
width: 180px;
float: right;
margin-right: 20epx;
}
div#footer {
background-color: #ADFF2F;
height: 15px;
clear: both;
}
#home div.smfeature {
width: 180px;
height: auto;
border: thin solid red;
margin-bottom: 10px;
}
#home div.smfeature h4 {
font-family: arial, sans-serif;
font-size: 75%;
color: brown;
background: #48D1CC;
text-align: center;
letter-spacing: 2px;
padding: .5em;
margin-top: 0px;
margin-right: 0px;
}
div#searchbox2 {
background-color: #7B68EE;
text-align: center;
}
div#links {
width: 150px;
height: auto;
text-align: center;
}
a {
text-decoration: none;
}
p a:hover {
color: red;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="tabs">
<ul id="navlist">
<li><a href="#home">Homepage</a>
</li>
<li><a href="animals.html">Animals</a>
</li>
<li><a href="Algae.html">Plants</a>
</li>
<li><a href="FAQS.html">F.A.Qs</a>
</li>
<li><a href="ContactUs.html">Contact us</a>
</li>
</ul>
<div id="home">
<div id="wrapper">
<!-- header -->
<div id="header">
<h1 class="head"> Underwater World </h1>
<h3 class="subhead">
A New World!
</h3>
</div>
<!-- left column -->
<div id="leftcol">
<div class="smfeature">
<h4> Who we are. </h4>
</div>
<div class="smfeature">Upvotes: 0
Moriz
Reputation: 11
You can use a plugin like CSS Viewer in FireFox or it's own developer inspector (right click, inspect element) option to learn what styles are affecting each element and in which style sheet they reside.
You can then override any property from the default style sheet, in your own style sheet by including it (the link to the stylesheet) after the default js plugin stylesheet and using the !important statement in the involved properties, for example:
.elementClass {
border: 1px !important;
}
Upvotes: 0
Related Questions
- Using jQuery, css not changing
- CSS being read by jQuery is not corresponding to CSS being set by jQuery
- jQuery isn't modifying CSS
- CSS style overriding using jQuery not working properly
- Jquery overruling css
- Why is my CSS overriden?
- Styles from CSS file is overriding the style applied in the page
- How to make sure your CSS rules are not overridden
- jQuery CSS not applying
- CSS not applying