Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 25
  1. #1
    New Coder
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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:

    Code:
    var span = document.createElement("SPAN")
    span.style.float = "right"
    someObject.appendChild(span)
    and nothing happens. I use Brainjar's 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?

  • #2
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    396
    Thanks
    2
    Thanked 30 Times in 30 Posts
    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.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #4
    New Coder
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #6
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    http://www.w3.org/TR/REC-CSS2/visure...#propdef-float

    Can be inline or block, doesn't matter. Setting the float to left or right forces it to create a block box.
    Last edited by jkd; 07-17-2003 at 06:06 PM.

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So it can ... like <img/>
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #8
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Still, there's no denying it needs a width specified in order to validate (and work, in good browsers), according to the spec.

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <div id="content">
    
    <h1>hello world</h1>
    
    </div>
    Then:
    Code:
    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";
    Last edited by brothercake; 07-17-2003 at 10:37 PM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #10
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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.

  • #11
    New Coder
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for all your replys. This forum is great!

    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:

    Code:
    var newStyle = spanEl.style.cssText + "float:right;"
    spanEl.setAttribute("style", newStyle)
    It's ugly, though...

  • #12
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    obj.setAttribute("foo","bar");
    doesn't work in IE; and of course this:
    Code:
    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:
    Code:
    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.
    Last edited by brothercake; 07-18-2003 at 07:18 PM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #13
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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-Le...yleDeclaration
    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")

  • #14
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry my bad 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/a...es/csstext.asp

    Last time I go to MSDN for standards information

    (and sorry for the lame excuses ... Ulgen - are you sorted now?)
    Last edited by brothercake; 07-19-2003 at 05:47 AM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #15
    Regular Coder
    Join Date
    Nov 2002
    Posts
    596
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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....


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •