I created a footer image that is only dispalying properly in IE. When using Firefox/Netscape the footer image displays behind the text instead of the bottom of the text. Also my texbody h1 is not seeing the margin-top spacing. Please help. Is there a site also that will help me with future cross browser validation.
Stylesheet
<style type="text/css">
body{
text-align:center;
font-family: arial, helvetica, sans-serif;
}
#container{
float:inherit;
width:700px;
height:480px;
border:0px;
}
#pageHeader{
background:#666 url(main_title.jpg) no-repeat;
width:700px;
height:80px;
margin-bottom:1px;
}
#footer{
background:#666 url(footer.jpg) no-repeat;
width:700px;
height:80px;
margin-top:10px;
}
#buttons{
float:left;
padding:0;
width:251px;
height:74px;
border:0px;
}
#buttons a {
display:block;
}
#buttonOne{
background:url(makeReservations.jpg) no-repeat 0;
width:251px;
height:37px;
}
#buttonTwo{
background:url(tollFreeNumber.jpg) no-repeat 0;
width:251px;
height:37px;
margin-top:1px;
}
#quote{
margin:0;
padding:0;
float:right;
background:url(quote.jpg) no-repeat 0px;
width:448px;
height:75px;
border:0px;
}
#textBody{
width:680px;
height:300px;
text-align:left;
margin-left:10px;
margin-right:10px;
padding:0;
}
#textBody h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
margin-top:0.25in;
margin-bottom:0.25in;
padding:0;
}
#textBody h2 {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin-bottom:5px;
}
#textBody h3 {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#textBody img {
float:right;
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
}
</style>
HTML
<body>
<div id="container">
<div id="pageHeader"></div>
<div id="content">
<div id="buttons">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.directinn.com/003618/" id="buttonOne"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]" id="buttonTwo"></a>
</div>
<div id="quote"></div>
</div>
<div id="textBody">
<h1>Lorem Ipsum</h1>
<h2>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</h2>
<h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris imperdiet egestas massa. Donec semper facilisis nibh. Aenean hendrerit massa sit amet risus. Vestibulum mattis. Nulla condimentum lectus in libero. Nullam eget leo eget sem ullamcorper accumsan. Donec quam erat, dapibus at, pellentesque id, elementum at, metus. Curabitur eget lorem. Sed id nisl id nisi facilisis porttitor. Etiam lobortis nisl ac turpis. Suspendisse potenti.</h3>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"berry.jpg" height="200" width="300" />
<h3>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent congue pulvinar augue. Sed scelerisque. Vivamus venenatis gravida sem. Curabitur ut est. Maecenas elit. Nullam turpis diam, fringilla vestibulum, porta non, dapibus ac, metus. Fusce sed tellus. Cras nisi enim, scelerisque vel, vestibulum id, faucibus id, ante. Integer dui tellus, laoreet quis, auctor nec, mollis sit amet, pede. In hac habitasse platea dictumst. Duis condimentum. Ut sed augue. Nunc ultrices. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh metus, interdum non, ullamcorper a, suscipit placerat, nunc. Fusce sed nulla non purus consectetuer varius. </h3>
<h3>Donec sit amet diam. Cras non libero vel elit ultricies tempor. Donec et felis ut nunc commodo faucibus. Proin dolor neque, nonummy id, eleifend vel, molestie ut, lectus. Sed in justo sit amet eros interdum mollis. Nunc nisl lorem, eleifend a, lobortis non, feugiat et, dolor. Proin non quam sed velit faucibus molestie. Maecenas non lorem et ipsum pulvinar semper. Maecenas mattis, nibh eu molestie pharetra, quam orci semper lacus, a consequat mi augue ut ante. Maecenas risus. Pellentesque nec libero in nisl varius bibendum. Donec sagittis scelerisque orci. Duis pharetra turpis vel orci. Nulla commodo aliquet purus. Nullam odio odio, vulputate at, tincidunt eget, pellentesque a, purus. Nunc tempus. Donec lobortis enim ac diam. Cras porta, pede non nonummy volutpat, tortor risus fermentum elit, id hendrerit tortor turpis fermentum elit. </h3>
</div>
<div id="footer"></div>
</div>
</body>With no doctype, IE is running in quirks mode. It will never match standards-based browsers like that.Sorry I just didn't post it but here it is.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
Stylesheet
<style type="text/css">
body{
text-align:center;
font-family: arial, helvetica, sans-serif;
}
#container{
float:inherit;
width:700px;
height:480px;
border:0px;
}
#pageHeader{
background:#666 url(main_title.jpg) no-repeat;
width:700px;
height:80px;
margin-bottom:1px;
}
#footer{
background:#666 url(footer.jpg) no-repeat;
width:700px;
height:80px;
margin-top:10px;
}
#buttons{
float:left;
padding:0;
width:251px;
height:74px;
border:0px;
}
#buttons a {
display:block;
}
#buttonOne{
background:url(makeReservations.jpg) no-repeat 0;
width:251px;
height:37px;
}
#buttonTwo{
background:url(tollFreeNumber.jpg) no-repeat 0;
width:251px;
height:37px;
margin-top:1px;
}
#quote{
margin:0;
padding:0;
float:right;
background:url(quote.jpg) no-repeat 0px;
width:448px;
height:75px;
border:0px;
}
#textBody{
width:680px;
height:300px;
text-align:left;
margin-left:10px;
margin-right:10px;
padding:0;
}
#textBody h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
margin-top:0.25in;
margin-bottom:0.25in;
padding:0;
}
#textBody h2 {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin-bottom:5px;
}
#textBody h3 {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#textBody img {
float:right;
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
}
</style>
HTML
<body>
<div id="container">
<div id="pageHeader"></div>
<div id="content">
<div id="buttons">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.directinn.com/003618/" id="buttonOne"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]" id="buttonTwo"></a>
</div>
<div id="quote"></div>
</div>
<div id="textBody">
<h1>Lorem Ipsum</h1>
<h2>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</h2>
<h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris imperdiet egestas massa. Donec semper facilisis nibh. Aenean hendrerit massa sit amet risus. Vestibulum mattis. Nulla condimentum lectus in libero. Nullam eget leo eget sem ullamcorper accumsan. Donec quam erat, dapibus at, pellentesque id, elementum at, metus. Curabitur eget lorem. Sed id nisl id nisi facilisis porttitor. Etiam lobortis nisl ac turpis. Suspendisse potenti.</h3>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"berry.jpg" height="200" width="300" />
<h3>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent congue pulvinar augue. Sed scelerisque. Vivamus venenatis gravida sem. Curabitur ut est. Maecenas elit. Nullam turpis diam, fringilla vestibulum, porta non, dapibus ac, metus. Fusce sed tellus. Cras nisi enim, scelerisque vel, vestibulum id, faucibus id, ante. Integer dui tellus, laoreet quis, auctor nec, mollis sit amet, pede. In hac habitasse platea dictumst. Duis condimentum. Ut sed augue. Nunc ultrices. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh metus, interdum non, ullamcorper a, suscipit placerat, nunc. Fusce sed nulla non purus consectetuer varius. </h3>
<h3>Donec sit amet diam. Cras non libero vel elit ultricies tempor. Donec et felis ut nunc commodo faucibus. Proin dolor neque, nonummy id, eleifend vel, molestie ut, lectus. Sed in justo sit amet eros interdum mollis. Nunc nisl lorem, eleifend a, lobortis non, feugiat et, dolor. Proin non quam sed velit faucibus molestie. Maecenas non lorem et ipsum pulvinar semper. Maecenas mattis, nibh eu molestie pharetra, quam orci semper lacus, a consequat mi augue ut ante. Maecenas risus. Pellentesque nec libero in nisl varius bibendum. Donec sagittis scelerisque orci. Duis pharetra turpis vel orci. Nulla commodo aliquet purus. Nullam odio odio, vulputate at, tincidunt eget, pellentesque a, purus. Nunc tempus. Donec lobortis enim ac diam. Cras porta, pede non nonummy volutpat, tortor risus fermentum elit, id hendrerit tortor turpis fermentum elit. </h3>
</div>
<div id="footer"></div>
</div>
</body>With no doctype, IE is running in quirks mode. It will never match standards-based browsers like that.Sorry I just didn't post it but here it is.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>