taylortsantles
07-19-2008, 10:44 AM
Having issues with IE again. Here is my code. You'll see in my code that I'm creating boxes with the id "blockright" or "blockleft" to make borders around a circular image. It's working fine in FF, but the left aligned boxes push all the text down in IE. What am I missing?
CSS @charset "utf-8";
/* CSS Document */
/* Page Layout */
* {
margin: 0;
padding: 0;
}
body {
background: url(Images/body-bg.jpg);
}
#page-wrap {
background: url(Images/bg.jpg) no-repeat;
width: 1200px;
height: 1037px;
}
#container {
width: 580px;
padding: 82px 0px 0px 510px;
}
#box1 {
width: 300px;
height: 50px;
}
#header {
background: url(Images/covlogo.jpg) no-repeat;
width: 292px;
height: 135px;
padding-bottom: 20px;
}
#welcome {
width: 300px;
font: 14px Arial, Helvetica, sans-serif;
color: #000;
line-height: 20px;
}
#bodytext {
font: 0.8em Arial, Helvetica, sans-serif;
color: #000;
padding-top: 15px;
padding-right: 45px;
background: transparent;
}
#bodytext p {
text-align: justify;
}
#bodytext p-null {
text-align: left;
}
#bodytext p-null {
text-align: center;
}
#bodytext p-null {
text-align: right;
}
#footer {
font: 12px Arial, Helvetica, sans-serif;
color: #fff;
padding-top: 455px;
float: right;
padding-left: 330px;
width: 250px;
}
#floatright {
width: 261px;
height: auto;
clear: right;
float: right;
padding-left: 10px;
}
#cornerimg {
width: 261;
height: 270;
}
/* Typography */
h1 {
font: Arial, Helvetica, sans-serif;
color: #000000;
}
h2 {
font: 12 px Arial, Helvetica, sans-serif;
color: #fff;
}
/* Navigation */
#nav {
font: small-caps 20px 'times new roman', times, serif;
color: #000;
list-style: none;
width: 200px;
height: 175px;
margin: 4px 0px 0px 0px;
padding-left: 32px;
}
.subnav {
font: 13px Arial, Helvetica, sans-serif, #000000;
text-decoration: none;
text-transform: none;
font-variant: normal;
padding-left: 20px;
line-height: 18px;
}
/* Links */
a {
color: #000000;
text-decoration: none;
}
a:hover {
color: #666666;
}
/* Blocks */
/* Left Blocks*/
#blockleft1 {
width: 1px;
height: 10px;
float: left;
display: inline;
}
#blockleft2 {
width: 100px;
height: 50px;
float: left;
display: inline;
}
/* Right Blocks*/
#blockright1 {
width: 25px;
height: 10px;
float: right;
clear: right;
}
#blockright2 {
width: 45px;
height: 25px;
float: right;
clear: right;
}
#blockright3 {
width: 125px;
height: 10px;
float: right;
clear: right;
left: 919px;
top: 588px;
}
#blockright4 {
width: 135px;
height: 10px;
float: right;
clear: right;
}
#blockright5 {
width: 145px;
height: 10px;
float: right;
clear: right;
}
#blockright6 {
width: 150px;
height: 10px;
float: right;
clear: right;
}
#blockright7 {
width: 150px;
height: 10px;
float: right;
clear: right;
}
#blockright8 {
width: 150px;
height: 10px;
float: right;
clear: right;
}
#blockright9 {
width: 145px;
height: 10px;
float: right;
clear: right;
}
#blockright10 {
width: 140px;
height: 10px;
float: right;
clear: right;
}
#blockright11 {
width: 130px;
height: 10px;
float: right;
clear: right;
}
#blockright12 {
width: 115px;
height: 10px;
float: right;
clear: right;
}
#blockright13 {
width: 100px;
height: 10px;
float: right;
clear: right;
}
#blockright14 {
width: 50px;
height: 10px;
float: right;
clear: right;
}#blockright15 {
width: 125px;
height: 10px;
float: right;
clear: right;
}
HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Covenant Family Allergy</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page-wrap">
<div id="container">
<div id="floatright">
<div id="cornerimg"><img src="Images/corner/family.jpg" alt="Family" /></div>
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="allergyandasthma.html">Allergy and Asthma</a></li>
<li><a href="appointments.html">Appointments</a></li>
<li><a href="insurance.html">Insurance</a></li>
</ul>
</div>
<div id="box1"></div>
<a href="index.html"><div id="header"></div></a>
<div id="welcome">
<p class="style1"><strong>Welcome to Covenant Family Allergy.</strong></p>
<p class="style1"> </p>
<p class="style1">We are a committed team of professionals in North Augusta, SC, who promise to care for you like our very own family. We will strive each day to live up to the words of the Lord Jesus, “Love your neighbor as yourself.” This is our promise to you and your family.</p>
</div>
<div id="bodytext">
<div id="blockleft1"></div>
<div id="blockright1"></div>
<div id="blockright2"></div>
<div id="blockright3"></div>
<div id="blockright4"></div>
<div id="blockright5"></div>
<div id="blockright6"></div>
<div id="blockright7"></div>
<div id="blockright8"></div>
<div id="blockright9"></div>
<div id="blockright10"></div>
<div id="blockright11"></div>
<div id="blockright12"></div>
<div id="blockright13"></div>
<div id="blockleft2"></div>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin a felis facilisis libero ultrices vestibulum. Nam id pede. In eget nisi. Mauris eu justo. Aenean id sapien ut mauris volutpat fermentum. Duis aliquet blandit turpis. Praesent at purus malesuada mauris ultricies consectetuer. Donec purus. Aenean scelerisque metus sed pede imperdiet fermentum. Vestibulum fringilla metus. Nullam ac justo et tellus ultricies tempor. Sed vestibulum semper magna. Aliquam neque urna, porttitor eu, pellentesque non, rutrum at, odio. Donec aliquet justo sit amet augue. Pellentesque non ante ut sem consequat congue.Suspendisse nec augue a turpis fermentum auctor. Cras pellentesque justo vitae elit. Fusce blandit lacus at velit. Suspendisse placerat. Cras posuere pellentesque urna. Aliquam erat volutpat. Donec felis. Morbi pulvinar placerat risus. Nam a lectus. Nullam lacus. Mauris in elit bibendum enim sollicitudin tincidunt. Donec sollicitudin tincidunt mauris. Phasellus lacinia arcu vitae dolor. Maecenas dictum. Sed eget metus. Nunc et ipsum. Maecenas scelerisque libero a lacus consectetuer dignissim. Nunc ut sapien. Duis lacinia nulla in enim. Curabitur consectetuer dictum diam. Proin feugiat orci sed justo. Phasellus adipiscing blandit diam. In vitae lacus sed nibh posuere tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse dignissim ligula non nulla. Phasellus feugiat. Nulla interdum. Morbi blandit dolor eget lectus. Fusce eu eros. Ut quis dui at urna sollicitudin porta. </p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS @charset "utf-8";
/* CSS Document */
/* Page Layout */
* {
margin: 0;
padding: 0;
}
body {
background: url(Images/body-bg.jpg);
}
#page-wrap {
background: url(Images/bg.jpg) no-repeat;
width: 1200px;
height: 1037px;
}
#container {
width: 580px;
padding: 82px 0px 0px 510px;
}
#box1 {
width: 300px;
height: 50px;
}
#header {
background: url(Images/covlogo.jpg) no-repeat;
width: 292px;
height: 135px;
padding-bottom: 20px;
}
#welcome {
width: 300px;
font: 14px Arial, Helvetica, sans-serif;
color: #000;
line-height: 20px;
}
#bodytext {
font: 0.8em Arial, Helvetica, sans-serif;
color: #000;
padding-top: 15px;
padding-right: 45px;
background: transparent;
}
#bodytext p {
text-align: justify;
}
#bodytext p-null {
text-align: left;
}
#bodytext p-null {
text-align: center;
}
#bodytext p-null {
text-align: right;
}
#footer {
font: 12px Arial, Helvetica, sans-serif;
color: #fff;
padding-top: 455px;
float: right;
padding-left: 330px;
width: 250px;
}
#floatright {
width: 261px;
height: auto;
clear: right;
float: right;
padding-left: 10px;
}
#cornerimg {
width: 261;
height: 270;
}
/* Typography */
h1 {
font: Arial, Helvetica, sans-serif;
color: #000000;
}
h2 {
font: 12 px Arial, Helvetica, sans-serif;
color: #fff;
}
/* Navigation */
#nav {
font: small-caps 20px 'times new roman', times, serif;
color: #000;
list-style: none;
width: 200px;
height: 175px;
margin: 4px 0px 0px 0px;
padding-left: 32px;
}
.subnav {
font: 13px Arial, Helvetica, sans-serif, #000000;
text-decoration: none;
text-transform: none;
font-variant: normal;
padding-left: 20px;
line-height: 18px;
}
/* Links */
a {
color: #000000;
text-decoration: none;
}
a:hover {
color: #666666;
}
/* Blocks */
/* Left Blocks*/
#blockleft1 {
width: 1px;
height: 10px;
float: left;
display: inline;
}
#blockleft2 {
width: 100px;
height: 50px;
float: left;
display: inline;
}
/* Right Blocks*/
#blockright1 {
width: 25px;
height: 10px;
float: right;
clear: right;
}
#blockright2 {
width: 45px;
height: 25px;
float: right;
clear: right;
}
#blockright3 {
width: 125px;
height: 10px;
float: right;
clear: right;
left: 919px;
top: 588px;
}
#blockright4 {
width: 135px;
height: 10px;
float: right;
clear: right;
}
#blockright5 {
width: 145px;
height: 10px;
float: right;
clear: right;
}
#blockright6 {
width: 150px;
height: 10px;
float: right;
clear: right;
}
#blockright7 {
width: 150px;
height: 10px;
float: right;
clear: right;
}
#blockright8 {
width: 150px;
height: 10px;
float: right;
clear: right;
}
#blockright9 {
width: 145px;
height: 10px;
float: right;
clear: right;
}
#blockright10 {
width: 140px;
height: 10px;
float: right;
clear: right;
}
#blockright11 {
width: 130px;
height: 10px;
float: right;
clear: right;
}
#blockright12 {
width: 115px;
height: 10px;
float: right;
clear: right;
}
#blockright13 {
width: 100px;
height: 10px;
float: right;
clear: right;
}
#blockright14 {
width: 50px;
height: 10px;
float: right;
clear: right;
}#blockright15 {
width: 125px;
height: 10px;
float: right;
clear: right;
}
HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Covenant Family Allergy</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page-wrap">
<div id="container">
<div id="floatright">
<div id="cornerimg"><img src="Images/corner/family.jpg" alt="Family" /></div>
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="allergyandasthma.html">Allergy and Asthma</a></li>
<li><a href="appointments.html">Appointments</a></li>
<li><a href="insurance.html">Insurance</a></li>
</ul>
</div>
<div id="box1"></div>
<a href="index.html"><div id="header"></div></a>
<div id="welcome">
<p class="style1"><strong>Welcome to Covenant Family Allergy.</strong></p>
<p class="style1"> </p>
<p class="style1">We are a committed team of professionals in North Augusta, SC, who promise to care for you like our very own family. We will strive each day to live up to the words of the Lord Jesus, “Love your neighbor as yourself.” This is our promise to you and your family.</p>
</div>
<div id="bodytext">
<div id="blockleft1"></div>
<div id="blockright1"></div>
<div id="blockright2"></div>
<div id="blockright3"></div>
<div id="blockright4"></div>
<div id="blockright5"></div>
<div id="blockright6"></div>
<div id="blockright7"></div>
<div id="blockright8"></div>
<div id="blockright9"></div>
<div id="blockright10"></div>
<div id="blockright11"></div>
<div id="blockright12"></div>
<div id="blockright13"></div>
<div id="blockleft2"></div>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin a felis facilisis libero ultrices vestibulum. Nam id pede. In eget nisi. Mauris eu justo. Aenean id sapien ut mauris volutpat fermentum. Duis aliquet blandit turpis. Praesent at purus malesuada mauris ultricies consectetuer. Donec purus. Aenean scelerisque metus sed pede imperdiet fermentum. Vestibulum fringilla metus. Nullam ac justo et tellus ultricies tempor. Sed vestibulum semper magna. Aliquam neque urna, porttitor eu, pellentesque non, rutrum at, odio. Donec aliquet justo sit amet augue. Pellentesque non ante ut sem consequat congue.Suspendisse nec augue a turpis fermentum auctor. Cras pellentesque justo vitae elit. Fusce blandit lacus at velit. Suspendisse placerat. Cras posuere pellentesque urna. Aliquam erat volutpat. Donec felis. Morbi pulvinar placerat risus. Nam a lectus. Nullam lacus. Mauris in elit bibendum enim sollicitudin tincidunt. Donec sollicitudin tincidunt mauris. Phasellus lacinia arcu vitae dolor. Maecenas dictum. Sed eget metus. Nunc et ipsum. Maecenas scelerisque libero a lacus consectetuer dignissim. Nunc ut sapien. Duis lacinia nulla in enim. Curabitur consectetuer dictum diam. Proin feugiat orci sed justo. Phasellus adipiscing blandit diam. In vitae lacus sed nibh posuere tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse dignissim ligula non nulla. Phasellus feugiat. Nulla interdum. Morbi blandit dolor eget lectus. Fusce eu eros. Ut quis dui at urna sollicitudin porta. </p>
</div>
</div>
</div>
</div>
</body>
</html>