• Registered: 2005-05-13
  • Posts: 49

Topic: Clearer Divs

I know that in the upcoming 1.3, Paul has markup changes including the removal of the clearer DIVs.

However, right now 1.3 is not out, and I am putting the final touches on my forum. The clearer divs are interfering with the sites design. I had heard some people mention in the forums they have removed the clearer divs on their own. So I though, before I reinvent the wheel myself, could any of you share your changes?

Also, if you see this Paul, how significantly will the markup changes in 1.3 affect 1.2 styles? Will it be a huge headache to update them?

2 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Clearer Divs

First of all, it's not the clearer divs which cause the problems, its clearing floats. If you get rid of the clearer divs then you will have to find an alternative method of containing floats or your forum will just collapse in a heap (except in IE). The method I'm using now still uses clear:both, it just does it without needing an empty div.

If you want to see the effect of removing the clearing behaviour just do this
#punwrap div.clearer {display: none}
and then view in Firefox.

As for the markup changes, they are more significant than I first thought. Basically I've been deleting stuff from the markup and adding more css. Yes it will be a headache to update your stylesheets.  Some of the changes are

1. Clearer divs gone
2. div class inbox gone
3. divs inform and infldset gone
4. Viewtopic completely rewritten (still tinkering)
5. New method for displaying breadcrumbs, pages etc (this may change, its a pig)
6. Profile vertical menu now put in place using position: absolute rather than floating
7. Profile view of other members profile no longer uses floats at all
8. Admin is virtually tableless
9. Base css confined to structural css and hacks (most stuff in now in the main stylesheet)
10. Forms simplified

Having said all that, apart from minor changes in viewtopic it looks just the same as now.

  • Registered: 2005-05-13
  • Posts: 49

Re: Clearer Divs

Paul wrote:

First of all, it's not the clearer divs which cause the problems, its clearing floats. If you get rid of the clearer divs then you will have to find an alternative method of containing floats or your forum will just collapse in a heap (except in IE). The method I'm using now still uses clear:both, it just does it without needing an empty div.

Before I struggle with it on my own, mind if I ask you a quick question?

The problem is, with my site, that before the content of the page there is a nav system that I am floating left. So when punbb clears both, it makes the punbb block that cleared extend the whole height of my nav system, which is totally unacceptable.

I couldn't think of a way to modify my layout (I use to absolutely position the nav, but I had to float it so that the footer of my page would always stop at the bottom of it (with some negative margin and clear magic)) even if the content was shorter, so thats why I was looking at modifying punbb's layout instead.

Its all fine if your just using punbb by itself, but if you are embedding it within your sites design, that can cause headaches. Many complex css layouts use floats to accomplish their magic.

Paul wrote:

As for the markup changes, they are more significant than I first thought. Basically I've been deleting stuff from the markup and adding more css. Yes it will be a headache to update your stylesheets.

Alright. I'm all for improvements, so its OK by me. I figure since by the time 1.3 comes out my actual forum will be running already, I'll just give myself a test 1.3 environment to tinker with till I have it the way I want it.

4 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Clearer Divs

In theory if the floated elements that are being cleared are themselves inside a float then the clearing behaviour is confined inside the float e.g. it should be possible to turn #punwrap or .pun into a float which would then confine PunBB's clearing behaviour inside PunBB itself. Whether this actually works or not I have no idea but you could try

#punwrap {margin: 0; padding: 0; overflow: hidden}
.pun {float:left; width: 100%; height: 100%}
* html .pun {width: auto}

The other way of course is to put PunBB first in the markup and then use negative margins to position your site side menu. This is the way connor did it in his mini portal.

  • Registered: 2005-05-13
  • Posts: 49

Re: Clearer Divs

Paul wrote:

#punwrap {margin: 0; padding: 0; overflow: hidden}
.pun {float:left; width: 100%; height: 100%}
* html .pun {width: auto}

Bingo! Works like a charm. Can't thank you enough Paul.

I had tried making punwrap the float, but didn't try it on .pun.

Just a quick question. If the behavior of the above code is less likely to cause problems with a sites layout then the default code, is there any reason that the above shouldn't be default? I don't have a problem updating myself, I was just thinking if it prevents problems from happening for other people in the future, that is a good thing.

6 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Clearer Divs

I was thinking the same thing myself. The only problem is that if somebody is say using absolute positioning or some wierd combination of nested floats for their website, will there by any side effects in particular browsers. It would need some thorough testing I think.

An alternative is to put it in base.css commented out with a note to uncomment it if somebody is having trouble with their website.

  • Registered: 2005-05-13
  • Posts: 49

Re: Clearer Divs

Paul wrote:

I was thinking the same thing myself. The only problem is that if somebody is say using absolute positioning or some wierd combination of nested floats for their website, will there by any side effects in particular browsers. It would need some thorough testing I think.

Well, my site has a pretty complex layout, and with floating this it is a nested float, and these are my test results using this new method:

Windows:
  Various gecko browsers - perfect.
  IE 6 - perfect.
  IE 5.5 - For some reason doesnt wanna launch for me anymore.
  IE 5 - Works perfectly, so IE 5.5 probably works perfect too.
  Opera 8 - perfect
  Opera 7 - punbb dissapears completely
  Opera 6 - Floats arent handled correctly, punbb placed incorrectly

Mac
   Various gecko browsers - perfect
   Safari 1.2 and 2.0 - perfect
   Mac IE - didnt test because my site doesnt work in mac IE.
   Opera 7 - same as windows
   Opera 8 - perfect.

So, as far as I see only two are bad, Opera 6 and below (which I dont care about, I dont try to support them), and Opera 7 (Id like to support Opera 7, so...).

I'm happy to test any more.

Paul wrote:

An alternative is to put it in base.css commented out with a note to uncomment it if somebody is having trouble with their website.

I think that should definitely be done at least.

8 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Clearer Divs

To make it work with Opera 7 you need to put width: 100% on whatever element has the overflow: hidden. Trouble is this can screw things up in other ways. This is actually a bug in Opera 7 which was fixed in Opera 8. It is the only thing stopping overflow:hidden being used as the standard way to contain floats rather than bothering with all that clearing crap. The way to fix it probably involves a further wrapping div outside #punwrap which is useful anyway as it can be used to create padding around PunBB or even a border.

9 Reply by badrad (edited by badrad 2005-06-12 02:19)

  • Registered: 2005-05-13
  • Posts: 49

Re: Clearer Divs

So wrap it all in a #punwrap2 and set it to width = 100%?

EDIT:
Just tried that, and while it did make the div I am containing punbb in clear as tall as punbb is, punbb itself was still invisible. Perhaps I didnt understand properly what you said.

EDIT 2:
Actually, just applying width = 100% to punwrap worked just fine, and didnt mess it up in other browsers either (havent tested mac). Seems like we have a pretty bullet proof solution here.

10 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Clearer Divs

Not quite, if you now put borders or padding on #punwrap you will probably generate a horizontal scrollbar. However, if you only want to isolate PunBB and set padding around it or borders using your sites design then it should work fine.

So the final solution is

#punwrap {margin: 0; padding: 0; overflow: hidden; width: 100%}
.pun {float:left; width: 100%; height: 100%}
* html .pun {width: auto}

11 Reply by badrad

  • Registered: 2005-05-13
  • Posts: 49

Re: Clearer Divs

Well, thats what a punwrap2 would have to be made for.

Thanks again for helping me with this Paul.

I do think this solution should be noted in the documentation/css for other people who experience it.

12 Reply by Rod

  • Rod
  • Senior Member
  • Offline
  • From: Rouen, France
  • Registered: 2004-07-19
  • Posts: 591

Re: Clearer Divs

Afraid of you write ... "Viewtopic completly rewritten" ... can you say more about that ?!

http://www.sortons.net
http://www.fantasya.net

Rod's Website

13 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Clearer Divs

Rod wrote:

Afraid of you write ... "Viewtopic completly rewritten" ... can you say more about that ?!

    <div id="p<?php echo $cur_post['id'] ?>" class="multi blockpost<?php echo $vtbg ?><?php if (($post_count + $start_from) == 1) echo ' firstpost'; ?><?php if ($post_count == 1) echo ' toppost'; ?>">
        <div class="hbox multi"><h3><span>#<?php echo ($start_from + $post_count) ?> </span><a href="<?php echo pun_link($pun_url['post'], $cur_post['id']) ?>"><?php echo format_time($cur_post['posted']) ?></a></h3></div>
        <div class="box">
            <dl class="postleft">
                <dt class="username"><span><?php echo $lang_topic['Posted by'] ?></span><?php echo $username ?></dt>
                <dd class="usertitle"><?php echo $user_title ?></dd>
<?php if ($user_avatar != '') echo "\t\t\t\t".'<dd class="postavatar">'.$user_avatar.'</dd>'."\n"; ?>
<?php if (count($user_info)) echo "\t\t\t\t".implode('</dd>'."\n\t\t\t\t", $user_info).'</dd>'."\n"; ?>
<?php if ($cur_post['poster_id'] > 1) echo "\t\t\t\t".$is_online."\n" ?>
            </dl>
            <div class="postright">
                <div class="postbody">
                <h4><?php if (($post_count + $start_from) > 1) echo ' Re: '; ?><?php echo pun_htmlspecialchars($cur_topic['subject']) ?></h4>
                <div class="postmsg"><?php echo $cur_post['message'] ?><?php if ($cur_post['edited'] != '') echo '<p class="postedit">'.$lang_topic['Last edit'].' '.pun_htmlspecialchars($cur_post['edited_by']).' ('.format_time($cur_post['edited']).')</p>'; ?></div>
<?php if ($signature != '') echo "\t\t\t\t".'<dl class="postsignature"><dt><span>'.$lang_common['User signature'].'</span></dt><dd>'.$signature.'</dd></dl>'."\n"; ?>
                </div>
                <div class="postactions"><?php if (count($user_contacts)) echo '<dl class="usercontacts"><dt>User contacts</dt>'.implode('</dd>', $user_contacts).'</dd></dl>'; ?><dl class="postbuttons"><dt>User actions</dt><?php if (count($post_actions)) echo implode($lang_topic['Link separator'].'</dd>', $post_actions).$lang_topic['Link separator'].'</dd>' ?><dd class="postgotop"><a href="javascript:scroll(0,0)">Back to top</a></dd></dl></div>
            </div>
        </div>
    </div>

14 Reply by Rod

  • Rod
  • Senior Member
  • Offline
  • From: Rouen, France
  • Registered: 2004-07-19
  • Posts: 591

Re: Clearer Divs

Perfect ! smile

http://www.sortons.net
http://www.fantasya.net

Rod's Website

15 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Clearer Divs

Rod wrote:

Perfect ! smile

Not quite, but it is getting there.

  • Connorhd
  • Connorhd
  • Former PunBB Developer
  • Offline
  • From: Leeds, UK
  • Registered: 2004-06-13
  • Posts: 4,195

Re: Clearer Divs

btw Paul i dunno where to put this but in 1.3 you've made the css lowercase but not renamed the imports so the colour schemes don't get included

FluxBB.
Connorhd.co.uk.

Connorhd's Website