SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict Volitics's Avatar
    Join Date
    Aug 2003
    Location
    US
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Are the widths of <span> tags included in total width calculations for <ul> tags?

    .
    Hello;

    I have got a <ul> list tag. Inside the tag I am using float left <li> list item tags. Inside each <li> tag I have got <span> tags.

    Using float left the sum total left to right of the margins, borders, paddings, and contents for both list item tags must equal exactly the width of the <ul> tag in order for both list items to fit on the same line.

    If the sum total width of both <li> tags exceed the width of the <ul> tag the last <li> tag will break onto a second line.

    For example, if I decrease the width of the <ul> tag below from 94px to 93px the loss <li> tag will break and go onto a second line.

    If I increase the width of the <ul> tag from 94px to 95px or more there is a gap between the loss <li> tag and the right border of the <ul> tag.

    My question is about the widths of the <span> tags.

    I can increase the width of the <span> tags below from 30px to 50px and the <span> tag exceeds the width of the <li> tag. The two <li> tags still stay on one line.

    I can increase the border sizes of the <span> tags from 1px to 5px and the <li> tags still stay on one line (which is good - I want both <li> tags to be on the same line).

    However, just testing, if I increase the borders to 25px it causes the last <li> loss tag to break to a second line.

    Question 1: Am I supposed to somehow calculate the width of the <span> tag borders and include them into the width of the <ul> tag?

    Question 2: Why is it that increasing the width of the <span> tags from 30px to 50px and the width of the <span> tag borders from 1px to 5px do not cause the last <li> tag to break to the second line; but in testing increasing the <span> tag border width to 25px it causes the second <li> tag to break to the second line?

    Thanks.

    PHP Code:
    Calculate width for list item(sleft to right:

    margin border padding width padding border margin width

    Win
    :  0px 1px 0px 40px 0px 1px 5px 47px
    Loss
    0px 1px 0px 40px 0px 1px 5px 47px

    List width47px 47px 94px 
    PHP Code:
    ul.Legend
    {
    padding0px;
    margin0px;
    list-
    style-typenone;
    border1px solid black;
    width94px;
    overflowauto;
    clearboth;
    }

    li.Win
    {
    margin0px 0px 0px 5px;
    padding5px 0px 5px 0px;
    border1px solid lightgrey;
    floatleft;
    width40px;
    }

    li.Loss
    {
    margin0px 0px 0px 5px;
    padding4px 0px 4px 0px;
    border1px solid darkgrey;
    floatleft;
    width40px;

    PHP Code:
    span.Win
    {
    border1px dashed black;
    background-colortan;
    displayinline-block;
    width30px;
    }

    span.Loss
    {
    border1px dashed black;
    background-colorgrey;
    displayinline-block;
    width30px;

    PHP Code:
    <ul class="Legend">

        <
    li class="Win"><span class="Win">Win</span></li>

        <
    li class="Loss"><span class="Loss">Loss</span></li>

    </
    ul
    .

  2. #2
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,827
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Volitics View Post
    I can increase the width of the <span> tags below from 30px to 50px and the <span> tag exceeds the width of the <li> tag. The two <li> tags still stay on one line.
    Really? Using what browser? When I try it, making the <span>s wider than the <li> pushes the second <li> onto a new row.

  3. #3
    SitePoint Addict Volitics's Avatar
    Join Date
    Aug 2003
    Location
    US
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Really? Using what browser? When I try it, making the <span>s wider than the <li> pushes the second <li> onto a new row.
    Stevie D;

    Thanks for responding to my question. I'm using the FireFox browser version 13.0.

    I just tried the code using the Internet Explorer. It did just as you said. I increased the width of the Win <span> tag to 50px, which is 10px more than the <li> tag that encloses it, and the second <span> tag broke to the second line.

    Both <li> items stay on the same line in the FireFox browser.

    I may have figured out the answer(s) to my questions. So then is it accurate to say that when calculating the total width for the <ul> tag I must add in the width of the borders, padding, and margin with the <span> tags?

    Thanks again.
    .

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,732
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    So then is it accurate to say that when calculating the total width for the <ul> tag I must add in the width of the borders, padding, and margin with the <span> tags?

    The total calc'ed width of an element is the sum of its horizontal borders, padding, width, and if applicable margins. IE can screw this up if you do not use a strict doctype ( it includes the padding as part of the width).



    Why are you setting a width on a span??? perhaps you could simplify your code and solve your problem at the same time

    I dont have IE available at the moment... but see if this works for you:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
     <html>
      	<head>
      		<title></title>
      		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <style type='text/css'>
      .Legend{
        padding: 0;
        margin: 0;
      	border: 1px solid #000;
        list-style: none;
        width:94px;
        overflow:auto;
        clear:both;	
      	}
     .Legend li{
    margin-left: 5px;
    padding: 5px 0px ;
    border: 1px solid ;
    float: left;
    width: 40px;
    }
    li.Win {border-color:darkgrey}
    li.Loss {border-color:lightgrey}
    .Legend span {border: 1px dashed black;display: block; }
    .Win span{background-color: tan;}
    .Loss span{background-color: grey;}
    
      </style>
      	</head>
      	<body>
    
    
    <ul class="Legend">
        <li class="Win"><span>Win</span></li>
        <li class="Loss"><span>Loss asddaas </span></li>
    </ul> 
      	</body>
      </html>


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
  •