{"action":"opened","issue":{"url":"https://api.github.com/repos/IIIF/mirador/issues/519","labels_url":"https://api.github.com/repos/IIIF/mirador/issues/519/labels{/name}","comments_url":"https://api.github.com/repos/IIIF/mirador/issues/519/comments","events_url":"https://api.github.com/repos/IIIF/mirador/issues/519/events","html_url":"https://github.com/IIIF/mirador/issues/519","id":68322632,"number":519,"title":"Display issues in metadata panel","user":{"login":"regisrob","id":402117,"avatar_url":"https://avatars.githubusercontent.com/u/402117?v=3","gravatar_id":"","url":"https://api.github.com/users/regisrob","html_url":"https://github.com/regisrob","followers_url":"https://api.github.com/users/regisrob/followers","following_url":"https://api.github.com/users/regisrob/following{/other_user}","gists_url":"https://api.github.com/users/regisrob/gists{/gist_id}","starred_url":"https://api.github.com/users/regisrob/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/regisrob/subscriptions","organizations_url":"https://api.github.com/users/regisrob/orgs","repos_url":"https://api.github.com/users/regisrob/repos","events_url":"https://api.github.com/users/regisrob/events{/privacy}","received_events_url":"https://api.github.com/users/regisrob/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-04-14T09:52:46Z","updated_at":"2015-04-14T09:52:46Z","closed_at":null,"body":"Floats are not properly cleared in \"metadata-listing\" definition list. It appears when the last label breaks in two lines, and it raises the following bugs:\r\n\r\n* The \"sub-title\" of the following section is not aligned properly (see \"Rights\"): \r\n![selection_005](https://cloud.githubusercontent.com/assets/402117/7133997/ed1f3afc-e298-11e4-8e4c-e125e11e9c2a.png)\r\n\r\n* Or the margin between the next section is not properly set:\r\n![selection_004](https://cloud.githubusercontent.com/assets/402117/7134001/f29beb1a-e298-11e4-9b18-e17cb2a67bfd.png)\r\n\r\nThis widespread clearing method does the trick:\r\n<pre>\r\n.mirador-viewer dl.metadata-listing:after {\r\ncontent: \"\";\r\ndisplay: table;\r\nclear: both;\r\n}\r\n</pre>\r\n\r\nThere is another bug that is quite embarrasing because it affects the proper reading of the metadata (label/value pairs are not aligned with each other when there are multiple labels breaking in two lines):\r\n![selection_003](https://cloud.githubusercontent.com/assets/402117/7134314/09454fde-e29c-11e4-9aee-938052f6e162.png)\r\n\r\n**Suggestion: would it be better to have divs instead of definition lists and apply a tabular layout with css?**\r\nThe markup could be:\r\n```\r\n<div class=\"metadata-listing\">\r\n  <div class=\"row\">\r\n    <div class=\"label cell\">Label:</div><div class=\"value cell\">Value:</div>\r\n  </div>\r\n</div>\r\n```\r\n\r\n"}}