Hey guys,
I need help with my portfolio site and I can’t seem to figure this one out.
It displays properly in Safari and Firefox but not so much in IE6 and IE7.
The content beginning with “Services” and “Featured Projects” should line up with the paper image below the wood, however in IE, all my content is pushed up so that it is actually half-above the paper texture.
Could somebody take a look and see if they can offer me up some help? It would be greatly appreciated!
PS - Sorry if my code is not the neatest, still working on getting that straight.
HTML
*not enough space to paste HTML and CSS codes, so you can just view page source at http://www.christiantate.net
CSS
html, body, div, span, fieldset, form, label, legend
{border: 0; margin: 0; outline: 0; padding: 0; background: transparent; vertical-align: baseline;}
* {
margin: 0;
padding: 0;
}
a:active, a:link, a:visited {
color: #000000;
text-decoration: none;
}
body {
background: #000000 url("../images/wood.jpg");
color: #ffffff;
font-family:Baskerville,"Goudy Old Style","Palatino","Book Antiqua",serif;
font-size: 12px;
}
.main {
width: 900px;
margin: -60px auto;
position: relative;
}
#header-wide {
width: 100%;
height: 60px;
background: url("../images/transparent.png");
}
#header {
width: 900px;
height: 60px;
line-height: 48px;
margin: 0 auto;
}
#header-left {
width: 450px;
height: 60px;
background: url("../images/brain_left.png") no-repeat;
text-indent: -9999px;
}
#header-right {
text-align: right;
width: 450px;
height: 60px;
background: url("../images/brain_right.png") no-repeat;
text-indent: -9999px;
}
.spacer {
width: 100%;
height: 200px;
}
#middle {
width: 100%;
margin: 200px 0 0 0;
height: 760px;
background: #ffffff url("../images/paper_texture.jpg");
color: #000000;
}
#middle ul {
list-style: none;
line-height: 24px;
}
#middle-left {
width: 228px;
height: 600px;
padding: 15px 0 0 2px;
position: relative;
}
#middle-left h2 {
font-weight: normal;
font-size: 20px;
margin: 0 0 10px 0;
}
#middle-right {
width: 660px;
height: 600px;
padding: 12px 0 0 10px;
position: relative;
}
#middle-right .featured {
width: 690px;
height: 40px;
}
#middle-right .featured h2 {
font-weight: normal;
font-size: 20px;
margin: 0 0 10px 10px;
}
.portfolio-left {
float: left;
width: 325px;
height: 200px;
background: url("../images/photo-frame.png");
}
.portfolio-right {
float: right;
width: 325px;
height: 200px;
margin: 0 0 30px 0;
background: url("../images/photo-frame.png");
}
.portfolio-left img {
margin: 10px 0 0 20px;
}
.portfolio-right img {
margin: 10px 0 0 20px;
}
img {
border: none;
}
.launch {
width: 325px;
height: 20px;
margin: 15px 0 0 0;
text-align: right;
}
a:hover {
text-decoration: underline;
}
.launch p {
margin-right: 8px;
display: block;
}
#footer-wide {
margin: 0;
width: 100%;
height: 200px;
background: url("../images/shadow_bottom.png") repeat-x;
}
#footer-content {
width: 900px;
margin: 0 auto;
padding: 30px 0 0 0;
font-size: 14px;
text-align: right;
font-weight: bold;
}
:focus {
-moz-outline-style: none;
}
.float-right {
float: right;
}
.float-left {
float: left;
}
.clear {
clear: both;
}
fieldset {
clear: both;
border: none;
}
fieldset fieldset legend {
padding: 0 0 1.5em;
font-size: 1em;
}
form .field, form .buttons {
clear: both;
margin: 0 0 1.5em;
}
form .field label {
display: block;
margin: 0 0 5px 0;
}
button, input.submit, input.image {
cursor: pointer;
}
textarea {
overflow: auto;
}
input.text, textarea, select {
margin: 0;
font: 1em/1.3 Helvetica, Arial, "Liberation Sans", "Bitstream Vera Sans", sans-serif;
vertical-align: baseline;
}
input.text, textarea {
background: transparent;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
/* IE6 css fixer v0.4: Fri, 10 Jul 2009 17:24:55 +0200 */
/* ============================================= */
/* safe settings */
/* add display:inline to floated elements */
.portfolio-left,
.portfolio-right,
.float-right,
.float-left {display:inline;}
/* fix negative margins */
.main {position:relative; zoom:1;}
/* add zoom:1 to pos:relative elements */
.main {zoom:1;}
/* ============================================= */
/* potentially harmful settings */
/* add zoom:1 to backgrounds -- Manually check for problems with inline elements! */
html,body,div,span,fieldset,form,label,legend,
body,
#header-wide,
#header-left,
#header-right,
#middle,
.portfolio-left,
.portfolio-right,
#footer-wide,
input.text,textarea {zoom:1;}