I'm just going to C&P my post from IE forums, and if anyone has a definitive answer as to why and/or how to correct the problem, lemme know. Other then that any thoughts are appreciated.


I am currently doing a website http://www.wcshootfighting.com and I was having some problems with the #lines section

When I coded the section I specified a height of 2px width of 100% and used a background image that was 1pixel x 1pixel

When I previewed the page in Firefox it came out as it should, a 2pixel like spanning the length of the page. However when previewing in IE the line was considerably larger than 2px. My initial thought was for some reason IE was rendering the size of the pixels to the much larger than Firefox maybe? However the only solution I could come up with was to create overlay layers that were 2px below where the #lines started to cover the excess.

I would like to know why the line is so much bigger in IE, and why it ignores my height specifications and comes up with something completely different, and if there is an easier way to correct this (for future reference) other than creating new layers to cover up what shouldn't be there anyway.

You can view the code by going to the source of http://www.wcshootfighting.com all the CSS is contained on that page.

I have also included the code below:

/this overlays the top line/
#nav {
float:left;
position:absolute;
background-image:url(images/midline.jpg);
height:46px;
width: 100%;
top:74px;
z-index:2;
}
/this is the bottom line/
#lines2 {
position: absolute;
height: 2px;
background-image:url(images/bottomline.jpg);
width:100%;
z-index:1;
top:120px;
}
/overlay for the bottom line/
#ieoverlay {
position: absolute;
height: 50px;
background-color[:#]FFFFFF;
width:100%;
z-index:2;
top:122px;
}
/top line/
#lines {
position: absolute;
height: 2px;
background-image:url(images/bottomline.jpg);
width:100%;
z-index:1;
top:72px;
}
_________________________
"The secret to creativity is knowing how to hide your sources."
-Albert Einstein

Tech Ninja Security