IE7 Bug

[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?

[james.davis]

Code:

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: “” “”;
}

[james.davis]

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

Code:

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;}

[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.

[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.

[Author]

Posts