GWT/CSS text align problem

Hello,

assume a rectangular region at the bottom of the browsers content, used as a statusbar.

There should be three containers for text:

- left edge, vertically centered, defined left padding
- right edge, vertically centered, defined right padding
- center, vertically centered

+-----------------------------------------------------+
| left                 center                   right |
+-----------------------------------------------------+ 

I used to realize this with a lot of panels and onResize events, until I learned in this group that I should better do it with CSS.

Then, I found a solution using CSS, which worked for me:

<div style="display:table; width:100%;height:100%;">
 <div style="display:table-cell; vertical-align:middle;zoom:1; /* for IE8 */">
  <div style="float:left; padding-left:1em;">
   <div class="gwt-HTML">LEFT</div>
  </div>
 <div style="float:right; padding-right:1em; text-align:right;">
<div class="gwt-HTML">RIGHT</div>
</div>
<div style="text-align:center;"><div class="gwt-HTML">CENTER</div>

</div></div></div> 

I create this code with a class "Bar" as shown below.

However, I found that it does not work in IE8: The text "RIGHT" is not at the right edge of the bar, but below the word "LEFT".

I asked in a CSS group, but they always grumble because my site is "full of javascript" (which comes from GWT). :-)

So I hope that someone in the GWT group can help me.

Thanks

Magnus

-----

public class Bar extends SimplePanel //HTMLPanel

{

 private SimplePanel pnl_lf = null;

 private SimplePanel pnl_rt = null;

 private SimplePanel pnl_ct = null;

 

 public Bar ()

 {

  super ();

  init ();

 }

 

 private void init ()

 {

  final String stl_outer = "display:table; width:100%;height:100%; "; // border:1px solid;

  final String stl_inner = "display:table-cell; vertical-align:middle;zoom:1; /* for IE8 */";

  final String stl_lf = "float:left; padding-left:1em;";

  final String stl_rt = "float:right; padding-right:1em;"; // text-align:right;";

  final String stl_ct = "text-align:center;";

  

  pnl_lf = createDiv (stl_lf);

  pnl_rt = createDiv (stl_rt);

  pnl_ct = createDiv (stl_ct);

  FlowPanel inner = new FlowPanel ();

  setStyle (inner,stl_inner);

  inner.add(pnl_lf);

  inner.add(pnl_rt);

  inner.add(pnl_ct);

  

  SimplePanel outer = new SimplePanel ();

  setStyle (outer,stl_outer);

  outer.add(inner);

  

  add(outer);

  

  addStyleName ("apl-StatusBar");

 }

 public void setLeft (Widget wgt)

 {

  pnl_lf.add (wgt);

 }

 

 public void setRight (Widget wgt)

 {

  pnl_rt.add (wgt);

 }

 

 public void setCenter (Widget wgt)

 {

  pnl_ct.add (wgt);

 }

 

 private SimplePanel createDiv (String style)

 {

  SimplePanel p = new SimplePanel ();

  setStyle (p,style);

  return (p);

 }

 

 private void setStyle (Widget wgt,String style)

 {

  Element e = wgt.getElement();

  e.setAttribute("style",style);

 }

 

}

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/RCvqDE84WokJ.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.