Also, see http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#Standards
Specifically, this paragraph: "HorizontalPanel is a bit trickier. In some cases, you can simply replace it with a DockLayoutPanel, but that requires that you specify its childrens' widths explicitly. The most common alternative is to use FlowPanel, and to use the float: left; CSS property on its children. And of course, you can continue to use HorizontalPanel itself, as long as you take the caveats above into account." It would appear that HorizontalPanel isn't designed to work correctly with standards mode, which is leading to the problem you're seeing in the first place, since widths (with margins and paddings) behave differently in quirks mode than standards mode. You'll probably want to see if you can fix your problem by switching the panels you're using to panels that are designed to work correctly in standards mode, but if that doesn't work then you can use the fix I detailed above. On Aug 27, 9:22 am, Falcon <[email protected]> wrote: > The problem in the example code that you posted is that the width is > getting set to 368px on the table in the inline style, which is > overriding the width: 100% that you want. Now, I'm not looking at this > with IE7, but with IE9 developer preview in IE7 standards mode, so > it's possible that there's a bug with that that's not showing me what > I should actually be seeing, but if you change width to 100% on both > the top table (class="TitleBar") and bottom table > (class="CommandBar"), then also change the height of CommandBar to > 35px from 33, that should give you what you're wanting. > > I think part of the problem is that GWT uses the same codepath for IE6 > and IE7, so they're using an inline style fix to accomodate IE6 that's > breaking IE7. (When looking at that page in Firefox, the width on > those tables is set to 100% instead of a numeric value.) > > The easiest way to fix this yourself would be to use a conditional > comment with your styles inside. e.g.: > <!--[if IE 7]> > <style type="text/css"> > table.TitleBar { > width: 100% !important;} > > table.CommandBar { > width: 100% !important; > height: 35px !important;} > > </style> > <![endif]--> > > Normally, I'd recommend you do this just in the IE7 code path of GWT, > but from what I remember, GWT combines IE6 and IE7 into the same > codepath by default. I'm not a big fan of !important declarations in > CSS in general, but in this case, since GWT is putting inline styles > on the element, I don't see a way around it unless you find a way to > override those styles in GWT itself, which would probably mean > manually splitting IE6 and IE7 into their own codepaths. > > Hope that helps! > > On Aug 27, 4:12 am, Magnus <[email protected]> wrote: > > > For convenience I uploaded a minimalistic live demo with source > > code:http://www.bavaria64.de:8080/LayoutProblem -- You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
