I am not sure if this is the right forum to ask the following question - I apologise beforehand:

I am trying to put information about opening hours in a WordPress widget as follows:

Monday              10:00 – 17:00

Tuesday              10:00 – 17:00
Wednesday           10:00 – 17:00
Thursday             13:00 – 17:00
Friday                10:00 – 13:00

 

This looks fine in IE and FireFox - I inserted a number of   to create the spacing which is not an ideal method. However, the spacing doesn't look fine in Chrome - it's not even.

Would you be able to help?

Thanks.

Spacing in chrome is   isn't it? Correct me if I'm wrong but I've never heard of  

Using   is ugly and looks unprofessional.

 

Wrap that information in a <dl> list and float the <dt>'s left so they appear side by side then mess with the width on the <dt> to get it to push the <dd> away.

 

So your markup will look like this:

 

<dl>

<dt>Monday</dt>

<dd>10:00 - 17:00</dd>

 

<dt>Tuesday</dt>

<dd>10:00 - 17:00</dd>

 

...

</dl>

 

And then just mess with the styles that I mentioned above.

 

Edit: I've made you a fiddle so you can see what I mean: http://jsfiddle.net/MajTC/

Edited June 30, 201412 yr by m0nsta.

Agree with m0nsta. create this using a table and play with the widths.

 

Or another way to do it would be to create some divs using HTML in the widget and add some styling to the CSS.

 

Example:

 

<div class="opening">
  <div class="day">
    <ul>
      <li>Monday</li>
      <li>Tuesday</li>
      <li>Wednesday</li>
      <li>Thursday</li>
      <li>Friday</li>
    </ul>
  </div>
  <div class="times">
    <ul>
      <li>10:00 - 17:00</li>
      <li>10:00 - 17:00</li>
      <li>10:00 - 17:00</li>
      <li>13:00 - 17:00</li>
      <li>10:00 - 13:00</li>
    </ul>
  </div>
</div>

What I have done with this is create one div for the two columns to go inside then you can style each div up.

 

And here is a fiddle of the above http://jsfiddle.net/F89sV/

Edited June 30, 201412 yr by junior

Talking from a semantic point of view m0nsta's response is what i'd go with here. This is what the definition list was intended for.

I agree with m0nsta and rbrtsmith. Juniors solution displays the content correctly. But a screen reader or search engine will not see any connection between the days and the corresponding times if they are placed in separate divs.

I would say this is tabular data and you should use a table for this.

Thank you all so much for your helpful suggestions. I apologise for not having acknowledged them before - I forgot to tick the box for automatic notifications. I'll do the changes and let you know how it went.

Many thanks!

Just to let you know that your suggestions worked beautifully.

I just had to play a little with the width and top margin for

<dl> in the child theme because the parent theme had its own markup for that.

Many, many thanks for your help - very much appreciated.