IE has bottom space in DIV... Anyone?

[jpfour23]

Argh... I seriously have got to get this stuff down.

ANy ideas why IE is adding some space at the bottom of a div? See: http://new.redtreedesign.com/

The "Home" text & background image is inside #pgTitle.

http://new.redtreedesign.com/inc/layout.css

[Dan_A]

Remove height from #pgTitle

[jpfour23]

Same problem... Thanks though..

[jpfour23]

Anyone have a clue? I'm really at a loss here.

[Paul O'B]

Hi,

Try forcing layout on the #tree element and then set the object to display:block.

/* mac hide \*/
* html #tree {height:1%}
/* end hide */
object{display:block;width:100%}

If you don't want to use a hack then use the correct widths instead.

[jpfour23]

unfortunately that didn't work either... hmmmmmmm....

[CaryD]

ANy ideas why IE is adding some space at the bottom of a div? See: http://new.redtreedesign.com/

Your javascript is doing it. Or more likely the flash embedding method you are using within the javascript.

IE may not be simply ignoring the <embed> content within the <object>, but rather leaving room for it instead.

For instance, this code works fine. Of course, it was a simple test code and doesn't provide for active-x or information directing the browser to the needed plugin.

<div id="tree">
<object type="application/x-shockwave-flash" data="tree.swf" width="215" height="218">
<param name="movie" value="tree.swf" />
</object>
</div>

[Paul O'B]

Hi,

I'm sure its the object or embed tag.

Try this instead.

object{float:left;width:100%}

If that doesn't work try this:

object,embed{float:left;width:100%}

This works locally for me.

[jpfour23]

Paul,

Can't thank you enough. Spent hours changing things, floating things... just couldn't get it to work. I don't know why, I didn't think to float the object.

Thank you!

[jpfour23]

There is just one slight problem. Now the image below the object in FF does not show. IE shows fine.

[Paul O'B]

Well the simplest solution is just to give the code above to ie.

* html object{float:left;width:100%}

Its probably a clearing issue so try this first:

#pgTitle {
    width:215px; 
    height:45px;
    background: url(../img/pg_title.jpg);
    text-align:right;
    clear:both
}

[jpfour23]

WONDERFUL! clear:both worked! You're a genius!
jp

[jpfour23]

On a side note... Paul, how did you get to understand CSS (and the hacks) so well? Do you just read every day? Are there favorite books of yours that have helped you tremendously?

[Paul O'B]

Paul, how did you get to understand CSS (and the hacks)

It's just practice and experience

The bugs are always the same and once you understand the problems then the answers are easy to find. The faq lists the most common problems and will answer 99&#37; of the questions in these forums. The problem for beginners is that they don't know what the behaviour they are seeing is linked to in the faq.

Its always good to have a few reference books handy and most books by eric meyer are good (or the sitepoint books) but you can get almost anything you need on the web anyway. Just reading these forums daily will give you insight as you will see the same problems time and time again.

Do a forum search on books and you will see a lot of recommendations.