CODEWITHSUNDEEP
htmllist
user379888
user379888

Reputation:

Unusual spaces in html

I have used space characters in html to give regular spaces in my text but interestingly some text is still does not have regular spaces. Please have a look,

<ul style="margin-left:40px;background-color:#6CF ;padding-left:20px;padding-right:10px;padding-top:10px;padding-bottom:10px; font-size:12px;" >
<li>CS-103  &nbsp;&nbsp; Programming Languages</li>
<li>EL-133  &nbsp;&nbsp; Electronics-I</li>
<li>MT-111  &nbsp;&nbsp; Calculus</li>
<li>CY-105  &nbsp;&nbsp; Applied Chemistry</li>
<li>PH-121  &nbsp;&nbsp; Applied Physics</li>
<li>HS-105  &nbsp;&nbsp; Pakistan Studies | HS-127 Pakistan Studies(for Foreigners)</li>
</ul>

Here is how it looks,

  • CS-103    Programming Languages
  • EL-133    Electronics-I
  • MT-111    Calculus
  • CY-105    Applied Chemistry
  • PH-121    Applied Physics
  • HS-105    Pakistan Studies | HS-127 Pakistan Studies(for Foreigners)

    • Please help out to make all list element look same. Thanks

    Upvotes: 3

    Views: 99

    Answers (4)

    Oleg
    Oleg

    Reputation: 24988

    Brad's feedback about inconsistent spacing when using non-monotype fonts is correct (and there is no \t symbol to use for tabulation in html), however it may be more appropriate to use a definition list here with some styling applied.

    Semantics fit perfectly (a term name dt followed by its description dd):

    <dl>
  <dt>CS-103</dt><dd>Programming Languages</dd>
  <dt>EL-133</dt><dd>Electronics-I</dd>
  ...
</dl>​

    Fiddled

    Upvotes: 3

    amustill
    amustill

    Reputation: 5302

    Depending on its semantic value, you could also use a definition list.

    HTML:

    <dl>
    <dt>CS-103</dt>
        <dd>Programming Languages</dd>
    <dt>EL-133</dt>
        <dd>Electronics-I</dd>
    <dt>MT-111</dt>
        <dd>Calculus</dd>
    <dt>CY-105</dt>
        <dd>Applied Chemistry</dd>
    <dt>PH-121</dt>
        <dd>Applied Physics</dd>
    <dt>HS-105</dt>
        <dd>Pakistan Studies | HS-127 Pakistan Studies (for Foreigners)</dd>
</dl>​

    CSS:

    dl {
    overflow: hidden;
    }

dt {
    float: left;
    width: 80px
    }

    http://jsfiddle.net/SVdTt/

    Upvotes: 4

    Brad
    Brad

    Reputation: 163240

    The text does have regular spaces. The problem is that the font you use is not fixed width, and the length of the course type/number is throwing it off.

    Use a table for stuff like that.

    Upvotes: 7

    Jordan Denison
    Jordan Denison

    Reputation: 2727

    You will need to choose a monospaced font for them to look the same if I understand correctly.

    Upvotes: 2

    Related Questions