SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    span won't honor width

    wow... i didn't know that, for
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
    www.w3.org/TR/html4/loose.dtd">

    <span style="width: 100px; background: yellow">a</span>b
    <div style="width: 100px; background: yellow">a</div>b

    1) the a and b will stick together for the first line, so span doesn't
    honor the "width: 100px"

    2) the div honors the "width: 100px", as the background is shown
    yellow. but it will force a line break both before the div and after
    the div.

  2. #2
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the following is more complete and passes the W3C Validation, and the
    span honors the width 100px in IE 7.0 but not on Firefox 2.0.0.8 and
    Safari 3.0 beta on PC.

    someone told me span won't honor width (if it does, then it is not supposed to, such as for IE 7.0). then is there a way to have an inline element with width 100px? using div with display: inline won't work.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Expires" content="Fri, Jan 01 1900 00:00:00 GMT">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="content-language" content="en">
    <meta name="author" content="">
    <meta http-equiv="Reply-to" content="a...@b.com">
    <meta name="generator" content="PhpED 5.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="creation-date" content="02/20/2007">
    <meta name="revisit-after" content="15 days">
    <title>Untitled</title>
    <link rel="stylesheet" type="text/css" href="my.css">
    </head>
    <body>

    <span style="width: 100px; background: yellow">a</span>b
    <div style="width: 100px; background: yellow">a</div>b
    hmm

    <table><tr><td><span style="width: 100px; background: yellow">a</
    span></td><td>b</td></tr></table>

    <table><tr><td><div style="width: 100px; background: yellow">a</div></
    td><td>b</td></tr></table>

    </body>
    </html>

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A SPAN is an inline element, which by default generate an inline box. You cannot specify the dimensions (width and height) of a non-replace inline box. Use a DIV instead.

    IE gets this wrong.
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alternatively, you can use display: block; on the <span> style which will make it behave like a block element and will honour the width/height/margin.

    But as Tommy says, you don't really need to use a span in the situation you have it so it would be easier just to use a div

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    and the
    span honors the width 100px in IE 7.0
    Only because you are in quirks mode as you have the doctype without URI. That means you lose all the benefits that IE7 has in standards mode and may as well be using ie5. IE7 supports legacy behaviour in quirks mode and you lose all the new properties such as min-width etc and also revert to using the broken box model.

    Use a full doctype at all times.

    Remember as said above that a span is only used for inline elements which is why it doesn't need a width.

    You should also be thinking about what the content is anyway and not just using divs or spans but more semantic html such as p, li, ol,,h1,h2 etc depending on the content you are describing.

    If you need elements lined up horizontally then you would need to float them so that a width can be added if needed.

  6. #6
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i found that true, you can use span, with display: block and a width

    but as soon as you do that, the span becomes a div
    (line break before and after).

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    i found that true, you can use span, with display: block and a width
    Please read all the replies above as you are missing the point here a bit

    Basically CSS doesn't care what an element is supposed to look like as you can style it to be like any other element (excluding form controls).

    You could just just the <b></b> element and style it to create any layout in the world but it wouldn't make much semantic sense and you wuld be foolish to do so. You should be using the correct element for the job in hand as already mentioned above.

    You can change the display of elements so that they appear to be like block level elements or you can make block level elements appear to behave like inline elements although you cannot change the rules of structure of html, so you must still use the elements correctly in the html.

    If you want block elements to align horizontally then you will need to float them (see faq on floats).

    You cannot give width to inline elements unless you make them display as block level which would have been the same as using a block level element in the first place.

    Perhaps if you explained what you were doing in a bit more detail we could give you a better solution


Bookmarks

Posting Permissions

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