smyhre
08-04-2007, 02:39 PM
Hey there don't know when all ever not need help in programing for IE so I keep coming back for more. Anyway I have worked a little more on a site I am starting up and I have run into a few unwanted spacer issues in IE, but unlike last time the spaces are added below images instead up above them. I've verified my code and have put in the tag of vertical-align:bottom to fix the previous problem. But now that that is solved it adds spaces between my background repeated image and the top of the next image. Though under my header image, which is not repeated, IE is adding an extra 3-5px of space beyond the 10px margin I have set. IE seems to also be ignoring a 10px margin on the bottom of one div when it touches my footer.
This issues affects all versions of IE I've tested it in.
My site (http://www.andrews.edu/~myhre/comp/learn)
My HTML code:
<!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>
<title>SoCT - Basic Computing</title>
<meta name="Author" content="Seth Myhre" />
<link rel="stylesheet" href="http://www.andrews.edu/~myhre/comp/learn/styles/style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="http://www.andrews.edu/~myhre/comp/learn/styles/style_ie.css" />
<![endif]-->
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="http://www.andrews.edu/~myhre/comp/learn/scripts/pngfix.js"></script>
<![endif]-->
<base href="http://www.andrews.edu/~myhre/comp/learn/" />
</head>
<body>
<!--Javascript to change imgs on mouseover-->
<!-- To learn this script go to "http://www.draac.com/mouseover-text-image.txt" -->
<script type="text/javascript">
if (document.images) {
image0 = new Image
image1 = new Image
image0.src = "images/logob.jpg"
image1.src = "images/formated/computer-laptop.jpg"
}
</script>
<!--[if !IE]>END Javascript END<![endif]-->
<div id="body">
<div id="header">
<img src="images/header.jpg" alt="" />
</div><!--[if !IE]>END header<![endif]-->
<div id="left">
<div id="green">
<img src="images/g01.jpg" alt="" />
<div id="pict">
<img class="lp" src="images/logob.jpg" name="imagename" alt="" />
</div><!--[if !IE]>END pict<![endif]-->
<img src="images/g03.jpg" alt="" />
</div><!--[if !IE]>END green<![endif]-->
<div id="yellow">
<img src="images/y01.jpg" alt="" />
<div id="pict2">
<ul class="menu">
<li><h2>Things to Learn</h2></li>
<li><a href="lessons">Basic computing</a></li>
<li>Course coming soon!!!</li>
<li>Course coming soon!!!</li>
<li>Course coming soon!!!</li>
<li>Course coming soon!!!</li>
<li>Course coming soon!!!</li>
<li>Course coming soon!!!</li>
<li>Course coming soon!!!</li>
</ul>
</div><!--[if !IE]>END pict2<![endif]-->
<img src="images/y03.jpg" alt="" />
</div><!--[if !IE]>END yellow<![endif]-->
</div><!--[if !IE]>END left<![endif]-->
<div id="gray">
<img src="images/a01.jpg" alt="" />
<div id="pict3">
<p class="main"> Thank you for visiting my computer help page. I hope that you find it very helpful. The green section, to the left of the page, is a section for pictures. While explaining things to people it often helps to show them while explaining. So if there is a link in the text while you are reading, hover your mouse cursor over it to see a picture of what I am talking about. For example, hover your cursor over <a href="javascript:void(0)"
onmouseover="document.imagename.src=image1.src" onmouseout="document.imagename.src=image0.src">this link.</a> The yellow section is for navigating through the pages. The links in that section will bring you to different sections of the lesson you are currently on or to a different course subject. If at anytime you wish to return to the index of courses just push the yellow menu button.
<br />
<b>NOTE:</b> This site is still under construction and may have a few errors here and there, especially since typing was never a strong point for me. As a second note since this site still is under construction not all my content is complete yet. So check back frequently for more to learn. Other then that feel free to continue on to learn about conputers.</p>
</div><!--[if !IE]>END pict3<![endif]-->
<img src="images/a03.jpg" alt="" />
<div id="butt">
<div id="home"><a href="index.html"><img class="button" src="images/homebutton.jpg" alt="" /></a></div>
</div><!--[if !IE]>END butt<![endif]-->
</div><!--[if !IE]>END gray<![endif]-->
<div id="footer">
<img class="foot" src="images/footer.jpg" alt="" />
<a href="http://validator.w3.org/check?uri=referer"><img class="foot" src="images/xhc.jpg" alt="" /></a>
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.andrews.edu/~myhre/comp/learn/styles/test.css"><img class="foot" src="images/csc.jpg" alt="" /></a>
</div><!--[if !IE]>END footer<![endif]-->
</div><!--[if !IE]>END body<![endif]-->
</body>
</html>
My css code:
a:link {color: #000000} /* unvisited link */
a:visited {color: #000000} /* visited link */
a:hover {color: #000000} /* mouse over link */
a:active {color: #000000} /* selected link */
/* to make sure z-index is read properly in firefox dont use negative numbers 0=bottom higher numbers are top layers*/
/* margin order is: top, right, bottom, left */
* {margin: 0px; padding: 0px; border: none}
/* image classes */
img.lp {margin-left: 15px}
img.foot {float: left}
img.button {float: left}
/* main text block */
p.main {font-family: "comic sans MS"; text-align: justify; padding: 10px 25px 10px 25px}
ul.menu {font-family: "comic sans MS"; list-style: none; padding: 25px}
h2 {font-family: "Marker felt"}
/* properties of containers that elements are placed in */
/* header - DO NOT CHANGE - header */
#body {width: 1000px; margin: 0px auto}
/* header - DO NOT CHANGE - header */
#header {width: 1000px; height: 87px; float: left; margin-bottom: 10px}
/* page - DO NOT CHANGE - page */
#left {width: 265px; margin-right: 10px; float: left}
#green {width: 265px; height: 265px; margin-bottom: 10px; float: left}
#pict {background-image: url('http://www.andrews.edu/~myhre/comp/learn/testimgs/g02.jpg'); background-repeat: repeat-y}
#yellow {width: 265px; min-height: 265px; margin-bottom: 10px; float: left}
#pict2 {background-image: url('http://www.andrews.edu/~myhre/comp/learn/testimgs/y02.jpg'); background-repeat: repeat-y}
#gray {width: 725px; min-height: 300px; margin-bottom: 10px; float: left}
#pict3 {background-image: url('http://www.andrews.edu/~myhre/comp/learn/testimgs/a02.jpg'); background-repeat: repeat-y; width: 725px; min-height: 300px}
#butt {width: 260px; margin: 40px auto 10px auto}
#buttons {width: 395px; margin: 40px auto 10px auto}
#sect_1 {width: 125px; height: 50px; margin-left: 5px; float: left}
#home {width: 250px; height: 50px; margin: 0px 0px 0px 5px; float: left}
#mid {width: 125px; height: 50px; margin: 0px 5px 0px 5px; float: left}
#sect_2 {width: 125px; height: 50px; margin: 0px; float: left}
/* footer - DO NOT CHANGE - footer */
#footer {width: 1000px; height: 30px; float: left}
My IE only css code:
/* Special cascade for ie only */
img {vertical-align: bottom}
#pict1 {vertical-align: bottom}
#pict2 {vertical-align: bottom}
#pict3 {vertical-align: bottom}
This issues affects all versions of IE I've tested it in.
My site (http://www.andrews.edu/~myhre/comp/learn)
My HTML code:
<!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>
<title>SoCT - Basic Computing</title>
<meta name="Author" content="Seth Myhre" />
<link rel="stylesheet" href="http://www.andrews.edu/~myhre/comp/learn/styles/style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="http://www.andrews.edu/~myhre/comp/learn/styles/style_ie.css" />
<![endif]-->
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="http://www.andrews.edu/~myhre/comp/learn/scripts/pngfix.js"></script>
<![endif]-->
<base href="http://www.andrews.edu/~myhre/comp/learn/" />
</head>
<body>
<!--Javascript to change imgs on mouseover-->
<!-- To learn this script go to "http://www.draac.com/mouseover-text-image.txt" -->
<script type="text/javascript">
if (document.images) {
image0 = new Image
image1 = new Image
image0.src = "images/logob.jpg"
image1.src = "images/formated/computer-laptop.jpg"
}
</script>
<!--[if !IE]>END Javascript END<![endif]-->
<div id="body">
<div id="header">
<img src="images/header.jpg" alt="" />
</div><!--[if !IE]>END header<![endif]-->
<div id="left">
<div id="green">
<img src="images/g01.jpg" alt="" />
<div id="pict">
<img class="lp" src="images/logob.jpg" name="imagename" alt="" />
</div><!--[if !IE]>END pict<![endif]-->
<img src="images/g03.jpg" alt="" />
</div><!--[if !IE]>END green<![endif]-->
<div id="yellow">
<img src="images/y01.jpg" alt="" />
<div id="pict2">
<ul class="menu">
<li><h2>Things to Learn</h2></li>
<li><a href="lessons">Basic computing</a></li>
<li>Course coming soon!!!</li>
<li>Course coming soon!!!</li>
<li>Course coming soon!!!</li>
<li>Course coming soon!!!</li>
<li>Course coming soon!!!</li>
<li>Course coming soon!!!</li>
<li>Course coming soon!!!</li>
</ul>
</div><!--[if !IE]>END pict2<![endif]-->
<img src="images/y03.jpg" alt="" />
</div><!--[if !IE]>END yellow<![endif]-->
</div><!--[if !IE]>END left<![endif]-->
<div id="gray">
<img src="images/a01.jpg" alt="" />
<div id="pict3">
<p class="main"> Thank you for visiting my computer help page. I hope that you find it very helpful. The green section, to the left of the page, is a section for pictures. While explaining things to people it often helps to show them while explaining. So if there is a link in the text while you are reading, hover your mouse cursor over it to see a picture of what I am talking about. For example, hover your cursor over <a href="javascript:void(0)"
onmouseover="document.imagename.src=image1.src" onmouseout="document.imagename.src=image0.src">this link.</a> The yellow section is for navigating through the pages. The links in that section will bring you to different sections of the lesson you are currently on or to a different course subject. If at anytime you wish to return to the index of courses just push the yellow menu button.
<br />
<b>NOTE:</b> This site is still under construction and may have a few errors here and there, especially since typing was never a strong point for me. As a second note since this site still is under construction not all my content is complete yet. So check back frequently for more to learn. Other then that feel free to continue on to learn about conputers.</p>
</div><!--[if !IE]>END pict3<![endif]-->
<img src="images/a03.jpg" alt="" />
<div id="butt">
<div id="home"><a href="index.html"><img class="button" src="images/homebutton.jpg" alt="" /></a></div>
</div><!--[if !IE]>END butt<![endif]-->
</div><!--[if !IE]>END gray<![endif]-->
<div id="footer">
<img class="foot" src="images/footer.jpg" alt="" />
<a href="http://validator.w3.org/check?uri=referer"><img class="foot" src="images/xhc.jpg" alt="" /></a>
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.andrews.edu/~myhre/comp/learn/styles/test.css"><img class="foot" src="images/csc.jpg" alt="" /></a>
</div><!--[if !IE]>END footer<![endif]-->
</div><!--[if !IE]>END body<![endif]-->
</body>
</html>
My css code:
a:link {color: #000000} /* unvisited link */
a:visited {color: #000000} /* visited link */
a:hover {color: #000000} /* mouse over link */
a:active {color: #000000} /* selected link */
/* to make sure z-index is read properly in firefox dont use negative numbers 0=bottom higher numbers are top layers*/
/* margin order is: top, right, bottom, left */
* {margin: 0px; padding: 0px; border: none}
/* image classes */
img.lp {margin-left: 15px}
img.foot {float: left}
img.button {float: left}
/* main text block */
p.main {font-family: "comic sans MS"; text-align: justify; padding: 10px 25px 10px 25px}
ul.menu {font-family: "comic sans MS"; list-style: none; padding: 25px}
h2 {font-family: "Marker felt"}
/* properties of containers that elements are placed in */
/* header - DO NOT CHANGE - header */
#body {width: 1000px; margin: 0px auto}
/* header - DO NOT CHANGE - header */
#header {width: 1000px; height: 87px; float: left; margin-bottom: 10px}
/* page - DO NOT CHANGE - page */
#left {width: 265px; margin-right: 10px; float: left}
#green {width: 265px; height: 265px; margin-bottom: 10px; float: left}
#pict {background-image: url('http://www.andrews.edu/~myhre/comp/learn/testimgs/g02.jpg'); background-repeat: repeat-y}
#yellow {width: 265px; min-height: 265px; margin-bottom: 10px; float: left}
#pict2 {background-image: url('http://www.andrews.edu/~myhre/comp/learn/testimgs/y02.jpg'); background-repeat: repeat-y}
#gray {width: 725px; min-height: 300px; margin-bottom: 10px; float: left}
#pict3 {background-image: url('http://www.andrews.edu/~myhre/comp/learn/testimgs/a02.jpg'); background-repeat: repeat-y; width: 725px; min-height: 300px}
#butt {width: 260px; margin: 40px auto 10px auto}
#buttons {width: 395px; margin: 40px auto 10px auto}
#sect_1 {width: 125px; height: 50px; margin-left: 5px; float: left}
#home {width: 250px; height: 50px; margin: 0px 0px 0px 5px; float: left}
#mid {width: 125px; height: 50px; margin: 0px 5px 0px 5px; float: left}
#sect_2 {width: 125px; height: 50px; margin: 0px; float: left}
/* footer - DO NOT CHANGE - footer */
#footer {width: 1000px; height: 30px; float: left}
My IE only css code:
/* Special cascade for ie only */
img {vertical-align: bottom}
#pict1 {vertical-align: bottom}
#pict2 {vertical-align: bottom}
#pict3 {vertical-align: bottom}