:before and width not working?

[Patrik]

Hi,

with css I have this rule:

Code: Select all

service > *:before {
	width	: 22em;
	content	: "    " name() ": ";
}

service > * {
	display		: block;
	content		: oxy_textfield(edit, "#text", width, 30em);
	visibility	: -oxy-collapse-text;
}

The idea is to have vertially alligned text fields with the element name in front of it. This works fine with the desktop version. However, in Web Author using Firefox the vertical allignment (i.e. the width property of the :before) does not work.

Any ideas or suggestions?

Thanks and regards,
Patrik

[cristi_talau]

Hello,

By default, ":before" elements have "display:inline". According to the CSS specification, the "width" property does not apply for "inline" elements [1]. That's why the browser renders it this way. However, in the desktop application, we decided to take it into account.

The solution that works in all cases is to use "display:inline-block".

Best,
Cristian

[1] https://www.w3.org/TR/CSS2/visudet.html#inline-width

[Patrik]

Hi Cristian,

indeed this worked for me.

Thanks a lot.
Patrik