If you can get away with using a FlowPanel or one of the panels they list as working in standards-mode and still get the layout you want, I would do that instead; that way Google should take care of the layout issues in the different browsers and you won't have to worry about it again.
When I was looking at your test page, I had to change the height to get everything to display correctly (the bottom "CommandBar" was a couple of pixels off and wasn't quite flush with the bottom of the table), but that may have been because I was using IE9's IE7 emulation instead of looking at it in IE7 itself. If everything is lining up when you look at it in IE7, you're fine. =) On Aug 30, 11:49 am, Magnus <[email protected]> wrote: > Hi Falcon, > > if one should not use HorizontalPanel, would you prefer the use of > FlowPanel over inserting the IE7 specific style? > > How did it come you proposed to change the height? (Maybe I have a > problem, I don't know yet! :-)) > > Magnus > > On Aug 30, 3:37 pm, Falcon <[email protected]> wrote: > > > If the height is working for you, don't worry about changing it. > > > Keep in mind that GWT will actually send different code to different > > browsers. The reason that you aren't seeing that value in Firebug in > > Firefox was that Firefox was receiving a width of 100% and not the > > 368, but GWT was sending an inline style to IE6 and 7 to account for > > some of the rendering problems in IE. However, that panel was designed > > to be used in quirks mode, so GWT is sending values that don't work in > > standards mode, which is what you're using. > > > I don't remember for sure if IE7 has it, but IE8 and the IE9 developer/ > > platform preview both have "Developer Tools" (either F12 or under > > Tools) which allows you to do similar things to Firebug. The IE9 > > preview lets you switch between IE5, IE7, IE8, and IE9 rendering modes > > while IE8 lets you switch between IE7 and IE8. I'd recommend checking > > each version of the browser directly if possible as those rendering > > modes don't always do a perfect job and there may be minor > > differences, but at least the developer tools should get you in the > > ballpark. > > > On Aug 30, 7:29 am, Magnus <[email protected]> wrote: > > > > Hi Falcon, > > > > thank you very much!!! > > > This works perfectly! > > > > I just copied your code in my main html file, right at the end of the > > > head tag. > > > > Could you tell me how you found out that the width was set to 368 px? > > > In FF I have FireBug, but it did not show this width. In IE I have > > > nothing similar. > > > > Another question: Why should I change the height from 35px to 33px? I > > > had no problem with the heigt... > > > > Thank you again! > > > > Now I can proceed with my app... > > > > Magnus > > > > On 27 Aug., 16:22, 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.
