Why does my css not work in wp?

CMS & WordPress
1

Hi, happy easter or easter bunny day to all.
I am working on learning how to create wp pages.& even bought the sitepoint create your own wicked theme book.
but this is where I am at.
my initial php/html/css layout (number 2 in the image) is working out ok. but wp (number 1, on top in the image) is not.

I was able to add a second side bar & second menu to the wp theme.
but wp doesn’t recongize the size settings making the second menu on the left hand side about 5px wide rather than 20% and the css ribbon style on the right hand side also doesn’t display.

was wondering how this was & how I can go about fixing it?
and below is the rather simple css…And actually as I look at it am thinking i need a second nav css rule for the left hand side bar…betcha that is it…


#clear{
clear:both;
margin:0;
padding:0;
}

#wrap{
width:100%;
height:100%;
//border: 3px solid #000;
margin:0px auto;

}
#core{
float:left;
width:65%;
min-height:780px;
padding:0px;
margin:0px;
border-right: 1px solid #000;
}
#header{
width:100%;
height:200px;
float:left;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
background-color:#000;
text-transform:uppercase;
}
#header h1{
display:block;
margin:0px 0px 0px 700px;
padding:0px 0px 0px 10px;
color:#fff;
border-left: 1px solid #fff;
width:300px;
line-height:200px;
}

#container{
float:right;
width:75%;
//border: 5px solid #000;
//background-color: #4C1F00;
}

#mainBody{
float:left;
width:90%;
height:auto;
margin:0px 0px 10px 10px;
padding:0px 0px 10px 0px;
text-align:justify;
border-bottom: 1px solid #000;
//background-color: #4C1F00;
}
#secondaryText{
float:left;
width:90%;
height:auto;
margin:0px 0px 10px 10px;
padding:0px 0px 10px 0px;
text-align:justify;
border-bottom: 1px solid #000;
//background-color: #4C1F00;
}

#sideBar01{
float:right;
width:25%;
min-height:780px;
margin:0px 10px 0px 0px;
padding:0px 10px;
border-left: 3px solid #000;

}

#sideBar02{
float:left;
width:20%;
min-height:600px;
//margin:0px 10px 0px 0px;
//padding:0px 10px;
border-left: 3px solid #000;
}
.widget{
margin: 10px 0px 5px 10px;
border: 2px solid #000;
font-size:14px;
 }

.widget h4, h5{
margin:0;
padding:0;
}

#footer{
width:100%;
height:30px;
color:#fff;
background-color: #4c4c33;
border-top: 2px solid #000;

}
/*  ************* navigation **************** */
nav {
margin:0 0 0 -50px;
text-transform:uppercase;
}
nav ul {list-style: none;}

nav ul li a{
display: block;
padding: 10px 10px 10px 20px;
color: #fff;
font-size:16px;
text-decoration:none;
background-color:#ccc;
margin: 0 0 5px 0 ;
line-height:25px;
position:relative;
border-top: 2px solid #666600;
border-bottom: 2px solid #666600;
}

nav ul li a span{
position: absolute;
right: 100%;
top: 10px;
width:50px;
height: 100%;
background-color:#ddd;
border-top: 2px solid #666600;
border-bottom: 2px solid #666600;
border-left:2px solid #666600;
background-image:url(./images/shadowPng.png);
background-position:top right;
background-repeat: repeat-y;
}

nav ul li a span::before{
position: absolute;
right: 100%;
top: 10px;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #fff;
}
nav ul li:nth-child(2) a, nav ul li:nth-child(2) a span {background-color:#520000;}
nav ul li:nth-child(3) a, nav ul li:nth-child(3) a span {background-color:#661400;}
nav ul li:nth-child(4) a, nav ul li:nth-child(4) a span {background-color:#000;}
nav ul li:nth-child(5) a, nav ul li:nth-child(5) a span {background-color:#333;}
/*  ************* text **************** */
h3{
display:inline-block;
width:175px;
margin:0 20px 0px 0px;
border-right: solid 2px #000;
color:#fff;
}
2

Can you link us to the page with the problem? Otherwise, the issue is hard to understand. We need to look at the HTML along with the CSS.

3

ha nope. sorry. it is on sandbox and localized on my laptop now.

4

so i have managed to solve some of the probs. but was wondering if wp only recognizes one nav tag
I tried
#sidebar02. nav ul
&
#nav02
to change the style on the second menu, but it keeps only applying the style in the main nav tag.

5

There’s a . in there that kills that rule. All normall CSS works in WP.

6

thank you! also…(massive face palm) i had id it as #sideBar02…note to self. all else fails double check the spelling. D’ho!
There is still some stuff that is throwing me off. I colored my header text white. but it is coming lavander/purple…did an inspect element and got this:
a:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
but where do I find this it is not part of my code?! it is not it the style.css how do I take it out?

7

Those styles are the browser default styles, meaning you haven’t styled that element. We need to see your HTML to know what’s happening, but presumably you have something like a heading element colored white but a link inside that, so you have to style the link itself.

8

oh no…i did style it. the webkit has over ridden it.

I have for it


#header{
width:100%;
height:200px;
float:left;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
background-color:#000;
text-transform:uppercase;
}

#header h1{
display:block;
margin:0px 0px 0px 650px;
padding:0px 0px 0px 10px;
color:#fff;
border-left: 3px solid #731700;
width:300px;
line-height:200px;
}

it works fine in my workup php/html/css page but wp has something over writing it.

9

Well, only you can answer that, as we can’t see it. But Firebug of other browser dev tools will tell you what is applying. You didn’t answer my question about the HTML, so there’s nothing more we can do to help. It looks like there’s a link in there that needs to be styled too. Either way, if there is a more specific style being applied by WP, you just have to override it with something more specific.

10

I appreciate that and thank you for taking the time to offer some advice.
I am sure i’ll put it live soon enough so I can see how it works.
But very good point about the link. I didn’t create the header as a link element in my original work up. so need to find where wp is applying those settings.
thx
d

11

It may not be. I’m just guessing. View the page’s source code in the browser and paste the header code here so we can at least see what you are working with. :slight_smile:

12

All right! good point…had not tought that would be enough but here we go.

13

OK, so you need to style the link explicitly:

h1 a {
  color: #fff; text-decoration: none;
}
14

thank you! You were right!
that did it.
one more question, why am i seeing duplicates?
at the very top of the inspect element text in the image you can see two <head> tags but my code doesn’t have two.

15

I suspect if you look at the generated code (view > source) you’ll find that you do have two heads, so one of them needs to be cut off.

A WP page is made up of various parts (header.php etc.) so the <head> element has been duplicated in there somewhere.