[Solved] CSS Reset not working on ul

[ravinder07]

I was following a video tutorial of making a drop down navigation bar and stuck in starting of CSS. I have exactly followed the video tutorial and have no clue why reset is not working in my browser and working fine in video tutorial.

Here is link of video tutorial : http://www.youtube.com/watch?v=qdEBrz3TUWU
at 12:34 you can see reset part. When he apply CSS reset.

I just paste my html and css in Codepen to give here link of my code and there i found that its working fine on codepen window but its not working in my browsers even my browser are up to date. Tried on firefox and google chrome both are latest version.

Codepen link : http://codepen.io/ravinder07/pen/JukGm

Now i want to know why it is not working in my browsers. It mean there must be other property would cause problem showing proper effect.
How i can identify if this is my browser fault?
I was like searching for half an hour on google about why css reset not working and then came here to post my problem.

[Paulie_D]

When you say ‘not working’ what do you mean.

If you mean that the menu is spaced a little away from the edge of the browser, it’s because the body has padding of it’s own.

We often add a universal reset like this:

* {
  margin: 0;
  padding: 0;
}

You still need the second reset on the ul/li etc though.

http://codepen.io/Paulie-D/pen/sjzrt

[ravinder07]

When you say ‘not working’ what do you mean.

I mean its not showing any changes. don’t know why working on video tutorial and not working in my browsers.
Here is pic : http://i59.tinypic.com/20palgm.jpg

As you suggested me about using universal reset. I replace my current reset code to universal selector and it worked.
Here is pic : http://i58.tinypic.com/3142lhl.jpg

You still need the second reset on the ul/li etc though.

I did not see its need after using universal selector. My code is exactly same as codepen after using universal selector.

Why i still need second reset on the ul/li ?

And one more thing why css reset code align the ul list item straight vertically….I thought css reset is only used for removing browsers default values….nested list item supposed to be css ul selector effect not the browser effect.

[Paulie_D]

So you want it like this?

http://codepen.io/Paulie-D/pen/oqwlC

[ravinder07]

No i wanted this http://i58.tinypic.com/3142lhl.jpg
but instead of using universal selector. I accepted to get this result by putting below code. Because this code worked in the video tutorial which i am following and its not working in my browser but it also working on codepen window. I just want to know why this code is not working in my browser.

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

Here is video tutorial which i am following http://www.youtube.com/watch?v=qdEBrz3TUWU
at 12:34 he is applying above code you can see and that code is working there and codepen but not in my pc so i have to use universal selector instead of it.

Hope i am not confusing you.

[Paulie_D]

Seriously, I’m not going to watch a tutorial just to see what isn’t working on your PC when it clearly does in a live environment.

I can’t see everything you have in your files so there may be something else going on.

It seems to me that the universal reset has solved your problem.

[ravinder07]

That’s the problem code working in live environment like codepen and not working in my local machine.
Yes universal reset worked here.

[Author]

Posts