Firefox ignoring breaks and margins

[Elbee]

I'm writing code for a home page in IE7. When viewed in IE8 or Firefox, the breaks are totally ignored. Is there a way to resolve this issue?

http://jaxpubliclibrary.org/welcome-new2.html

If you look at the above URL in IE7, the page looks like I want it to look. If you look at it in Firefox or IE8, it does not have a space between the calendar at the top and the Featured Programs. It is as if Firefox and IE8 are ignoring
<br />
<p>&nbsp;</p>
margins

Thank you for your help, Elbee

[Beverleyh]

You have 2 choices;

The dirty fix - this uses conditional comments to serve more empty <p> and <br/> tags to IE8+ and non-IE browsers, until the gap gets big enough to suit;

<!--[if lt IE 7]>
<br/>&nbsp;
<p>&nbsp;</p>
<![endif]-->

<![if !IE]>
<br/>&nbsp;
<p>&nbsp;</p>
<![endif]>

OR, the clean fix;
Remove the empty <p> and <br/> tags used as spacers and add a bottom margin on the div that contains your calendar instead. This should create a gap that all browsers play nicely with.

[jscheuer1]

I don't think any of that will help here because the problem is due to float. In IE 7 and earlier a float is considered to have the native height of its content. This is non-standard though. All others treat a float as though it has no intrinsic height until cleared or some other style is applied to it to give it intrinsic height.

For example, here:


<div style="width:200px;padding:0;margin:0px;float:left;border:1px;">
<span style="font-weight:bolder;padding-left:40px;padding-right:46px;margin-left:0px;margin-right:0px;margin-top:2px;background-color:#7096C6;color:#ffffff;font-size:larger;">Events This Month</span>
<div id="eventstinycal" class="eventstinycal"></div>
</div></div>
<script type="text/javascript" src="http://jplcalendar.coj.net/evanced/lib/tinycal.asp?ln=ALL"></script>
</div>
<br />

If you add a clear:


<div style="width:200px;padding:0;margin:0px;float:left;border:1px;">
<span style="font-weight:bolder;padding-left:40px;padding-right:46px;margin-left:0px;margin-right:0px;margin-top:2px;background-color:#7096C6;color:#ffffff;font-size:larger;">Events This Month</span>
<div id="eventstinycal" class="eventstinycal"></div>
</div></div>
<script type="text/javascript" src="http://jplcalendar.coj.net/evanced/lib/tinycal.asp?ln=ALL"></script>
</div><div style="clear:left;"></div>
<br />

Then the content height of the float will be used in the layout, and the br will work.

Without the clear the br still works, its just that it's too high up in the layout to be noticed.

[Beverleyh]

In IE 7 and earlier a float is considered to have the native height of its content. This is non-standard though. All others treat a float as though it has no intrinsic height until cleared or some other style is applied to it to give it intrinsic height.
I didnt know that - thanks for clearing things up for me.

[Elbee]

It worked great! <div style="clear:left;"></div>

Thank you so much!

[jscheuer1]

I didnt know that - thanks for clearing things up for me.


It worked great! <div style="clear:left;"></div>

Thank you so much!

Your welcome. There are other ways, but unless there is some reason why a clear cannot be used, it's the most reliable.

Just to clarify about IE 7. I think that it may be more compliant with the standard on float than IE 6, but that at least at times it still (as obviously here it did) exhibits this older type behavior in regard to float.