Setting float doesn't work

I'm trying to set the style attribute float on a span tag, but it doesn't work. I do this:


var span = document.createElement("SPAN")
span.style.float = "right"
someObject.appendChild(span)


and nothing happens. I use Brainjar's (http://www.brainjar.com/dhtml/domviewer/) domviewer utility to look at what's set, and I can see there isn't even a float entry under "style". Does this mean I can't set float for the span with DOM, or what? :confused:

I'd start by using a different word other than span for your variable name. Just tack on a letter somewhere.

That said, I didn't think float:right worked on inline elements such as span. You'll definitely have to assign a width, as nothing is supposed to float without an assigned width, according to the spec.

It does not have content and it does not have form, there it is phatom and will not actually occupy a place in the document until you populate it.

Originally posted by COBOLdinosaur
It does not have content and it does not have form, there it is phatom and will not actually occupy a place in the document until you populate it.

Thanks for the replys.

The code I wrote was very simplyfied, so that I could focus on the problem. Yes the variable is named something else than 'span', and of course I put in text and stuff in it, otherwise I wouldn't be able to see that it didn't work.

But do I have to set the span to be a block element (via .style.display = block) to make float = right work?

It has to be a block-level element (you could just create a DIV in the first place) and you have to append it to the page before setting its properties

http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-float

Can be inline or block, doesn't matter. Setting the float to left or right forces it to create a block box.

So it can ... like <img/> :o

Still, there's no denying it needs a width specified in order to validate (and work, in good browsers), according to the spec.

I admit my theory is a little rusty here .. iirc setting style dimensions on inline elements isn't allowed, so if dimensions must be defined then float can only work on inline elements which can have dimensions - such as <img/>

But when I tried this out ... at first creating a SPAN element with defined dimensions didn't work at all ... I guess that makes sense if what I said before is true .. but once I'd applied the float it started working again - so perhaps if an element is floated it stops being an inline element, or at least is subject to different rules ....

Theory is rusty like I said ... but what I found in the end is two solutions - a "styleFloat" property which works in IE, and the setAttribute method which works in mozilla and safari; happily both methods work in Opera. Here's the whole fragment:

<div id="content">

<h1>hello world</h1>

</div>

Then:

var mySpan = document.createElement("span");
document.getElementById("content").appendChild(mySpan)
mySpan.setAttribute("style","float:right");
mySpan.style.styleFloat = "right";
mySpan.style.width = "150px";
mySpan.style.height = "50px";
mySpan.style.backgroundColor = "red";

Brothercake, it says right in the specs as soon as an element is floated, it generates a block box. :) e.g. it becomes block-level.

Thanks for all your replys. This forum is great! :thumbsup:

I solved the problem by making a separate css class that has float:right and set that on the element instead.

BTW, how can you do setAttribute("style","float:right") and still retain other style settings? Could you do this:


var newStyle = spanEl.style.cssText + "float:right;"
spanEl.setAttribute("style", newStyle)


It's ugly, though... :eek:

Well no, not in this particular case - "style.cssText" is IE-proprietary, but it won't work here because IE doesn't understand that setAttribute syntax:

So this:

obj.setAttribute("foo","bar");

doesn't work in IE; and of course this:

obj.setAttribute("foo");
obj.foo = "bar";

generates an error in moz; so for an x-browser setAttribute method you have to do it like this:

obj.setAttribute("foo","");
obj.foo = "bar";

It's just IE being stupid. I used the simplest setAttribute syntax in the previous example because we don't need it to work for IE - that "styleFloat" property takes care of it - but the IE approach didn't work in moz or safari.

Originally posted by brothercake
Well no, not in this particular case - "style.cssText" is IE-proprietary

DOM2 CSS actually:
http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSStyleDeclaration
Quite standard.


but it won't work here because IE doesn't understand that setAttribute syntax

IE does understand setAttribute() as well, just not in all cases. (In particular, "style" and "class" I believe, as well as "type")

sorry my bad :o second time in as many days I've given out wrong information :(

But I would like to say in my defense ... I checked with MSDN before I gave that answer, and it claims cssText is non-standard http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/csstext.asp

Last time I go to MSDN for standards information :rolleyes:

(and sorry for the lame excuses ... Ulgen - are you sorted now?)

This just in....

float is a reserved word in JavaScript (Java data type); the correct scriptable CSS property reference is:

cssFloat

span, on the other hand, is not only unreserved - it's the most logical variable name for an, erm, span you might use....

As far as I can see IE doesn't support cssFloat. So then my only chance of directly setting float on all browsers is this:


var newStyle = spanEl.style.cssText + "float:right;"
spanEl.setAttribute("style", "")
spanEl.style = newStyle


is it? Well, I still think it's ugly, so I'll stick with the class solution. But thanks for all the input! :thumbsup:

Sorry, thought we were talking moz/ns here.

MSIE: HTMLElement.style.styleFloat :cool:

The solution I posted is x-browser. But sure, setting a class is much easier.

I wasn't posting a 'solution', as such - just trying to answer Ulgen's original question.I'm trying to set the style attribute float on a span tag, but it doesn't work....Does this mean I can't set float for the span with DOM, or what?

Hey, I didn't know about styleFloat. Thanks alot! :) You've all answered my question(s, as they've accumulated during this thread), and I'm very grateful. :thumbsup:

Man, I hate those IE/Netscape conflicts. I simply love x-browser solutions. Keep 'em coming! :D

sorry my bad :o second time in as many days I've given out wrong information :(

But I would like to say in my defense ... I checked with MSDN before I gave that answer, and it claims cssText is non-standard http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/csstext.asp

Last time I go to MSDN for standards information :rolleyes:

(and sorry for the lame excuses ... Ulgen - are you sorted now?)

RIght.

w3c:
cssText is the property of a cssRule (in a styleSheet rule or an element style property).
In a stylesheet:
styleSheet.cssRules[0].cssText

In an element style property:
element.style.cssText


IE:
cssText as a property of style declaration and it does not return any selector text.
In a stylesheet:
styleSheet.rules[0].style.cssText

in an element
element.style.cssText

I'm still trying to figure out how to get the styleSheet contents as a string in IE...

to spare seakers some reading (-:
bottom line:


//for FF
imgElement.setAttribute("style","float:left");
// for IE
imgElement.style.styleFloat = "left";

I'm surprised at you people dragging cssText, iew proprietary styleFloat etc. up in this discussion...

Cheesebag had the right answer as given by DOM2CSS (http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSS2Properties)
This just in....

float is a reserved word in JavaScript (Java data type); the correct scriptable CSS property reference is:

cssFloat

span, on the other hand, is not only unreserved - it's the most logical variable name for an, erm, span you might use....

hmm, did some browsing -->http://www.gtalbot.org/BrowserBugsSection/MSIE6Bugs/CssFloat.html


for IE(7) it says that it does not suport cssFloat.

that is why.

As far as I can see IE doesn't support cssFloat. So then my only chance of directly setting float on all browsers is this:


var newStyle = spanEl.style.cssText + "float:right;"
spanEl.setAttribute("style", "")
spanEl.style = newStyle


is it? Well, I still think it's ugly, so I'll stick with the class solution. But thanks for all the input! :thumbsup:

'spanEl.style = newStyle' doesnt work on firefox. Firebug shows error
'setting a property that has only a getter
spanEl.style = newStyle'