Thursday, February 22, 2007

Getting DIVs to work in IE6 and IE7 and Other Browsers

Here is a DIV style that will work in IE6 and IE7.  It contains the text or included contents and correctly displays scrollbars if needed. (Higlighting done with Scott Dunn's Code Formatter)

<div style="width: 95%; overflow: hidden; border-right: thin solid; border-top: thin solid; border-left: thin solid; border-bottom:thin solid;" > </div>

The border settings are optional but good to use while understanding the behavior of the style.

The key seems to be using a local style on the div.  Using an included style block doesn't work because blogger clears all styles before displaying a new div.  It can probably be done but I haven't yet managed to find the correct mechanism.

overflow can be set to hidden or auto if scrollbars are needed.  WOrd break adjustments can be applied locally and seem to get out from under styles imposed by the blogger template.

I highly recommend that IE6 any style patches in the template be removed in favor of free-flowing the blog sections.  If you need correct containment in an inserted element or div just apply a local style to the object.  be sure to a a width: 100%; to the style. THe presence of this style bit seems t force teh div to behave.

Steve Dunn's Code Formatter  uses a containing DIV with the width pre-set so it behaves correctly once the template patches have been removed.  Steve uses the ActiPro ASP.NET DLLs to generate DHTML into the WLW blog editor.

Steves code provides support for the following languages:

  • Batch File
  • C#
  • CSS
  • HTML
  • INIFile
  • Java
  • JScript
  • Perl
  • PHP
  • Python
  • SQL
  • VB.NET
  • VBScript
  • XML

 Code highlighting produced by Actipro CodeHighlighter (freeware)

No comments:

Post a Comment