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.
Results 1 to 14 of 14
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts

    multiple properties in span, inline-CSS

    Code:
    <div style=width:500px;>
    <IMG SRC="mathtype/eqn025.gif" WIDTH=490 HEIGHT=299 STYLE="vertical-align: -273px; margin: 0;">
    </div>
    <div>
    <span style="float:left; width: 100px;"> Strategy </span>: "Since immediately substituting <eq> 0 </eq>, for <eq> h </eq>, results in division by zero, the numerator must be simplified such that <eq>h</eq> can be factored out and then canceled against the denominator.  The resulting function, <eq>f'(x)</eq>, is the derivative of <eq>f(x)</eq>". 
    </div>
    I can't get this inline-CSS span to work.

    What's wrong?

    Edit: You should ignore <eq> ... </eq>. It's not a html/CSS specification and is to betreated as just text.
    Last edited by ptrcao; 12-14-2010 at 07:35 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello ptrcao,
    As much as I hate inline styles, they have their place.
    The validator works on them too.
    Code:
        <div style="width:500px;">
        	<img src="mathtype/eqn025.gif" alt="description" width="490" height="299" style="vertical-align: -273px; margin: 0;" />
        </div>
        <div>
            <span style="float:left; width: 100px;"> Strategy </span>: &quot;Since immediately substituting <eq> 0 </eq>, for <eq> h </eq>, 
            results in division by zero, the numerator must be simplified such that <eq>h</eq> can be factored out and then canceled against 
            the denominator.  The resulting function, <eq>f'(x)</eq>, is the derivative of <eq>f(x)</eq>&quot;. 
        </div>
    What is the vertical-align supposed to do?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello ptrcao,
    As much as I hate inline styles, they have their place.
    The validator works on them too.
    Code:
        <div style="width:500px;">
        	<img src="mathtype/eqn025.gif" alt="description" width="490" height="299" style="vertical-align: -273px; margin: 0;" />
        </div>
        <div>
            <span style="float:left; width: 100px;"> Strategy </span>: &quot;Since immediately substituting <eq> 0 </eq>, for <eq> h </eq>, 
            results in division by zero, the numerator must be simplified such that <eq>h</eq> can be factored out and then canceled against 
            the denominator.  The resulting function, <eq>f'(x)</eq>, is the derivative of <eq>f(x)</eq>&quot;. 
        </div>
    What is the vertical-align supposed to do?
    Well, I basically have some math happening in that image (the first div). Now, right of the image I want a comment box (the 2nd div which I want to float left against the first div).

    (Edit: I misread the question, the relevant answer is in the next post.)

    Is this a syntactical issue or have I misused span, or something else?
    Last edited by ptrcao; 12-14-2010 at 07:34 PM.

  • #4
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello ptrcao,
    As much as I hate inline styles, they have their place.
    The validator works on them too.
    Code:
        <div style="width:500px;">
        	<img src="mathtype/eqn025.gif" alt="description" width="490" height="299" style="vertical-align: -273px; margin: 0;" />
        </div>
        <div>
            <span style="float:left; width: 100px;"> Strategy </span>: &quot;Since immediately substituting <eq> 0 </eq>, for <eq> h </eq>, 
            results in division by zero, the numerator must be simplified such that <eq>h</eq> can be factored out and then canceled against 
            the denominator.  The resulting function, <eq>f'(x)</eq>, is the derivative of <eq>f(x)</eq>&quot;. 
        </div>
    What is the vertical-align supposed to do?
    Sorry I missed your question: the answer is that the vertical align is probably irrelevant to the question, but if you have to know it's automatically generated by a program, so that my embedded math equations are properly positioned on lines of text.

    Code:
    <span style="float:left; width: 100px;"> .. </span>
    That's the bit I'm worried about.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    You are trying to float the second div to be next to the image?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    You are trying to float the second div to be next to the image?
    Yep. And also I want the second div to have a restricted width of x number of pixels.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    The way you have it written now, you are floating that span. It's 100px wide and contained in that unamed/unstyled div which is acting like a div is supposed to by sitting under the div containing that image.

    You need to put the float in the right place like this -
    Code:
    	<div style="width:500px;float:left;">
        	<img src="mathtype/eqn025.gif" alt="description" width="490" height="299" style="vertical-align: -273px; margin: 0;" />
        </div>
        <div>
            <span style="width: 100px;"> Strategy </span>: &quot;Since immediately substituting <eq> 0 </eq>, for <eq> h </eq>, 
            results in division by zero, the numerator must be simplified such that <eq>h</eq> can be factored out and then canceled against 
            the denominator.  The resulting function, <eq>f'(x)</eq>, is the derivative of <eq>f(x)</eq>&quot;. 
        </div>
    Not sure what you want to do with that span now...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts
    So this is what I want, and I got the float to work. However, now new problems arise. Should this paragraph block not occupy the entire screen width? The text below this paragraph is wrapping around it, which is bizarre especially when I've set the paragraph to 100% of the screen width. Ideas?

    Code:
    <p style="width: 100%;"> Step 1: Find the the gradient of the tangent at <IMG SRC="mathtype/eqn003.gif" WIDTH=50 HEIGHT=14 STYLE="vertical-align: -1px; margin: 0;">
    
    
    <div style="float: left; width:500px;">
    <IMG SRC="mathtype/eqn025.gif" WIDTH=490 HEIGHT=299 STYLE="vertical-align: -273px; margin: 0;">
    </div>
    
    <div style="float: left; width: 300px;"> 
    <span style=text-weight: bold;> Strategy </span>: "Since immediately substituting <eq> 0 </eq>, for <eq> h </eq>, results in division by zero, the numerator must be simplified such that <eq>h</eq> can be factored out and then canceled against the denominator.  The resulting function, <eq>f'(x)</eq>, is the derivative of <eq>f(x)</eq>". 
    </div> 
    
    </p>
    Last edited by ptrcao; 12-14-2010 at 08:20 PM.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Block level div is not allowed in inline span ... and I see you changed that.

    Look at it with colors added -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    <body>
    
    <p style="width: 100%;background:#ccc"> Step 1: Find the the gradient of the tangent at <IMG SRC="mathtype/eqn003.gif" WIDTH=50 HEIGHT=14 STYLE="vertical-align: -1px; margin: 0;">
    
    
    <div style="float: left; width:500px;">
    <IMG SRC="mathtype/eqn025.gif" WIDTH=490 HEIGHT=299 STYLE="vertical-align: -273px; margin: 0;display:block;background:#f63;">
    </div>
    
    <div style="float: left; width: 300px;background:#f00;"> 
    <span style=text-weight: bold;> Strategy </span>: "Since immediately substituting <eq> 0 </eq>, for <eq> h </eq>, results in division by zero, the numerator must be simplified such that <eq>h</eq> can be factored out and then canceled against the denominator.  The resulting function, <eq>f'(x)</eq>, is the derivative of <eq>f(x)</eq>". 
    </div> 
    
    </p>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    ptrcao (12-14-2010)

  • #10
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts
    http://www.mathannotated.com/pages/d...entiation.html (scroll down)



    As you will see the <p>...</p> does not seem to be containing the two divs within it - that is the problem, but to me this is illogical? How do you explain why the divs aren't within the province of <p>...</p>?

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts
    It boils down to divs not being allowed inside paragraphs.

    colour suggestion helpful
    reminder that div not allowed in span was helpful

    my thanks excavator

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by ptrcao View Post
    reminder that div not allowed in span was helpful
    p is inline too, like span. No div there either.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    ptrcao (12-14-2010)

  • #14
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    p is inline too, like span. No div there either.
    Yes, lesson learnt.


  •  

    Posting Permissions

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