WordPress.org

1. cowperc
   Member
   Posted 1 year ago #

   OK...I pasted the following into my style.css:

   img.alignleft, div.alignleft {
   float:left;
   margin:0 0.5em 0.5em 0;
   }
   img.alignright, div.alignright {
   float:right;
   margin:0 0 0.5em 0.5em;
   }
   img.aligncentered, div.aligncentered {
   text-align:center;
   margin:0 auto;
   }
   
   .wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   /* optional rounded corners for browsers that support it */
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   }
   .wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
   }
   .wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
   }

   that allowed me to have images float with a caption box. it looks great. unfortunately, something in that code has my headline starting halfway across the page and taking up two lines: http://southernenergyblog.preationdev.com/index.php/sem-energy-efficiency/dont-overlook-the-air-barrier-test/

   any ideas?

2. cowperc
   Member
   Posted 1 year ago #

   I found a couple blogs that had suggestions, and sort of combined the two. I ended up deleting the code that's referenced in the first post, and replaced it with this:

   /* Captions */
   .aligncenter,
   div.aligncenter {
   	display: block;
   	margin-left: auto;
   	margin-right: auto;
   }
   
   .wp-caption {
   	border: 1px solid #ddd;
   	text-align: center;
   	background-color: #f3f3f3;
   	padding-top: 4px;
   	margin: 10px;
   	-moz-border-radius: 3px;
   	-khtml-border-radius: 3px;
   	-webkit-border-radius: 3px;
   	border-radius: 3px;
   }
   
   .wp-caption img {
   	margin: 0;
   	padding: 0;
   	border: 0 none;
   }
   
   .wp-caption p.wp-caption-text {
   	font-size: 11px;
   	line-height: 17px;
   	padding: 0 4px 5px;
   	margin: 0;
   }
   /* End captions */
   
   img.centered, .aligncenter, div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
   }
   
   img.alignright {
   padding: 4px;
   margin: 0 0 2px 7px;
   display: inline;
   }
   
   img.alignleft {
   padding: 4px;
   margin: 0 7px 2px 0;
   display: inline;
   }
   
   .alignright {
   float: right;
   }
   
   .alignleft {
   float: left;
   }

   That seemed to do the trick. I have no idea how or why.

Topic Closed

This topic has been closed to new replies.