IE 9 ignores padding. Help

HTML & CSS
1

Hi All,

I have a newbie question that I hope you can help out with.
I am pretty new to website design and sometimes get lost with browser compatibility and lose a lot of sleep because of IE.

My issue is that IE is ignoring my padding, particularly the left specified padding.

Thanks.

#navigation {
	float: left;
	width: 885px;
	background-color: #FFF;
	margin-top: 15px;
	padding-bottom: 5px;
	padding-left: 10px;
	height: auto;
	padding-top: 5px;
	padding-right: 5px;
}
2

I should probably add the code for the ul li that lies within that div

#navigation ul {
	list-style-type: none;
	margin-left: -40px;
	
	
}#navigation ul li  {
	display: block;
	float: left;
	height: 15px;
	width: auto;
	margin-right: 20px;
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding: 2px;
	border-bottom-style: none;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
}
#navigation ul li a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	text-decoration: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: capitalize;
	color: #000;
	height: 15px;
	display: block;

I had removed the margin-left: -40px on the #navigation ul and both Chrome and Firefox had shifted the list to the right, IE9 however, was left aligned with elements below that have the same padding…which is what needs to happen.
I have just realised that all other divs with the left padding render OK in IE, so it must be the ul li that is causing this issue…?

3

Hi milkandhoney. Welcome to the forums. :slight_smile:

It’s easier to help with a live link, but I suspect your main problem here might be with browser defaults. Each browser puts its own margin and padding on lists, so many people start their style sheet by getting rid of browser defaults. In this instance, you’d do that with

ul {margin: 0; padding: 0}

That’s a better place to start than to use negative margins etc. :slight_smile:

4

Hi ralph.m!

Thanks for the welcome and for your help. It worked!!! Yayyy!!!
I (obviously) didn’t know how to best manage the margins that are applied to lists, and negative margins worked in the past until I was in this situation where the div has a background and required padding.

Thank you sooooooooooooooo much!
xo

5

You’re welcome. :slight_smile:

It can save a lot of pain like this to put a full CSS reset at the top of your style sheet. Here’s an example:

html, body, div, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img, form, fieldset, legend, label, textarea, span, em, strong, sub, sup, cite, table, tbody, td, tfoot, th, thead, tr, tt, dl, dt, dd, ol, ul, li {margin: 0; padding: 0;}
6

Thanks for that ralph.m!
I have just copied and pasted that and naturally some of the other lists have gone a bit berserk, so need to just fix that.
I apologise if this is a silly question, even for a newbie, but if I have multiple style sheets, should I paste this reset in all of them or just the ‘main’ one/

7

Just the main one … assuming it’s shared by all pages. :slight_smile: