[Solved] CSS code is not working in my local environment.

[ravinder07]

First i am beginner, I have spent lots of time only in reading about Html and CSS…now its time to code myself so i am doing practice by watching other people video tutorial and following them…..It look simple to follow them but my bad luck i exactly copy code and still it failed and did not work in my browser …. mean no changes for example if i gave any element margin-top:150px; It does not came down. I know inline element don’t come down but i used it on block element.

Here is a codepen of my code working fine here :
http://codepen.io/ravinder07/pen/tknxs

but the same code when i use in my pc. The margin do not work. Its making me mad. I am like seating 10-12 hours continuously on pc and failed to make a drop down menu bar.

Here is pic of code not working in my pc : http://i60.tinypic.com/2wcflm1.jpg

Here is video tutorial that i am following: http://www.youtube.com/watch?v=qdEBrz3TUWU

Here is other thread, I made when CSS reset did not work and still no idea why CSS reset code work in video tut and on codepen but not in my pc.
https://css-tricks.com/forums/topic/css-rest-not-working-on-ul/

[Paulie_D]

As I said in the other thread, most of us won’t watch a tutorial just to find something that clearly does work in Codepen just not on your local machine.

Have you copied all of the HTML & CSS given in the tutorial…is there extra code we aren’t seeing, have you saved the updated CSS sheet, have you refreshed your browser, how you cleared the browser cache? There are dozens of possible reasons.

Unfortunately, we can’t diagnose issues from pictures or from Codepens which don’t actually show the problem.

I’m sorry to say that the issue is at your end somewhere.

[ravinder07]

I give link of video just in case if someone want to see…no prob if you don’t want to watch.

I have pasted images only to show you that which code is running which is not. In this case margin is not working in my local machine.

Now I feel that the problem should be in my local machine but i am unable to figure it out.

I have validate my HTML and CSS code with the w3c validator.

My html is exactly same as the given tutorial. EXACTLY SAME NO DOUBT.

About CSS i am following steps and i stuck in step 2 which is CSS reset. The code used in video tutorial run perfectly in codepen but not in my pc but as you suggested me universal selector that overcome my problem and work ok.

Then i try to give margin to my ul which is step 3 and i stuck here my local machine not showing any margin but when i paste that code in codepen it works there. So there should be issue with my local machine. But i have no idea how to fix it.

is there extra code we aren’t seeing, have you saved the updated CSS sheet, have you refreshed your browser, how you cleared the browser cache?

Html is complete but CSS is not and not needed because my problem is about margin and css reset which must work.
Yes i have saved the updated CSS sheet.
Yes i have refreshed my browser.
I cleared browser cache by running cclearner.

Can you copy my html and css and try to run in your machine to clear that there is issue with my local environment.

[Paulie_D]

CSS is not and not needed because my problem is about margin and css reset which must work.

See…it’s that kind of assumption which makes me uneasy…you don’t know where the problem is but you are certain it’s not in the rest of the CSS.

[ravinder07]

/* Drop Down Menu */

body {
     background-image: url('bg.png');
}

/* Reset */
 * {
     margin:0;
     padding:0;         
     border:none;
     outline:none;
} 

/* Positoning */
ul.menu {
     margin: 150px auto 0 auto;
}

Look this is the CSS code. Which i applied on the html ul You can see in the codepen my html code. Which is really simple have only ul</ul> and two more nested <code>ul in the li of the main ul<code>, the main <code>ul have class menu.
Now see first i applied body background that working perfectly.
Then i apply universal CSS reset which is working perfectly,…… the one you remember is not working is below

.menu,
.menu ul,
.menu ul li,
.menu a {
      padding:0;
      margin:0;
      border:none;
      outline:none;
}

Now lastly i try to give margin to my main ul which have class menu.
ul.menu {
margin: 150px auto 0 auto;
}

Now see i found no reason here that why margin is not working in my local environment and working on codepen

If my local environment is causing problem then is there any other software/compiler where i can run my code.

Here is download link of my html and css https://www.mediafire.com/?ug4jofoblh2gc3f

Its simple you can understand it only by looking.

[ravinder07]

i had….then remove class for test and forget to class it again but still it does not work after putting menu class on ul

[Senff]

You forgot to add class="menu" to the <ul>, at least that’s how it is in the .RAR file you posted. For me it works if you put it back in there.

Put it back, clear your cache and it should work again.

[ravinder07]

Ops worked now…….i have 2 copy of my code and i was doing changes in one code and executing the other html in browser and that’s why that file do not show any changes because the changes done in other file………

Sorry

It wasted my more than 10 hours…..i was blaming my computer.

[Author]

Posts