I'm building a website and it seems to work well in Chrome and Firefox but when it comes to IE (programmer's bane), it doesn't work. It seems that whenever I try to position something in IE, it always goes below the "list" of images that I have. Here's my html code for the contact page (note: I haven't done any of the meta tags or anything -- I'm going to do that later when I get it online. For now it's just the basic code):
Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<ul id="stoplight">
<li id="stoplight1"><a href="Index.html"></a></li>
<li id="stoplight2"><a href="AboutUs.html"></a></li>
<li id="stoplight3"><a href="ContactUs.html"></a></li>
</ul>
<div id="stoplightbottom">
<img src="stoplightbottom.png"/>
</div>
<div id="smartboard">
<img src="smartboard.png"/>
</div>
<div id="specials">
<img src="specials.png"/>
</div>
<div id="avsign">
<img src="AVAvenueLeftSign.png" />
</div>
<div id="states">
<img src="states.png" />
</div>
<div id="contractorstext">
<span class="blackfont1">Technology Systems Contractors Power Limited Technicians</span>
</div>
<div id="company1">
<img src="company1.png" height="30" width="100">
</div>
<div id="company2">
<img src="company2.png" height="30" width="100">
</div>
<div id="company3">
<img src="company3.png" height="30" width="100">
</div>
<div id="company4">
<img src="company4.png" height="30" width="100">
</div>
<div id="company5">
<img src="company5.png" height="30" width="100">
</div>
<div id="contactimage">
<img src="contactimage.png" width="650" height="450">
</div>
<div id="contactinfo">
<img src="contactinfo.png" width="650" height="450">
</div>
</body>
</html>
And here's my CSS (most of it refers to other pages):
Code:
html, body, div, span,object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strike, strong, sub, sup, tt, var, b, i, 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-size: 100%;
vertical-align: baseline;
background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
textarea { overflow:auto; }
ul#stoplight {
margin: 0 840;
width:0px;
height:0px;
list-style:none;
}
ul#stoplight li {
display:inline;
}
ul#stoplight li a {
float:left;
text-indent:-9999px;
text-decoration:none;
}
ul#stoplight li#stoplight1 a {
width:178px;
height:82px;
background:url(sprites.png) no-repeat 0 0;
}
ul#stoplight li#stoplight1 a:hover {
background-position: -179px 0;
}
ul#stoplight li#stoplight2 a {
width:179px;
height:63px;
background:url(sprites.png) no-repeat 0 -82px;
}
ul#stoplight li#stoplight2 a:hover {
background-position: -359px -82px;
}
ul#stoplight li#stoplight3 a {
width:179px;
height:66px;
background:url(sprites.png) no-repeat 0 -145px;
}
ul#stoplight li#stoplight3 a:hover {
background-position: -538px -145px;
}
body {
background-image:url('GradientBackground.png');
background-repeat:no-repeat;
background-position:0px 0px;
}
.arial {font-family: Arial;}
.tahoma {font-family: Tahoma;}
.verdana {font-family: Verdana;}
.underline {text-decoration: underline}
.blackfont1 {font-size: 16px;}
.whitetext1 {color: #F2F2F2; font-size: 30px;}
.whitetext2 {color: #EBEBEB; font-size: 17px;}
.whitetext3 {color: #DBDBDB; font-size: 18px;}
#background {top: 2.7em; left: 4em; position:absolute; z-index: -2; visibility: show;}
#stoplightbottom {margin: 211 840; position: absolute; z-index: 1; visibility: show;}
#smartboard {margin: 230 970; position: absolute; z-index: 1; visibility: show;}
#specials {margin: 410 970; position: absolute; z-index: 1; visibility: show;}
#text2 {margin: 600 430; position: absolute; z-index: 1; visibility: show;}
#avsign {margin: -5 50; position: absolute; z-index: 1; visibility: show;}
#states {margin: 90 540; position: absolute; z-index: 1; visibility: show;}
#contractorstext {margin: 30 530; position: absolute; z-index: 1; visibility: show; width: 200;}
#company1 {margin: 220 200; position: absolute; z-index: 1; visibility: show;}
#company2 {margin: 220 300; position: absolute; z-index: 1; visibility: show;}
#company3 {margin: 220 400; position: absolute; z-index: 1; visibility: show;}
#company4 {margin: 220 500; position: absolute; z-index: 1; visibility: show;}
#company5 {margin: 220 600; position: absolute; z-index: 1; visibility: show;}
#contactinfo {margin: 270 170; position: absolute; z-index: 2; visibility: show;}
#contactimage {margin: 270 170; position: absolute; z-index: 1; visibility: show;}
#greenbackground {margin: 230 170; position: absolute; z-index: 1; visibility: show;}
#greybackground {margin: 230 170; position: absolute; z-index: 1; visibility: show;}
#aboutusheader {margin: 240 260; position: absolute; z-index: 2; visibility: show; width: 600;}
#aboutusparagraph {margin: 290 180; position: absolute; z-index: 2; visibility: show; width: 630;}
#list1 {margin: 400 190; position: absolute; z-index: 2; visibility: show; width: 200;}
#list2 {margin: 400 400; position: absolute; z-index: 2; visibility: show; width: 200;}
#list3 {margin: 400 610; position: absolute; z-index: 2; visibility: show; width: 200;}
It has this problem on every page, but I just listed the contact page for simplicity. Here's two screenshots of the problem:
Internet Explorer Screenshot:
http://i986.photobucket.com/albums/a...enueerror2.jpg
Chrome Screenshot:
http://i986.photobucket.com/albums/a...enueerror1.jpg
As you can see, it separates the top of the stoplight with the rest of the page. Can anyone help me fix this problem? Thanks in advance everyone
.