Trouble with custom CSS on IE8

[ales]

Hello,

I'm developping a webapplication on which I have a multi-column form.
Each column of this forum has a title which is displayed above the column. Moreover, this title has a custom css which indicate the size and the font to use.

I mean the best way to do this is to create a label and add it first in each column. The problem if I do this is that the label is cut (why ?) and almost all hidden with the first field of my column.

So, to bypass this, I added a css property to each label (with setStyleAttribute) and I added a margin-top property on the first field of each column. This works fineon mozilla firefox, but don't work on internet explorer 8.

Can you tell me why ?

[sven]

You should try to post afully workign testcase that implements EntryPoint and demonstrates what you are saying. Nobody knows your code, so answering the questions is kind of impossible

[ales]

I don't have the exact code before the eyes, but it looks something like this :

/** The form */
FormPanel panel = new FormPanel();
panel.setWidth("800px");
panel.setHeaderVisible(false);
panel.setBodyBorder(false);
panel.setBorders(false);
panel.setLabelAlign(LabelAlign.RIGHT);
panel.setLabelSeparator("");

LayoutContainer main = new LayoutContainer();
main.setLayout(new ColumnLayout());

/** Left column */
LayoutContainer left = new LayoutContainer();
left.setStyleAttribute("paddingTop", "3px");
FormLayout layout = new FormLayout();
layout.setLabelAlign(LabelAlign.RIGHT);
layout.setLabelSeparator("");
left.setLayout(layout);

Label leftTitle = new Label();
leftTitle.setText("My left col title");
leftTitle.setStyleAttribute("margin-left", "10px");
leftTitle.setStyleAttribute("font-family", "Tahoma");
leftTitle.setStyleAttribute("font-style", "italic");
leftTitle.setStyleAttribute("font-size", "23px");

TextField<String> first = new TextField<String>();
first.setFieldLabel("First");
left.add(first, new FormData(190, -1));

TextField<String> second= new TextField<String>();
second.setFieldLabel("Second");
left.add(second, new FormData(190, -1));

/** Right column */
LayoutContainer right = new LayoutContainer();
right.setStyleAttribute("paddingTop", "3px");
layout = new FormLayout();
layout.setLabelAlign(LabelAlign.RIGHT);
layout.setLabelSeparator("");
right.setLayout(layout);

Label rightTitle= new Label();
rightTitle.setText("My right col title");
rightTitle.setStyleAttribute("margin-left", "10px");
rightTitle.setStyleAttribute("font-family", "Tahoma");
rightTitle.setStyleAttribute("font-style", "italic");
 rightTitle.setStyleAttribute("font-size", "23px");

TextField<String> third= new TextField<String>();
third.setFieldLabel("Third");
right.add(third, new FormData(190, -1));
 
 TextField<String> fourth= new TextField<String>();
 Fourth.setFieldLabel("fourth");
 right.add(fourth, new FormData(190, -1));

main.add(left, new ColumnData(400));
main.add(right, new ColumnData(400));

panel.add(main);
add(panel);

I have another question. If I want to put two TextFields one near the other in the left column, how can I do this ? If I use MultiField, I lose my FieldLabels...

To be sure, to run this code under IE8, the user.agent is good ie8 ?