59

I am working on adding a menu to a map. The menu is working fine except I noticed there is always a padding to the left no matter what CSS applied to the menu. The padding seems to be originated from (-webkit-padding-start: 40px;) and it does not want to go away. I tried to override it with 0 !important; that didn't do anything.

After Googling found this:

-webkit-padding-start: 40px; What it should be for IE and Firefox?

However could not find anything else on how to override or make this go away. I need to have items in the menu all the way to the left.

enter image description here

Attached is a screenshot, green area is what I am talking about and under styles you can see -webkit-padding-start: 40px;

Community
  • 1
  • 1
  • @sqe `margin-left: -40px;` this actually worked, I am still not sure where it is coming from? –  Mar 27 '15 at 18:12
  • See my answer below, it's because of the user-agent stylesheets of every browser. – sqe Mar 27 '15 at 18:13
  • After adding `margin-left: -40px;` this '-webkit-padding-start: 40px' still there but the menu is all the way to the left. Thank you. –  Mar 27 '15 at 18:15

3 Answers3

84

It's because of the user-agent stylesheets of every browser. You should always reset all attributes in your css as your first step.

Short solution:

* {
  margin: 0;
  padding: 0;
}

/* your styling */

Longer solution:

http://meyerweb.com/eric/tools/css/reset/

sqe
  • 1,656
  • 4
  • 21
  • 38
  • 3
    This also works. I would rather use `margin-left: -40px;` for now because that will only affect the menu not the whole project but in the next project will use css reset. Thank you. –  Mar 27 '15 at 18:16
  • You're welcome. Make sure to apply the `margin-left: -40px;` only on that specific menu (with applying an id like `#special-ul { margin-left: -40px; }`) in order to avoid the margin on **every** ul. – sqe Mar 27 '15 at 18:19
  • Thank you to both you and the thread creator, I was going nuts wondering where padding was appearing from no where! Thanks guys. –  Sep 10 '19 at 00:01
  • 1
    You just applied a high-importance style to every element in the entire page. Readers: DO NOT DO THIS. If you want to apply margin and/or padding rules, do it in a way that is more specific than *. – WebWanderer Feb 05 '20 at 22:34
2

for firefox:

-moz-padding-start: 0px;
Sanuich
  • 39
  • 4
0

I had this issue for a menu aswell and tried to correct it in the ul .navigation {} style I was using but didn't work until I reset it in the ul {} itself - incase anyone else has the same trouble.

user19582568
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 21 '22 at 22:47