I have created a simple vertical menu using <ul> and <li>. It works fine with firefox but in IE there is extra space before each list item i.e. each list item looks like it is aligned to center. here is the code: <ul style="list-style-type:none; text-align:left; padding-left:0; "> <li><a href=" ">Degree Programs</a></li> <li><a href=" ">Courses</a></li> </ul> Code (markup): and CSS: li{padding-left:0; padding-bottom:1em; } Code (markup): How can I get rid of the extra space before each item in IE?
Each browser has its own seperate stylesheet it uses as standard for various elements hence why things look different in different browsers. Best practice is to start your stylesheet with: This overrides browser settings and sets everything to have padding and margin of 0. Then you declare what padding/margin you want on elements as you go along. Try that as i'm quite sure that is what it will be.