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 8 of 8
  1. #1
    Regular Coder
    Join Date
    Apr 2005
    Location
    Ireland
    Posts
    122
    Thanks
    4
    Thanked 0 Times in 0 Posts

    <span> content not displaying

    Hi

    I have the following piece of html where the variables inside the spans may sometimes have no content.

    Code:
    <li class="lsResultEvent">
      <span class="name">#qSearchDetailsSorted.EventName#</span>
      <span class="eventName">#qSearchDetailsSorted.Runner#</span>
      <span class="date">#date#</span>
    </li>
    and css:
    Code:
    .lsResultEvent {
    	margin-bottom: 1px;
    }
    .lsResult .lsResultEvent .name {
    	float: left;
    	width: 320px;
    	padding-left: 10px;
    }
    .lsResult .lsResultEvent .eventName {
    	float: left;
    	width: 119px;
    	text-align: center;
    	display: block;
    }
    .lsResult .lsResultEvent .date {
    	float: left;
    	width: 110px;
    	text-align: right;
    	padding-right: 10px;
    	font-weight: bold;
    }

    The problem is that whenever one of the variable doesnt have any content then the span is ignored and that row ill have only 2 or 1 colums, therefore makin it all out alignment.

    Is their a property i can apply to my classes?

    Thanks in advance

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,640
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    Why aren’t you using a table when this looks like you’re outputting tabular data and a table would be the only correct way?

  • #3
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    if you dont mind me asking, and you may be doing it a specific way, but why dont you do this

    Code:
    <li class="lsResultEvent">
    <ul>
      <li class="name">#qSearchDetailsSorted.EventName#</li>
      <li class="eventName">#qSearchDetailsSorted.Runner#</li>
      <li class="date">#date#</li>
    </ul>
    </li>
    instead of this

    Code:
    <li class="lsResultEvent">
      <span class="name">#qSearchDetailsSorted.EventName#</span>
      <span class="eventName">#qSearchDetailsSorted.Runner#</span>
      <span class="date">#date#</span>
    </li>
    wouldnt lists stay the way they are no matter if there is information or not! I might be wrong, but its just a suggestion!

  • #4
    Regular Coder
    Join Date
    Apr 2005
    Location
    Ireland
    Posts
    122
    Thanks
    4
    Thanked 0 Times in 0 Posts
    To answer VIPStephan:
    I simply adjusting existing code and it was set up in that way, could the use of lists instead of divs or tables be causing this error?

    jcdevelopment:
    Using unordered lists inside the list would not produce the correct layout.
    I have parents list which has tabular data inside it.

  • #5
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    It really shouldn't do that. Have you tried setting a height?
    And unordered lists don't have to be bulleted. Or go down, for that matter.

  • #6
    Regular Coder
    Join Date
    Apr 2005
    Location
    Ireland
    Posts
    122
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Setting a height fixed the problem :-)

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,640
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    Hello? Anybody listening to me? A table is the only correct way to go here!

  • #8
    Regular Coder
    Join Date
    Jan 2008
    Location
    Willow Grove, PA
    Posts
    169
    Thanks
    1
    Thanked 27 Times in 27 Posts
    I agree, VIPStephan, tables would be the way to go in this situation. Seems like a case where a previous developer missed the semantics train and just removed all tables from their site in an effort to bring it up to standards.

    Tables have their place in html. This is the exact case.


  •  

    Posting Permissions

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