SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE 9 ignores padding. Help...

    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.

    HTML Code:
    #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. #2
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I should probably add the code for the ul li that lies within that div

    HTML Code:
    #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. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi milkandhoney. Welcome to the forums.

    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

    Code:
    ul {margin: 0; padding: 0}
    That's a better place to start than to use negative margins etc.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hi milkandhoney. Welcome to the forums.

    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

    Code:
    ul {margin: 0; padding: 0}
    That's a better place to start than to use negative margins etc.

    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. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You're welcome.

    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:

    Code:
    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. #6
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You're welcome.

    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:

    Code:
    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;}
    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. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by milkandhoney View Post
    should I paste this reset in all of them or just the 'main' one/
    Just the main one ... assuming it's shared by all pages.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •