Different browser defaults for lists June 1, 2010

I found this interesting note on lists that I did not realize.  I’m pretty sure I’ve run into it lately and didn’t know the solution.  A posting I found from Caroline on 11heavens.com explains why.  Maybe I will remember it’s here next time

Firefox’s default styles adds padding to the left of lists.

He should apply some sort of reset first, and only then pick a left margin:

#sideBar ol {

margin: .5em 0 1.5em 2em; /* Adding some margin to the left */

padding: 0; /* Resetting the padding all around */

}

http://11heavens.com/lynda-com-css-positioning-best-practices-reviewed

Print CSS April 17, 2009

I was having some problems because the site I was adding some pages too had a div with overflow & float.  When trying to print, I only got the first page in ff & ie7.  I ended up finding one solution for firefox on A List Apart (http://www.alistapart.com/articles/goingtoprint/) that had me basically add float: none !important;.  But, that did not fix it for IE.  Then I remembered my old work had the same problem, so I looked up the css and found:  position: static !important; .  That did it for IE.  I believe changing the overflow to visible was also a necessary action.

I also had some issues with divs within divs, so be sure you find them all!

In the end I added this css.  I’m pretty sure this is overkill, but I’ve spent too much time already!

#aa, #bb {
 float:none;
 display:none;
 width:auto;
 overflow:none;
}

#content, #content.list {
 display: block;
 overflow:visible;
 width: auto;
 height:auto
 padding: 0;
 border: 0;
 float: none !important;
 color: black;
 background: transparent;
 max-height:none;
 min-height:inherit;
 max-width:none;
 min-width:inherit;
 clear:both;
position: static !important; 
}

body {
 display: block; 
 background: white;
 font-size: 12pt;
}

.title, h5 {
 display: block; 
 width: auto;
 clear:both;
}

#logo, #banner {
 display: block; 
 float:none;
 padding-bottom:30px;
 overflow:visible;
}