The lights in the middle of the page at Link >>
align differently in firefox and ie7
Here is the css file:
Code: Select all
/*------------------------------------------------------------------------------------
Global Styles
------------------------------------------------------------------------------------*/
* {
padding:0;
margin:0;
}
h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:1em 0; }
li, dd { margin-left:5%; }
fieldset { padding: .5em; }
select option{ padding:0 5px; }
.hide, .print-logo, .close-button{ display:none; }
.left{ float:left; }
.right{ float:right; }
.clear{ clear:both; height:1px; font-size:1px; line-height:1px; }
a img{ border:none; }
body {
background: url("/images/bg.jpg") repeat-x top #e3eaa4;
color:#1b1b1b;
font:12px/1.6em "Verdana", Helvetica, Arial, Geneva, Helvetica,sans-serif;
text-align: center;
}
a {
text-decoration:none;
color:#44709b;
}
a:hover {
text-decoration:underline;
}
h1,h2,h3 {margin:0;}
p {margin:0 0 1em 0;}
ul {
margin:0;
padding:0;
list-style:none;
}
#main {
width:900px;
margin:0 auto;
}
/* header */
#header {
height:213px;
position:relative;
}
/* logo */
.logo {
display:block;
overflow:hidden;
text-indent:-9999em;
width:150px;
height:75px;
background:url(../images/logo.png) no-repeat 0 0;
position:absolute;
top:69px;
left:360px;
z-index:1;
}
/* light */
.lightsup {
width:900px;
height:197px;
background:url(../images/lightsup.png) no-repeat 0 0;
position:absolute;
top:6px;
left:1px;
}
/* Center Content */
/* Bottom Content */And here is the basic xhtml calling it in. WHY oh why won't these lights stay centered in both broswers??
Code: Select all
</__body>
<!-- main center container -->
<div id="main">
<!-- header -->
<div id="header">
<!-- logo -->
<a href="#" class="logo">aaron morris webdesign</a>
</div>
<div class="lightsup"></div>
</div>
<__body>
</__html>
