Clearfloat problem-extra space remains in IE

Question

Hi,
I've worked on this problem, did the Google thing, but I just
can't resolve it. There is extra space remaining under the image
even after using clearfloat. I want the bottom border to snug up to
the bottom of the image, but somehow in IE I keep getting that
horrible gray space.
Main
page-with troublesome space below before footer
Thanks so much for helping... as always!
Cheers,
Janell

Answer 1

I don't see an extra space problem related to floats in IE6
but I do see a
gray png background image under the spash-text. Pre-IE7
browsers do not
support alpha transparency on png images. If you get rid of
the bg image,
you'll see better results in IE. Or do a search for IE
conditional comments
or the IE star hack to serve a different image to pre-IE7
browsers.
--Nancy O.
Alt-Web Design & Publishing
www.alt-web.com
"Janell1" <[email protected]> wrote in
message
news:[email protected]...
> Hi,
> I've worked on this problem, did the Google thing, but I
just can't
resolve
> it. There is extra space remaining under the image even
after using
> clearfloat. I want the bottom border to snug up to the
bottom of the
image,
> but somehow in IE I keep getting that horrible gray
space.
>
http://www.acmedigitaldesign.com/marmit/index.html
> Thanks so much for helping... as always!
> Cheers,
> Janell
>
> @charset "UTF-8";
> body {
> margin: 0; /* it's good practice to zero the margin and
padding of the
body
> element to account for differing browser defaults */
> padding: 0;
> text-align: center; /* this centers the container in IE
5* browsers. The
text
> is then set to the left aligned default in the
#container selector */
> color: #000000;
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 100%;
> background-color: #000000;
> }
> .oneColFixCtrHdr #container_entirepage {
> width: 780px;
> margin: 0 auto; /* the auto margins (in conjunction with
a width) center
the
> page */
> }
> .oneColFixCtrHdr #container {
> width: 780px; /* the auto margins (in conjunction with a
width) center
the
> page */
> border: 1px solid #a9a69a;
> text-align: left; /* this overrides the text-align:
center on the body
> element. */
> background-color: #3b3b3b;
> margin-top: 0;
> margin-right: auto;
> margin-bottom: 0;
> margin-left: auto;
> padding-bottom: 0px;
> }
>
> .oneColFixCtrHdr #header {
> background-color: #3b3b3b;
> padding-top: 5;
> padding-right: 20px;
> padding-bottom:5;
> padding-left: 20px;
> }
> ul.MenuBarHorizontal ul {
> margin: 0; /* zeroing the margin of the last element in
the #header div
will
> avoid margin collapse - an unexplainable space between
divs. If the div
has a
> border around it, this is not necessary as that also
avoids the margin
collapse
> */
> padding: 10px 0; /* using padding instead of margin will
allow you to
keep
> the element away from the edges of the div */
> }
> .oneColFixCtrHdr #mainContent {
> background-color: #3b3b3b;
> padding-top: 0;
> padding-right: 0px;
> padding-bottom: 0;
> padding-left: 0px;
> height: auto;
> }
>
> .oneColFixCtrHdr #footer {
> background:#000000; /* this padding matches the left
alignment of the
> elements in the divs that appear above it. */
> text-align: center;
> padding-top: 0;
> padding-right: 10px;
> padding-bottom: 0;
> padding-left: 10px;
> }
> .oneColFixCtrHdr #footer p {
> font-family: Geneva, Arial, Helvetica, sans-serif;
> font-size: 80%;
> line-height: 1.5em;
> font-weight: 100;
> color: #777777;
> text-decoration: none;
> margin: 0; /* zeroing the margins of the first element
in the footer
will
> avoid the possibility of margin collapse - a space
between divs */
> padding: 10px 0; /* padding on this element will create
space, just as
the
> the margin would have, without the margin collapse issue
> text-align: center;
> }
> .oneColFixCtrHdr #footer p a:link {
> color: #c4a561;
> text-decoration: none;
> }
> .oneColFixCtrHdr #footer p a:visited {
> color: #c4a561;
> text-decoration: none;
> }
> .oneColFixCtrHdr #footer p a:hover {
> color: #ea9c15;
> text-decoration: none;
> }
> .oneColFixCtrHdr #footer p a:active {
> color: #ea9c15;
> text-decoration: none;
> }
>
>
>
> /* Below are the designer's custom layout styles */
>
> .image_aligncenter {
> padding-top: 20px;
> padding-right: 30px;
> padding-bottom: 0px;
> padding-left: 30px;
> }
> .armitage_sig {
> clear: none;
> float: right;
> z-index: 1090;
> }
> .large_image_z {
> z-index: 1090;
> }
> .splash_textover {
> float: left;
> z-index: 3000;
> background-image:
url(images/splash/transparent_png.png);
> clear: none;
> height: auto;
> width: 400px;
> position: relative;
> top: -75px;
> left: 20px;
> font-family: Verdana, Arial;
> font-size: 14px;
> line-height: 1.2em;
> font-weight: 100;
> color: #bcb9ab;
> text-decoration: none;
> }
> .clearfloat {
> clear:both;
> height:0;
> font-size: 1px;
> line-height: 0px;
> overflow: hidden;
> }
>
> <!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" />
> <meta name="description" content="Sculpture &
Fine Art pieces by Los
Angeles
> based Michelle Armitage specializing in bronzes, steel,
stone, and
mixed-media.
> Art commisions welcome. " />
> <title>Sculptor, Fine Artist, All
Media</title>
> <link href="oneColFixCtrHdr.css" rel="stylesheet"
type="text/css" />
> <script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
> <link href="SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet"
> type="text/css" />
> </head>
>
> <body class="oneColFixCtrHdr">
> <div id="container_entirepage">
>
> <div id="container">
> <div id="header">
>
> <ul id="MenuBar1" class="MenuBarHorizontal">
> <li><a href="index.html" title="Home
">HOME</a> </li>
> <li><a href="artist.html" title="The
Artist">THE ARTIST</a></li>
> <li><a class="MenuBarItemSubmenu"
href="gallery.html"> GALLERY</a>
> <ul>
> <li><a href="gallery.html"
title="Gallery">MAIN
GALLERY</a></li>
> <li><a href="steel.html" title="Steel
Gallery">STEEL</a></li>
> <li><a href="stone.html" title="Stone
Gallery">STONE</a></li>
> <li><a href="bronze.html" title="Bronze
Gallery">BRONZE</a></li>
> <li><a href="largerworks.html"
title="Larger-works">LARGER
> WORKS</a></li>
> <li><a href="mixedmedia.html"
> title="Mixed-Media">MIXED-MEDIA</a></li>
> </ul>
> </li>
> <li><a href="exhibitions.html"
title="Exhibitions">EXHIBITIONS</a></li>
> <li><a href="contact.html"
title="Contact">CONTACT</a></li>
> </ul>
>
> <!-- end #header --></div>
>
> <div id="mainContent">
>
> <div class="image_aligncenter"
align="center"><img
> src="images/splash/splash_title.gif" alt="Armitage
Design presents the
work of
> Michelle Armitage" width="661" height="169"
align="center"/></div>
> <div class="large_image_z"><img
src="images/splash/splash_sculpt.gif"
> alt="Sculpture" width="776" height="381"
/></div>
> <div class="splash_textover">
> Sculpture &amp; Fine Art pieces by Los Angeles based
Michelle
Armitage
> specializing in bronzes, steel, stone, and mixed-media.
Art commissions
welcome.
> </div>
> <!-- end #mainContent --></div><!-- end
#container --></div>
> <br class="clearfloat" />
> <div id="footer">
> <p align="center">&copy;2008 Michelle
Armitage<br />
> <a href="index.html">home</a> | <a
href="artist.html">artist</a> | <a
> href="gallery.html">gallery</a> | <a
href="exhibitions.html">exhibitions</a> |
> <a href="contact.html">contact</a></p>
> </div>
> <!-- end #footer -->
> </div>
>
> <script type="text/javascript">
> <!--
> var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
> {imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
> imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
> //-->
> </script>
> </body>
> </html>
>