Hello all,

I am having a frustration with FireFox not being able to clear floating blocks correctly(?). I have the following css code:
.clear {
clear: both;
padding-bottom: 1px; /* for Gecko-based browsers */
margin-bottom: -1px; /* for Gecko-based browsers */
}

Which is invoked by the following code in my theme.html:
<div style="clear: both;">&nbsp;</div>

I've tried numerous methods of invoking the clear command, none work correctly in FireFox, almost anything works in IE. You may see the error at:

http://processteam.org (you'll need both IE & Firefox... duh.)

Any help is most appreciated!

doesn't invoke that .clear css class it's a style setting itself..



would use the css class .clear

Hi m0nty,

Thank you for the pointer... unfortunately I still have the same problem?????

I added your <div class="clear">&nbsp;</div> to the theme.html and still arrrggghhhh.

Any other suggesions???

without seeing the rest of the relevant html, i dunno..

i'm not a css guru..

are you adding the clear class inside the container or after it?

also i just found this which might be of some use >

http://www.positioniseverything.net/easyclearing.html

I tried creating containers and putting it both in and outside of the container... I get the same thing either way

I'm trying to do this theme without tables... I guess I'll be forced to surrender soon!

The html in question follows:

<!--- middle (main content) column begin -->

<{if $xoops_showcblock == 1}>
<p>
<!-- Start center-left blocks loop -->
<{foreach item=block from=$xoops_clblocks}>
<fieldset class="centerLcolumn">
<legend class="blockTitle"><strong><{$block.title}></strong></legend>
<div class="blockContent"><{$block.content}></div>
</fieldset>
<{/foreach}>
<!-- End center-left blocks loop -->

<!-- Start center-right blocks loop -->
<{foreach item=block from=$xoops_crblocks}>
<fieldset class="centerRcolumn">
<legend class="blockTitle"><strong><{$block.title}></strong></legend>
<div class="blockContent"><{$block.content}></div>
</fieldset>
<{/foreach}>
<!-- End center-right blocks loop -->

</p><div class="clear">&nbsp;</div>
<!-- Start center-center-top blocks loop -->
<{foreach item=block from=$xoops_ccblocks}>
<fieldset class="centerCcolumn" colspan="2">
<legend class="blockTitle"><strong><{$block.title}></strong></legend>
<div class="blockContent"><{$block.content}></div>
</fieldset>
<{/foreach}>
<!-- End center-center-top blocks loop -->

<div class="clear">&nbsp;</div>

<!-- End centercolumn -->

<{/if}> <!-- End display center blocks -->

<div id="content"><{$xoops_contents}></div>

<{if $xoBlocks.page_bottomleft or $xoBlocks.page_bottomright or $xoBlocks.page_bottomcenter}>


<{if $xoBlocks.page_bottomcenter}>
<!-- Start center-center-bottom blocks loop -->
<{foreach from=$xoBlocks.page_bottomcenter item=block}>
<fieldset class="centerCcolumn">
<legend class="blockTitle"><strong><{$block.title}></strong></legend>
<div class="blockContent"><{$block.content}></div>
</fieldset>
<{/foreach}>
<!-- End center-center-bottom blocks loop -->
<{/if}>

<{if $xoBlocks.page_bottomleft}>
<!-- Start center-left-bottom blocks loop -->
<{foreach from=$xoBlocks.page_bottomleft item=block}>
<fieldset class="centerLcolumn">
<legend class="blockTitle"><strong><{$block.title}></strong></legend>
<div class="blockContent"><{$block.content}></div>
</fieldset>
<{/foreach}>
<!-- End center-left-bottom blocks loop -->
<{/if}>

<{if $xoBlocks.page_bottomright}>
<!-- Start center-right-bottom blocks loop -->
<{foreach from=$xoBlocks.page_bottomright item=block}>
<fieldset class="centerRcolumn">
<legend class="blockTitle"><strong><{$block.title}></strong></legend>
<div class="blockContent"><{$block.content}></div>
</fieldset>
<{/foreach}>
<!-- End center-right-bottom blocks loop -->
<{/if}>

<div class="clear">&nbsp;</div>

<{/if}>

<!--- middle (main content) column end -->

rabideau,

Instead of using clear:both; you may want to try display:block;. I've run into the situation you've described befor and display:block; fixed me right up.

HTH.

James

Doooon't surrender ! it'll be worthwile if you keep on. I am not sure how to help you since I can't see the CSS in your code, you just pasted the HTML.

You can look at the CSS wireframe project we had started some time ago ...it's simpler than morphogenesis, so you could want to update some parts a little, I don't remember if it has the blocks below content added... I think it might. Just thought it could be a good start

view the css wireframe here

I have found a way to make parts of it work... now I'm having the IE/ FireFox px (pixel- spacing) count problem.

I hate it that the site looks correct under IE but not FireFox.

Perhaps one of you css giants (as opposed to me, a bear of small brain) can help me. The site again is at:

http://processteam.org

rabideau,

Could you clarify what the end result you're trying to acheive is?

Code is great, but it doesn't clearly convey vision.

Best Regards,

James

I agree with JMorris that it's hard to see what you are trying to do. Could you perhaps use:

I find this works a treat in every browser... so it probably won't validate, be politically correct or accessible.