University of Melbourne home page
 

2007-05-28 : block context (float/clear) issue

the issue

An issue was found with ‘floats’ and ‘clears’ in the content area of pages and how those floats and clearances react with the menu and sidebar in some browsers. The problems only occur when more ‘creative’ layouts are attempted, so shouldn’t affect the vast majority of content.

An example of the issue can be viewed temporarily at this URL: http://www.sandbox.unimelb.edu.au/block-context/ Note the link in the menu on this page to view a ‘fixed’ version of the page.

The problem is a well documented issue - just overlooked in this case. Thanks to Linh Vu for an informative URL that helped solve the issue.

affected platform/browser

all target browsers are affected to some degree

actions

There were several options for tackling this issue, all involved giving the #content div ‘layout’ so that floated child elements floated and cleared correctly in the context of their immediate parent. Adding a rule for the content div to display:table; was eventually chosen because it worked best with IE5.5, which is still a target browser.

  • #content {display:table;} was added to common.css

The impact of this change had implications for all browsers, so several other adjustments were required.

  • margins were removed from #content
  • left-padding:30px; was added to #content to restore the lost margins
  • height:1px; added to #content in the ie-win-5-6.css (a well known fix for older versions of IE)

at the same time:

  • #content styles duplicated in the public and intranet css were consolidated to the common.css
  • a new class .clearboth was added to common.css as a need was identified to provide this functionality. As the name implies, the only rule is clear:both;. The new rule can be applied to any block element in the #content area.

Site managers/maintainers should check for adverse effects when the changes are made live.

impact

No known adverse impact.

The fix has been tested on a wide range of browsers with no problems, however individual pages may display some unusual behaviours, so site managers should check as much content as possible and report any problems.

This bug fix has had the secondary effect of fixing another issue that some users have complained about... the wrapping of text around the right hand sidebar. This was not an issue as such, just a personal preference, however the side effect should make some people happy.

timing

This fix will be applied at 1pm on Monday, May 28th.

rollback

In the event that this causes problems with a local situation or customisation, sites can change their reference to the ‘pre-fixed’ style sheets.

Which will no longer be updated.

 
templates/revisions/2007-05-28.txt · Last modified: 2007/05/28 13:07 by aharris
 
Recent changes RSS feed Creative Commons License Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki