{"id":1106,"date":"2008-02-05T11:30:22","date_gmt":"2008-02-05T15:30:22","guid":{"rendered":"http:\/\/www.chrismclaren.com\/blog\/2008\/02\/05\/ignore-me-i-will-be-deleted\/"},"modified":"2008-02-05T15:59:31","modified_gmt":"2008-02-05T19:59:31","slug":"ignore-me-i-will-be-deleted","status":"publish","type":"post","link":"http:\/\/www.chrismclaren.com\/blog\/2008\/02\/05\/ignore-me-i-will-be-deleted\/","title":{"rendered":"CSS is driving me nuts"},"content":{"rendered":"<p>Aarrgh. My lovely blockquote CSS, with the indent and the nice vertical line works great all the time EXCEPT when I have an inline image on the left. For some (probably arcane) reason, in that case the margins\/padding and border seem to &#8220;disappear&#8221; under the inline image. You can see the problem below.<\/p>\n<p>I&#8217;ve know about this for years, but for some reason it&#8217;s driving me nuts today. I have recruited some CSS experts to advise me.<\/p>\n<p>Here&#8217;s some text and a blockquote, the way they should look:<\/p>\n<p>This is a temporary post to show someone a CSS issue.<\/p>\n<blockquote><p>This is a temporary post to show someone a CSS issue<\/p><\/blockquote>\n<p style=\"clear: both;\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.chrismclaren.com\/blog\/wp-content\/divider.gif\" alt=\"divider\" title=\"divider\" class=\"centered\" height=\"20\" width=\"253\"\/><\/p>\n<p>Here&#8217;s some text and a blockquote, with an inline image on the right. Everything is still good:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.chrismclaren.com\/blog\/wp-content\/images\/infrastructure\/probing_science.jpg\" width=\"200\" height=\"150\" alt=\"Professor Membrane\" title=\"Professor Membrane\"  class=\"alignright\"\/>This is a temporary post to show someone a CSS issue.<\/p>\n<blockquote><p>This is a temporary post to show someone a CSS issue<\/p><\/blockquote>\n<p style=\"clear: both;\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.chrismclaren.com\/blog\/wp-content\/divider.gif\" alt=\"divider\" title=\"divider\" class=\"centered\" height=\"20\" width=\"253\"\/><\/p>\n<p>Here&#8217;s some text and a blockquote, with an inline image on the left. Where did that indent and border go?<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.chrismclaren.com\/blog\/wp-content\/images\/infrastructure\/probing_science.jpg\" width=\"200\" height=\"150\" alt=\"Professor Membrane\" title=\"Professor Membrane\"  class=\"alignleft\"\/>This is a temporary post to show someone a CSS issue.<\/p>\n<blockquote><p>This is a temporary post to show someone a CSS issue<\/p><\/blockquote>\n<p style=\"clear: both;\">\n","protected":false},"excerpt":{"rendered":"<p class=\"excerpt\">Aarrgh. My lovely blockquote CSS, with the indent and the nice vertical line works great all the time EXCEPT when I have an inline image on the left. For some (probably arcane) reason, in that case the margins\/padding and border seem to &#8220;disappear&#8221; under the inline image. You can see the problem below. I&#8217;ve know about this for years, but&hellip; <a href=\"http:\/\/www.chrismclaren.com\/blog\/2008\/02\/05\/ignore-me-i-will-be-deleted\/\">Read more &rarr;<\/a><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[13],"tags":[50,28],"class_list":["post-1106","post","type-post","status-publish","format-standard","hentry","category-blog-cliches","tag-deep-geekery","tag-ui","xfolkentry"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p5UQvw-hQ","_links":{"self":[{"href":"http:\/\/www.chrismclaren.com\/blog\/wp-json\/wp\/v2\/posts\/1106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.chrismclaren.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.chrismclaren.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.chrismclaren.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"http:\/\/www.chrismclaren.com\/blog\/wp-json\/wp\/v2\/comments?post=1106"}],"version-history":[{"count":0,"href":"http:\/\/www.chrismclaren.com\/blog\/wp-json\/wp\/v2\/posts\/1106\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.chrismclaren.com\/blog\/wp-json\/wp\/v2\/media?parent=1106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.chrismclaren.com\/blog\/wp-json\/wp\/v2\/categories?post=1106"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.chrismclaren.com\/blog\/wp-json\/wp\/v2\/tags?post=1106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}