GWT 1.5 renders oversize in IE
5 views
Skip to first unread message
Jason.Sadler
Jul 17, 2008, 10:59:35 AM7/17/08
to Google Web Toolkit
Hi everyone - apologies if this has been answered already (it seems
like the kind of issue that would have been raised already) but I've
searched and searched and found no answer.
...Anyways, in IE6 and IE7 GWT renders GWT widgets (such as buttons,
labels, etc) really, really big. I'm pretty sure that it's just the
font size being rendered too big. I am using the Chrome theme that
ships with 1.5, if that has any bearing. Anyone know what's going
on? In Firefox everything looks fine.
Thanks,
Jay
like the kind of issue that would have been raised already) but I've
searched and searched and found no answer.
...Anyways, in IE6 and IE7 GWT renders GWT widgets (such as buttons,
labels, etc) really, really big. I'm pretty sure that it's just the
font size being rendered too big. I am using the Chrome theme that
ships with 1.5, if that has any bearing. Anyone know what's going
on? In Firefox everything looks fine.
Thanks,
Jay
MN
Jul 18, 2008, 7:20:42 AM7/18/08
to Google Web Toolkit
depending at the starting point: in IE looks fine and firefox render
it to small
;-)
i have also the problem: if i develop it in the GWTShell then it looks
different in IE and in FF.
is there a better solution for this (sometimes big) differences?
it to small
;-)
i have also the problem: if i develop it in the GWTShell then it looks
different in IE and in FF.
is there a better solution for this (sometimes big) differences?
jones34
Jul 18, 2008, 10:21:05 PM7/18/08
to Google Web Toolkit
I have a similar issue, except that in my case, FireFox and IE
sometimes render the same size and sometimes IE is bigger.
My guess is this may not be GWT at all, but rather a cross-browser
issue. (Well, I guess GWT *is* supposed to make that stuff go
away :). Any cross-browser/CSS gurus know how to fix this problem?
Thanks.
sometimes render the same size and sometimes IE is bigger.
My guess is this may not be GWT at all, but rather a cross-browser
issue. (Well, I guess GWT *is* supposed to make that stuff go
away :). Any cross-browser/CSS gurus know how to fix this problem?
Thanks.
Ian Bambury
Jul 18, 2008, 11:11:40 PM7/18/08
to Google-We...@googlegroups.com
Ideally you need to level all the browsers in CSS before doing anything else, then build up a basic style for HTML elements.
I do this in one file. Then there's one for GWT, and one for my framework
After that, I have other css files for site-specific overrides. The golden rule being to keep the sections separate - don't change something in the basic styles if it is for this one site, add a line to override it in the site.css file.
It's worth doing. With that and GWT, I can't remember hitting a cross-browser problem. Great swathes of text with embedded images will line-break at the same words down a div.
Here's my basic levelling and a tiny bit of rebuilding - you need to build up your needs as required.
/***********************
* Level
***********************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td
{
margin : 0;
padding : 0;
}
table
{
border-collapse : collapse;
border-spacing : 0;
}
fieldset,img
{
border : 0;
}
address,caption,cite,code,dfn,em,strong,th,var
{
font-style : normal;
font-weight : normal;
}
ol,ul
{
list-style : none;
}
caption,th
{
text-align : left;
}
h1,h2,h3,h4,h5,h6
{
font-size : 100%;
font-weight : normal;
}
q:before,q:after
{
content : '';
}
abbr,acronym
{
border : 0;
}
/***********************
* Build Up Again
***********************/
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, p, th, td, form, fieldset, input, textarea, blockquote
{
font-family : Arial, Verdana, Tahoma, Sans-Serif;
color : #000;
}
h1 { font-size : 180%;}
h2 { font-size : 130%;}
h3 { font-size : 110%;}
h4 { font-size : 90%;}
h5 { font-size : 90%;}
h6 { font-size : 70%;}
* Level
***********************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td
{
margin : 0;
padding : 0;
}
table
{
border-collapse : collapse;
border-spacing : 0;
}
fieldset,img
{
border : 0;
}
address,caption,cite,code,dfn,em,strong,th,var
{
font-style : normal;
font-weight : normal;
}
ol,ul
{
list-style : none;
}
caption,th
{
text-align : left;
}
h1,h2,h3,h4,h5,h6
{
font-size : 100%;
font-weight : normal;
}
q:before,q:after
{
content : '';
}
abbr,acronym
{
border : 0;
}
/***********************
* Build Up Again
***********************/
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, p, th, td, form, fieldset, input, textarea, blockquote
{
font-family : Arial, Verdana, Tahoma, Sans-Serif;
color : #000;
}
h1 { font-size : 180%;}
h2 { font-size : 130%;}
h3 { font-size : 110%;}
h4 { font-size : 90%;}
h5 { font-size : 90%;}
h6 { font-size : 70%;}
p { font-size : 80%;}
button { font-size : 80%;}
I'd also suggest you keep the files separate and only combine where the site is deployed and only if it is necessary.
button { font-size : 80%;}
I'd also suggest you keep the files separate and only combine where the site is deployed and only if it is necessary.
HTH
--
Ian
http://examples.roughian.com
_______________________________________
Stuff the environment - Print this email
_______________________________________
Ian
http://examples.roughian.com
_______________________________________
Stuff the environment - Print this email
_______________________________________
LouisB
Jul 19, 2008, 3:50:50 AM7/19/08
to Google Web Toolkit
ahah! glad I found this posting - thought I was going mad when I was
seeing this! :)
Been having this trouble for a while since trying out gwt1.5rc1 where
in my case hosted mode on Windows (MSIE renderer) was displaying the
contents larger than expected and off the page to the right.
That css looks like it could be very useful, cheers :)
seeing this! :)
Been having this trouble for a while since trying out gwt1.5rc1 where
in my case hosted mode on Windows (MSIE renderer) was displaying the
contents larger than expected and off the page to the right.
That css looks like it could be very useful, cheers :)
Jason.Sadler
Jul 21, 2008, 10:49:57 AM7/21/08
to Google Web Toolkit
Thanks for the info, everyone...
I guess the thing I'm confused about is that under normal (IE non-GWT)
circumstances, at least as far as my experience goes, font sizes in
the various browsers always match. So is GWT doing something wrong
somewhere? Should I file a bug report? (I can't find anything related
in the GWT issue tracker, but I can't believe that something like this
has gone completely unnoticed...) If this is a real bug and will be
solved before final release, I don't want to bash my head against a
wall trying to get it to render properly with new CSS rules (a quick
copy/paste of Ian's file didn't work for me).
I guess the thing I'm confused about is that under normal (IE non-GWT)
circumstances, at least as far as my experience goes, font sizes in
the various browsers always match. So is GWT doing something wrong
somewhere? Should I file a bug report? (I can't find anything related
in the GWT issue tracker, but I can't believe that something like this
has gone completely unnoticed...) If this is a real bug and will be
solved before final release, I don't want to bash my head against a
wall trying to get it to render properly with new CSS rules (a quick
copy/paste of Ian's file didn't work for me).
Ian Bambury
Jul 21, 2008, 3:09:05 PM7/21/08
to Google-We...@googlegroups.com
Do you have a small example - I personally have never seen this happen.
As a guess, though, I'd say you are nesting tables somewhere - IE and FF treat the inheritance of font sizes differently (IE doesn't inherit I think, can't remember) but anyway, if you nest a table within a table then at 50% the inner table will be 50% in one and 25% in the other, and at 200% it will be 200% in one and 400% in the other.
That would also explain why some people get bigger text and some smaller.
But an example would prove/disprove my theory. The rule to get round this is never to set tables to anything other than 100% - set the fontsize on the <p> element - the final one, anyway. - don't nest headers in <p> elements etc, etc.
Ian
2008/7/21 Jason.Sadler <jason....@gmail.com>:
Jason.Sadler
Jul 21, 2008, 4:28:52 PM7/21/08
to Google Web Toolkit
Here is a quick example, where leveler.css is exactly what you pasted
in your above post.
DISCLOSURETEST.JAVA:
public class DisclosureTest extends Composite implements EntryPoint {
private DockPanel dock = new DockPanel(); // any CellPanel, or a
FlexTable, maybe others
//Problem has something to do with the following DIV's attributes:
private HTML html = new HTML("<DIV STYLE=\"position:relative; z-
index:0; top:0%; left:0%; width:850px; height:1150px \">SOME STUFF</
DIV> \r\n");
private MenuBar menu = new MenuBar();
private MenuItem item = new MenuItem("How To Disappear Completely",
(Command)null);
public void onModuleLoad() {
menu.addItem(item);
dock.add(menu, DockPanel.CENTER);
dock.add(html, DockPanel.EAST);
RootPanel.get().add(dock);
}
}
DISCLOSURETEST.HTML:
<html>
<head>
<title>Wrapper HTML for DisclosureTest</title>
<link rel="stylesheet" type="text/css" href="leveler.css" />
</head>
<body>
<script type="text/javascript" language="javascript"
src="com.opentext.gwt.test.disclosure.DisclosureTest.nocache.js"></
script>
</body>
</html>
On Jul 21, 3:09 pm, "Ian Bambury" <ianbamb...@gmail.com> wrote:
> Do you have a small example - I personally have never seen this happen.
>
> As a guess, though, I'd say you are nesting tables somewhere - IE and FF
> treat the inheritance of font sizes differently (IE doesn't inherit I think,
> can't remember) but anyway, if you nest a table within a table then at 50%
> the inner table will be 50% in one and 25% in the other, and at 200% it will
> be 200% in one and 400% in the other.
>
> That would also explain why some people get bigger text and some smaller.
>
> But an example would prove/disprove my theory. The rule to get round this
> is never to set tables to anything other than 100% - set the fontsize on the
> <p> element - the final one, anyway. - don't nest headers in <p> elements
> etc, etc.
>
> Ian
>
> 2008/7/21 Jason.Sadler <jason.sad...@gmail.com>:
in your above post.
DISCLOSURETEST.JAVA:
public class DisclosureTest extends Composite implements EntryPoint {
private DockPanel dock = new DockPanel(); // any CellPanel, or a
FlexTable, maybe others
//Problem has something to do with the following DIV's attributes:
private HTML html = new HTML("<DIV STYLE=\"position:relative; z-
index:0; top:0%; left:0%; width:850px; height:1150px \">SOME STUFF</
DIV> \r\n");
private MenuBar menu = new MenuBar();
private MenuItem item = new MenuItem("How To Disappear Completely",
(Command)null);
public void onModuleLoad() {
menu.addItem(item);
dock.add(menu, DockPanel.CENTER);
dock.add(html, DockPanel.EAST);
RootPanel.get().add(dock);
}
}
DISCLOSURETEST.HTML:
<html>
<head>
<title>Wrapper HTML for DisclosureTest</title>
<link rel="stylesheet" type="text/css" href="leveler.css" />
</head>
<body>
<script type="text/javascript" language="javascript"
src="com.opentext.gwt.test.disclosure.DisclosureTest.nocache.js"></
script>
</body>
</html>
On Jul 21, 3:09 pm, "Ian Bambury" <ianbamb...@gmail.com> wrote:
> Do you have a small example - I personally have never seen this happen.
>
> As a guess, though, I'd say you are nesting tables somewhere - IE and FF
> treat the inheritance of font sizes differently (IE doesn't inherit I think,
> can't remember) but anyway, if you nest a table within a table then at 50%
> the inner table will be 50% in one and 25% in the other, and at 200% it will
> be 200% in one and 400% in the other.
>
> That would also explain why some people get bigger text and some smaller.
>
> But an example would prove/disprove my theory. The rule to get round this
> is never to set tables to anything other than 100% - set the fontsize on the
> <p> element - the final one, anyway. - don't nest headers in <p> elements
> etc, etc.
>
> Ian
>
>
>
>
>
>
> > Thanks for the info, everyone...
> > I guess the thing I'm confused about is that under normal (IE non-GWT)
> > circumstances, at least as far as my experience goes, font sizes in
> > the various browsers always match. So is GWT doing something wrong
> > somewhere? Should I file a bug report? (I can't find anything related
> > in the GWT issue tracker, but I can't believe that something like this
> > has gone completely unnoticed...) If this is a real bug and will be
> > solved before final release, I don't want to bash my head against a
> > wall trying to get it to render properly with new CSS rules (a quick
> > copy/paste of Ian's file didn't work for me).
>
> > On Jul 19, 3:50 am, LouisB <chillipower...@gmail.com> wrote:
> > > ahah! glad I found this posting - thought I was going mad when I was
> > > seeing this! :)
>
> > > Been having this trouble for a while since trying out gwt1.5rc1 where
> > > in my case hosted mode on Windows (MSIE renderer) was displaying the
> > > contents larger than expected and off the page to the right.
>
> > > That css looks like it could be very useful, cheers :)
>
> --
> Ianhttp://examples.roughian.com
>
>
>
>
> > Thanks for the info, everyone...
> > I guess the thing I'm confused about is that under normal (IE non-GWT)
> > circumstances, at least as far as my experience goes, font sizes in
> > the various browsers always match. So is GWT doing something wrong
> > somewhere? Should I file a bug report? (I can't find anything related
> > in the GWT issue tracker, but I can't believe that something like this
> > has gone completely unnoticed...) If this is a real bug and will be
> > solved before final release, I don't want to bash my head against a
> > wall trying to get it to render properly with new CSS rules (a quick
> > copy/paste of Ian's file didn't work for me).
>
> > On Jul 19, 3:50 am, LouisB <chillipower...@gmail.com> wrote:
> > > ahah! glad I found this posting - thought I was going mad when I was
> > > seeing this! :)
>
> > > Been having this trouble for a while since trying out gwt1.5rc1 where
> > > in my case hosted mode on Windows (MSIE renderer) was displaying the
> > > contents larger than expected and off the page to the right.
>
> > > That css looks like it could be very useful, cheers :)
>
> --
Ian Bambury
Jul 21, 2008, 6:57:30 PM7/21/08
to Google-We...@googlegroups.com
I'm confused - it still works for me.
This is an image of what I got: http://examples.roughian.com/demo/DisclosureTest/screen.gif
You can see what you see here http://examples.roughian.com/demo/DisclosureTest/
Here's what I tried (mostly pasting your stuff into an existing basic project)
package com.roughian.appmin.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Command;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.DockPanel;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.MenuBar;
import com.google.gwt.user.client.ui.MenuItem;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.Command;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.DockPanel;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.MenuBar;
import com.google.gwt.user.client.ui.MenuItem;
import com.google.gwt.user.client.ui.RootPanel;
public class Main extends Composite implements EntryPoint
{
private DockPanel dock = new DockPanel();
// Problem has something to do with the following DIV's attributes:
private HTML html = new HTML("<DIV STYLE=\"position:relative; z-index:0; top:0%; left:0%; width:850px; height:1150px \">SOME STUFF</DIV> \r\n");
private HTML html = new HTML("<DIV STYLE=\"position:relative; z-index:0; top:0%; left:0%; width:850px; height:1150px \">SOME STUFF</DIV> \r\n");
private MenuBar menu = new MenuBar();
private MenuItem item = new MenuItem("How To Disappear Completely", (Command) null);
private MenuItem item = new MenuItem("How To Disappear Completely", (Command) null);
public void onModuleLoad()
{
menu.addItem(item);
dock.add(menu, DockPanel.CENTER);
dock.add(html, DockPanel.EAST);
RootPanel.get().add(dock);
}
}
{
menu.addItem(item);
dock.add(menu, DockPanel.CENTER);
dock.add(html, DockPanel.EAST);
RootPanel.get().add(dock);
}
}
and
<html>
<head>
<title>Wrapper HTML for DisclosureTest</title>
<head>
<title>Wrapper HTML for DisclosureTest</title>
<link rel="stylesheet" type="text/css" href="base.css" />
</head>
<body>
<script type="text/javascript" language="javascript" src="com.roughian.appmin.Module.nocache.js"></script>
</body>
</html>
</head>
<body>
<script type="text/javascript" language="javascript" src="com.roughian.appmin.Module.nocache.js"></script>
</body>
</html>
Jason.Sadler
Jul 22, 2008, 10:16:00 AM7/22/08
to Google Web Toolkit
Sorry - forgot to mention I'm using GWT's Standard theme:
<inherits name="com.google.gwt.user.theme.standard.Standard"/>
in my DisclosureTest.gwt.xml....when I remove that line my output
matches yours.
On Jul 21, 6:57 pm, "Ian Bambury" <ianbamb...@gmail.com> wrote:
> I'm confused - it still works for me.
>
> This is an image of what I got:http://examples.roughian.com/demo/DisclosureTest/screen.gif
>
> You can see what you see herehttp://examples.roughian.com/demo/DisclosureTest/
<inherits name="com.google.gwt.user.theme.standard.Standard"/>
in my DisclosureTest.gwt.xml....when I remove that line my output
matches yours.
On Jul 21, 6:57 pm, "Ian Bambury" <ianbamb...@gmail.com> wrote:
> I'm confused - it still works for me.
>
> This is an image of what I got:http://examples.roughian.com/demo/DisclosureTest/screen.gif
>
Ian Bambury
Jul 22, 2008, 8:46:07 PM7/22/08
to Google-We...@googlegroups.com
Still can't get it :-(
I've added the standard theme - no luck - I've updated the links
IE 7.0.6001
FF 3.0.1
2008/7/22 Jason.Sadler <jason....@gmail.com>:
Jason.Sadler
Jul 23, 2008, 11:58:34 AM7/23/08
to Google Web Toolkit
That's bizarre.
You are, of course, correct - the copy running off your server renders
properly for me, even under IE6.
Well, annoying as this is, I think I'm just going to end up explicitly
styling all of my UI pieces, that way everything will be consistent.
If you're interested in pursuing the issue further I'm happy to help
but I'm going to heave to do explicit styling anyways (thanks to
corporate UI guidelines) so I'm all set. Really do appreciate your
help though - thanks.
On Jul 22, 8:46 pm, "Ian Bambury" <ianbamb...@gmail.com> wrote:
> Still can't get it :-(
>
> I've added the standard theme - no luck - I've updated the links
>
> http://examples.roughian.com/demo/DisclosureTest/screen.gifhttp://examples.roughian.com/demo/DisclosureTest/
> --
> Ianhttp://examples.roughian.com
> _______________________________________
You are, of course, correct - the copy running off your server renders
properly for me, even under IE6.
Well, annoying as this is, I think I'm just going to end up explicitly
styling all of my UI pieces, that way everything will be consistent.
If you're interested in pursuing the issue further I'm happy to help
but I'm going to heave to do explicit styling anyways (thanks to
corporate UI guidelines) so I'm all set. Really do appreciate your
help though - thanks.
On Jul 22, 8:46 pm, "Ian Bambury" <ianbamb...@gmail.com> wrote:
> Still can't get it :-(
>
> I've added the standard theme - no luck - I've updated the links
>
>
> Ian
> IE 7.0.6001
> FF 3.0.1
>
> 2008/7/22 Jason.Sadler <jason.sad...@gmail.com>:
> Ian
> IE 7.0.6001
> FF 3.0.1
>
> Ianhttp://examples.roughian.com
> _______________________________________
Ian Bambury
Jul 23, 2008, 1:43:07 PM7/23/08
to Google-We...@googlegroups.com
Well, I do feel a bit miffed that I can't get it to go wrong :-)
Perhaps if you send me your demo project I can have a play and let you know if I come up with anything.
It is obviously a problem other people will get, and I don't like to leave it hanging...
...I can't leave crosswords with one clue not filled in, either. Sad but true.
--
Ian
--
Ian
Reply all
Reply to author
Forward
0 new messages