• Resolved morticae

    (@morticae)


    Hi,

    I’m almost satisfied with my theme but there is one flaw. When I am writing a post and I add an image (via the “add image” button) and write a caption it doesn’t display correctly on the page. Under the visual tab everything looks fine, which you can see here: https://therawblogger.com/wp-content/uploads/2009/08/visual.JPG

    However what actually shows up is this: https://therawblogger.com — There’s no background behind the thumbnail, it’s not centered & the caption doesn’t look right. I switched to the default theme and it works fine, but there’s a larger problem I dislike with the default theme. The centering thing isn’t a big issue, I can go to the html tab and add that in manually– I’m not sure if I could add in the rest, I don’t know how.

    So what is wrong here? Can I add something to fix this? I’ll show the css below:

    /*
    Theme Name: Disappear
    Theme URI:
    Description: A pear ending theme
    Version: 1.0
    Author: Dedicated WordPress Themes
    Author URI:
    */
    
    * {
    	font-family: Verdana,"Trebuchet MS", Arial, Helvetica, sans-serif;
    }
    
    body {
    	margin: 30px 0;
    	padding: 0;
    	background: #efefef;
    	font-size:small;
    	font-size: 0.76em;
    	color: #444;
    }
    
    h1, h2, h3, h4, h5, h6 {
    	margin: 0;
    	padding: 0;
    	font-family: Georgia, Verdana, Serif;
    	text-transform: lowercase;
    	font-weight: normal;
    	color: #444;
    }
    
    h2,h3 {
    	margin-bottom: 10px;
    	border-bottom: 1px solid #F4F4F4;
    	font-size: 1.8em;
    }
    
    p, ol, ul, blockquote {
    	line-height: 24px;
    }
    
    ul {
    	margin: 0;
    	padding: 0;
    	list-style-image:url(images/bullet.png);
    }
    #content ul
    {
    	margin-left:2em;
    }
    #sidebar ul
    {
    	margin-left:1em;
    }
    a {
    	color: #C9D200;
    	text-decoration:none;
    }
    
    a:hover
    {
    	color:#C9D200;
    	text-decoration: underline;
    }
    
    img {
    	border: none;
    }
    blockquote
    {
    	margin:1em;
    	padding:5px;
    	border-left:#900 2px solid;
    	color:#666;
    }
    img.left
    {
    	float:left;
    	margin:0 1em 1em 0;
    }
    img.right
    {
    	float:right;
    	margin:0 0 1em 1em;
    }
    a img
    {
    	border-bottom:#900 1px dashed;
    	padding-bottom:3px;
    }
    .clear
    {
    	clear:both;
    }
    .center
    {
    	text-align:center;
    }
    
    #s, input.textbox {
    	width: 185px;
    	margin-bottom: 10px;
    	border: 1px solid #E0E0E0;
    	padding:3px;
    }
    
    #btnSearch {
    	border: 1px solid #EBEBEB;
    	border-bottom-color: #DDDDDD;
    	background: #FBFBFB url(images/img7.gif) repeat-x;
    	padding:3px;
    	color: #7A7A7A;
    }
    /* Posted */
    
    .posted {
    	margin: 0;
    	font-size:0.9em;
    	padding: 5px;
    	background:#fdfdfd url(images/img6.gif) repeat-x;
    	border: 1px solid #F2F2F2;
    }
    
    .posted p {
    	margin: 0;
    	padding:0;
    }
    
    .posted .comments {
    	float: right;
    	margin:0;
    	padding:0 0 0 15px;
    	background:url(images/comments.gif) no-repeat left center;
    }
    
    /* Header */
    
    #header {
    	width: 917px;
    	height: 115px;
    	margin: 0 auto;
    	background: url(images/img2.gif) repeat-x;
    }
    
    /* Logo */
    
    #logo {
    	float: left;
    	height: 115px;
    	padding: 0 0 0 0;
    	background: url(images/img1.gif) no-repeat;
    }
    
    #logo * {
    	text-decoration: none;
    }
    
    #logo h1 {
    	float: left;
    	padding: 50px 0 0 40px;
    	font-size: 2.6em;
    }
    
    #logo h1 a {
    	color: #000000;
    }
    
    #logo h2 {
    	float: left;
    	padding: 72px 0 0 8px;
    	font-size: 1em;
    	border: none;
    }
    
    #logo h2 a {
    	color: #B4B4B4;
    }
    
    /* Menu */
    
    #menu {
    	float: right;
    	height: 45px;
    	padding: 70px 25px 0 0;
    	background: url(images/img3.gif) no-repeat right top;
    }
    
    #menu ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    
    #menu li {
    	display: inline;
    }
    
    #menu a {
    	padding: 5px 10px;
    	border-left: 2px solid #DBDBDB;
    	text-transform: lowercase;
    	text-decoration: none;
    	font-size: 1.1em;
    	color: #3B3B3B;
    }
    #menu a:hover, #menu li.current_page_item a
    {
    	border-bottom:#DBDBDB 2px solid;
    }
    
    /* Splash */
    
    #splash {
    	width: 877px;
    	height: 140px;
    	margin: 0 auto;
    	background: url(images/img4.jpg) no-repeat center bottom;
    	border-right: 20px solid #FFFFFF;
    	border-left: 20px solid #FFFFFF;
    }
    
    /* Content */
    
    #main {
    	width: 847px;
    	margin: 0 auto;
    	padding: 30px 35px;
    	background: #FFFFFF url(images/img8.gif) no-repeat left bottom;
    }
    
    #content {
    	float: left;
    	width: 620px;
    }
    #content .post
    {
    	margin-bottom:3em;
    }
    /* Comments */
    #comments, #respond
    {
    	margin-top:1em;
    }
    #commentform
    {
    	margin:10px 0;
    	padding:10px;
    	background:#fcfcfc;
    	border-top:#ddd 1px solid;
    	border-bottom:#ddd 1px solid;
    }
    .commentnum
    {
    	font-size:200%;
    }
    #main .commentlist {
    	margin: 0;
    	padding: 0;
    	border-top:#ddd 1px solid;
    }
    .commentlist li
    {
    	list-style:none;
    	margin: 0;
    	padding:1em;
    	border-bottom:#ddd 1px solid;
    }
    .commentlist li.alt
    {
    	background:#fcf9fc;
    }
    .commentlist li.highlighted
    {
    	border:#bdb76b 1px solid;
    }
    .commentlist li .cmtinfo
    {
    	font-size:1em;
    }
    .commentlist li cite
    {
    	font-style:normal;
    	font-weight:bold;
    }
    .commentlist li .cmtinfo em
    {
    	float:right;
    	margin:0;
    	padding:0;
    	font-style:normal;
    	font-size:0.9em;
    	color:#999;
    }
    #comments
    {
    	border-bottom:none;
    }
    textarea{
    	background:#fff;
    	border:1px solid #E0E0E0;
    	width:80%;
    
    }
    input.textbox:focus, textarea:focus
    {
    	background:#fff;
    	border:#999 1px solid;
    }
    
    /* Sidebar */
    #sidebar {
    	float: right;
    	width: 185px;
    	padding: 5px 0 0 0;
    }
    #sidebar li
    {
    	margin: 1em 0 0 0;
    	padding:0;
    	list-style:none;
    }
    #sidebar li li
    {
    	margin: 0;
    	padding:0;
    	list-style:none;
    }
    #sidebar li li li
    {
    	margin: 0;
    	padding:0;
    	list-style-image:url(images/bullet.png);
    }
    
    /* Footer */
    
    #footer
    {
    	clear:both;
    	padding:0;
    	margin:1em 0;
    }
    
    #footer p {
    	text-align: center;
    	color: #777777;
    }
    #footer p span
    {
    	font-size:0.9em;
    }
    #main .feed
    {
    	background:url(images/icon_feed.gif) no-repeat left;
    	padding-left:17px;
    }
    #main .trackback
    {
    	background:url(images/links.gif) no-repeat left;
    	padding-left:19px;
    }

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter morticae

    (@morticae)

    Ah, found some code that finally worked properly.

    .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;
    }

    thanks for posting this it solved my image caption problem

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Inserting Images & Caption — Not displaying correctly?’ is closed to new replies.