Forums

james.davis

Good morning all,

I just wanted to query the brain trust and see if anyone else encountered this error. Last night I was coding a web page and I used Eric Meyer's reset style sheet. Now about and hour into developing I noticed IE wasn't rendering my navigation or bullets correctly. It was still adding it's own format for <ul> but Chrome and Firefox looked perfect. About an hour later and a headache I added margin:0 and padding: 0 to my <ul> and it looked perfect and IE now as well. I was confused though because I used the reset style sheet which Chrome and Firefox render correctly, so I wasn't sure why IE applied everything from the reset except to <ul>.

As I was coming into work this morning I wondered if IE did not apply to <ul> which were assigned id's or classes. Has anyone else encountered this error? If so, can you explain what I did incorrectly?

apostrophe

Never had a problem. Can you show us your reset?

james.davis

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing=\"0\"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: \"\";
}
blockquote, q {
	quotes: \"\" \"\";
}

apostrophe

Everything is there. I can only guess that the problem was in someway connected to how you were styling the lists.

james.davis

Here is the CSS from my page (http://www.cartel-auto.com) as well:

body {font-family: Lucida Sans; font-size: small; color: #000000; background-color: #d2d8d9;}

p, li {font-size: 14px;}


h6 {font-size: 16px;}
h5 {font-size: 18px;}
h4 {font-size: 20px;}
h3 {font-size: 22px;}
h2 {font-size: 24px;}
h1 {font-size: 26px;}

.clear {clear: both;}
.clearLeft {clear: left;}
.clearRight {clear: right;}
.uppercase {text-transform: uppercase;}

.lineGray {background-image: url('../../images/lineGray.gif'); background-repeat: no-repeat; width: 968px; height: 1px; margin-bottom: 20px;}
.lineWhite {background-image: url('../../images/lineWhite.gif'); background-repeat: no-repeat; width: 968px; height: 1px; margin-bottom: 20px;}

#pageWrap {width: 1010px; height: 100%; position: relative; margin: 0px auto;}

    #pageHeader {height: 142px; margin: 5px 0px 20px 0px; }
    
    #navMainWrap {margin-bottom: -7px; }
        #navMain {margin: 0px; padding: 0px; list-style: none;}
            #navMain li {display: inline; font-size: 16px; width: 71px; height: 39px; text-align: center; margin-right: 25px;}
                #navMain li a {display: inline-block; text-decoration: none; width: 71px; height: 39px; padding-top: 7px;}
                    #navMain li a:hover {background-image: url('../../images/buttonHover.png'); background-repeat: no-repeat;}
                        #home #navMain li a:active {background-image: url('../../images/buttonActive.png');}
                    
    #headerWrap {background-image: url('../../images/bkgdHeader.png'); background-repeat: no-repeat; width: 967px; height: 278px; margin-bottom: 20px;}
        #headerLeft {float: left; width: 500px; margin: 15px 0px 0px 15px;}
            #listBenefits {list-style: none; margin: 0px; padding: 0px}
                #listBenefits li {color: #ffffff; margin-bottom: 15px; background-image: url('../../images/check.png'); background-repeat: no-repeat; height: 24px; background-position: left top; padding-left: 30px;}
                    #listBenefits li b {font-size: 20px;}
        #headerRight {width: 368px; float: right; margin: 9px 7px 0px 0px;}
        
    #contentLeft {width: 600px;}
        #contentLeft h2 {background-image: url('../../images/bkgdTitle.png'); background-repeat: no-repeat; height: 64px; margin-left: -7px; padding: 17px 0px 0px 45px;}
            #contentLeft p {margin-bottom: 15px; text-align: justify;}
                #listNeeds {margin: 0px; padding: 0px; list-style: none;}
                    #listNeeds li {background-image: url('../../images/star.png'); background-repeat: no-repeat; height: 20px; margin-bottom: 15px;}
                        #listNeeds li b {padding-left: 25px; line-height: 20px;}
                        
    #contentRight {width: 400px;}
    
    #footerWrap {background-color: #151515; width: 968px;}

apostrophe

Please, if you're going to post code then use the code tags, it gets pretty boring editing almost every single post. :?

There is a much easier way to test it than sifting through your code anyway. Just remove all of the css except the reset and then preview the page in all your browsers.

james.davis

My apologies wasn't trying to be an annoyance. I thought it might be easier if you saw my code as well in case I did make a mistake. I am new to forum etiquette and I have learned what not to do here. Thank you for your assistance, I appreciated it.

apostrophe

Posting code is no problem. Just use the tags provided. That's what they are there for. ;)

I'm curious now. Did you try just the reset on your page? Was it different in IE? I'm on a Mac and it's a major hassle to boot up the pc for anybody's code but my own.
I can only repeat, I've never had a problem with the reset (I use the same one, slightly modified to suit my own needs) on ul's or anything else in any browser.

james.davis

Lesson learned.

I just got home and tested it on IE. For some reason IE reset everything on the reset style sheet except for the ul. At least that is all I have had problems with so far. I apologize I made the thread as an IE7 bug but it is actually IE8 I had this issue in. I forgot I updated a few days ago.

treehouse : what would you like to learn today?

Forums

IE7 Bug