Support » Fixing WordPress » Text running up against images…. highly frustrating

  • Anonymous

    I have a resume/blog that I update now and then, and there’s an issue I just cannot resolve. I’ve literally spent hours trying to fix this and now I am asking for help.

    Despite my attempts, my images and my text run up next to each other. I find this irritating. If I could separate it by a pixel or three that would be great.

    I am using the High-Tech 1.2 theme, which I have modified quite a bit.

    Here is the coding in the images section:

    /* Begin Images */
    p img { padding: 0; max-width: 100%; }
    img.centered { 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	}
    /* End Images */

    Thank you for any and all help you can provide.

Viewing 12 replies - 1 through 12 (of 12 total)
  • Anonymous

    Anyone? /bump 🙂


    Hi Kate,

    Could the 0 padding in the p img be overriding the padding in the img.align?

    I’m not a code expert by any stretch of the imagination, but that does look odd to me.

    All the best,
    Peggy Murrah


    Thanks for the response. I tried changing it to 4 and no dice. I’ve played with the options in that field and still nothing. I wonder if there’s another field in here somewhere that is overriding my images section:

    Theme Name: High-Tech
    Theme URI:
    Description: Simple and visually attractive technology-related WP theme by <a href="">GetTemplate</a>. More themes and templates are available on the author's website.
    Version: 1.2
    Latest updated: May 11th, 2007
    Author: GetTemplate
    Author URI:
    � 2007, GetTemplate. All rights reserved.
    body{ margin: 0; color: Black; font-family: Arial, Helvetica, sans-serif; padding: 0; font-size: 12px; background: Black url(images/bg_body.gif); }
    h1, h2, h3, h4, h5, big{ font-family: Arial, Helvetica, sans-serif;  margin: 0 0 1em 0; padding: 0; color: #303030; font-weight: normal; }
    h2{ font-size: 15pt; }
    h3{ font-size: 13pt; }
    h4{ font-size: 12pt; }
    h5{ font-size: 11pt; }
    p{ line-height: 1.4em; margin: 0 0 1em 0; padding: 0; }
    a{ color: #CF0303; }
    a:hover{	text-decoration: underline;}
    form, div, img{ margin: 0; padding: 0;	border:0;}
    #HEAD{ width: 740px; margin: 12px auto 0 auto; }
    	#HEAD .Wrapper{ position:relative; width: 720px; float: left; background: White url(images/bg_topnav.gif) repeat-x;  border: 10px solid White;   }
    	#SEARCH{	float:left; padding:15px 0 0 7px; width:240px;	}
    	#SEARCH	#searchbox{ color: #282C2F; font-size:11px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; left: 0px; width: 155px; line-height: 19px; padding: 1px 0 0 5px; margin: 0; }
    	#SEARCH	#searchbutton{ font-size:11px; }
    	#TOPNAV{	float:right; height:36px; padding:7px; }
    	#TOPNAV ul{list-style:none; margin:0; padding:0; }
    	#TOPNAV li{ margin-left:2px; display: block; float:left; }
    	#TOPNAV li ul{	display: inline;	}
    	#TOPNAV a{ text-decoration: none; color:black; font-size:11px;	padding:0 24px 0 24px; display: block; float:left; line-height: 31px; height:31px; background: url(images/bg_topnavbutton.gif) repeat-x;  font-family: "MS Sans Serif", Geneva, sans-serif;	}
    	#TOPNAV a:hover{ color: #E30000; }
    	#HEAD .Visual{ float:left; width: 720px; height: 270px; background: #41170D url(images/fishwrap.gif) no-repeat; }
    	#HEAD h1, #HEAD h1 a{ display:block; font-size: 125px; text-indent:-500em; text-decoration: none;   }
    	#HEAD h1 b{		font-weight: normal; font-size:12px;	}
    #PAGE{ width: 740px; margin: 0 auto; }
    	#PAGE .PageBG{ float: left; width: 720px; padding-bottom:25px;  background: White url(images/bg_pagefooter.gif) repeat-x bottom;  border: 10px solid White;    }
    #MAIN { width: 505px; float: right; padding: 10px 15px 0px 15px; }
    	#MAIN * a:hover{	text-decoration: none;  color: #E10000; }
    	#MAIN h2, #MAIN h3{ font-weight: normal;  font-size: 1.8em; margin: 0px 0 0 0 ;        	 }
    	#MAIN h2 a, #MAIN h2{ color: #535353; text-decoration: none; }
    	h3#respond, h3#comments{		border-bottom: none;	}
    	#MAIN h2.pagetitle{		border-bottom: none;	padding-bottom:15px;}
    	#MAIN h2 a, #MAIN h2, #MAIN h3 a{ color: #282C2F; text-decoration: none; }
    	#MAIN .post {	margin: 0 0 40px;	text-align: justify;  }
    	#MAIN .prefix{		text-align:right; font-size: 11px;   	 }
    	#MAIN .prefix a{	text-decoration: none;	}
    	#MAIN .prefix a:hover{	text-decoration: underline;   }
    	#MAIN p.postmetadata, #MAIN p.postmetadatasingle{  font-size: 11px;   text-align: right;  line-height: 1.6em;    margin-bottom: 2.7em;   }
    	#MAIN p.postmetadata span{ background-image: url(images/ico_postmeta.gif); margin-left:18px; padding:2px 0 9px 14px;  background-repeat: no-repeat;  background-position: left;    }
    	#MAIN .postmetadata a{ color: #5A5A5A; text-decoration: none;}
    	#MAIN .postmetadata a:hover{	text-decoration: underline;   }
    	#MAIN .entry{ margin-top:9px;	text-align:justify;}
    	#MAIN h3#comments {	padding: 0;	margin: 10px 0 20px 0;     	 }
    	#MAIN h2.pagetitle { font-size: 12px; margin: 0; color: #333333; background-image: none; text-align: right; font-weight: bold; }
    #SIDE{ float: left; width: 165px; padding: 0 14px 0 1px; background-image: url(images/bg_div.gif); background-repeat: repeat-y; background-position: right; }
    	#SIDE h2{ margin: 0; padding: 10px 0 0 10px; font-weight: bold; color: #354162; font-size: 12px;  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;  text-transform: uppercase;  letter-spacing: 2px;        }
    	#SIDE ul{ margin:0 0 15px 0; padding: 0; list-style: none;  font-family: "Trebuchet MS", TreArial, Helvetica, sans-s;    font-weight: bold;  	 }
    	#SIDE ul.Root{ margin:0; padding:0 0 0 0px;}
    	#SIDE .Root ul{ margin-top: 10px; }
    	#SIDE .Root ul li{ padding: 0 0 0 22px; background-image: url(images/ico_leftnav.gif); background-repeat: no-repeat; background-position: 0 5px;  margin-bottom: 3px;  }
    	#SIDE .Root ul li ul{ margin-bottom: 0; margin-top:0; padding:0 0 0 15px;}
    	#SIDE .Root ul a{ color: #646A75; text-decoration: none; }
    	#SIDE .Root ul a:hover{ text-decoration: underline; color: #D10303; }
    	#SIDE #recent-posts, #SIDE #recent-posts a, #SIDE #recent-comments, #SIDE #recent-comments a{ line-height: 1.2em; color:#333333; font-weight:normal; font-family: "MS Sans Serif", Geneva, sans-serif; }
    	#SIDE .Root ul li li{ padding: 2px 0 0px 0px; background-image: none; border-bottom: none;  margin-bottom: 0;   }
    	#SIDE .Root ul.rss{		padding-top:10px;	padding-left:10px; }
    	#SIDE .Root ul.rss li { background-image: url(images/ico_rss.gif);  padding: 5px 0px 8px 20px; margin-bottom:0;  border-bottom: none;  background-position: 0 4px;  background-repeat: no-repeat;  font-weight: normal;  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;          }
    	#calendar h2{		display: none;	}
    	#calendar_wrap{ padding:5px;	margin-bottom:10px;  background-color: #fafafa;    }
    	#calendar_wrap a{	color:white;	}
    	#wp-calendar { empty-cells: show; margin: 0 auto; width: 159px;  }
    	#wp-calendar #prev a, #wp-calendar #next a {font-size: 9pt;	}
    	#wp-calendar caption { font: 10px "Trebuchet MS", Arial, Helvetica, sans-serif; text-align: center;  color: #BA0000;  font-weight: bold;      }
    	#wp-calendar th{	font-size:11px;    color: #1F427A;  font-style: normal; text-transform: capitalize;  }
    	#wp-calendar td { font-size: 10px; padding: 1px 0; text-align: center;  color: #100C0D;  }
    	#wp-calendar #next a { padding-right: 10px; text-align: right; }
    	#wp-calendar #prev a { padding-left: 10px; text-align: left; }
    	#wp-calendar a { text-decoration: none; display: block;  color: White;  font-weight: bold;  background-color: #C90303;  padding-bottom: 1px;           }
    	#wp-calendar a:hover{ background-color: #E70303; }
    	#wp-calendar caption { text-align: center; width: 100%;  font-size: 12px;  }
    #FOOTER{ width:740px; margin:0 auto; }
    	#FOOTER .Wrapper{		width:740px; float:left; padding:10px 0 20px 0;	}
    	#FOOTER .Left{		float:left; width:350px;	}
    	#FOOTER .Right{ float: right; width: 350px; text-align: right; }
    	#FOOTER p{ font-size: 10px; font-family: "MS Sans Serif", Geneva, sans-serif; color: #C7C7C7; margin-bottom:5px; line-height:1em; }
    	#FOOTER a{ color:White; text-decoration: none; }
    	#FOOTER a:hover{ color: #EE0000; }
    .widecolumn .entry p { font-size: 1.05em; }
    .narrowcolumn .entry, .widecolumn .entry { line-height: 1.4em; }
    .narrowcolumn .postmetadata {	text-align: center;	}
    small { font-family: Arial, Helvetica, Sans-Serif; font-size: 10px; line-height: 1.5em; }
    acronym, abbr, span.caps{ font-size: 0.9em; letter-spacing: .07em; }
    .narrowcolumn .postmetadata {	padding-top: 5px;	}
    .widecolumn .postmetadata {	margin: 30px 0;	}
    .widecolumn .smallattachment {	text-align: center;	float: left;	width: 128px;	margin: 5px 5px 5px 0px;}
    .widecolumn .attachment {	text-align: center;	margin: 5px 0px;}
    /* End Structure */
    /* Begin Images */
    p img { padding: 0; max-width: 100%; }
    img.centered { 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	}
    /* End Images */
    /* Begin Form Elements */
    .entry form {  text-align: center; }/* This one is mainly for password protected posts, makes them look better. */
    select { width: 130px; }
    #commentform input { width: 170px; padding: 2px; margin: 5px 5px 1px 0; }
    #commentform #author, #commentform #email, #commentform #url{  color: #303030; border: 1px inset #C4C4C4;	}
    #commentform textarea { width: 499px; padding: 0; background-color: White; color: #333333; border: 1px inset #B9B9B9;  overflow: auto;  }
    #commentform #submit { margin: 0;   background-color: #F5F5F5;  border: 1px outset #DBDBDB;   }
    /* End Form Elements */
    /* Begin Comments*/
    .alt { margin: 0; padding: 10px; }
    .commentlist { padding: 0; text-align: justify; }
    .commentlist li { margin: 15px 0 3px; padding: 5px 10px 3px; list-style: none; }
    .commentlist p { margin: 10px 5px 10px 0; }
    .nocomments { text-align: center; margin: 0; padding: 0; }
    .commentmetadata { margin: 0; display: block; }
    .commentlist li { background-color: #fafafa; }
    .commentlist cite, .commentlist cite a { font-weight: bold; font-style: normal;  }
    .commentlist p { font-weight: normal; line-height: 1.5em; text-transform: none; }
    .commentmetadata { font-weight: normal; }
    code { font: 1.1em 'Courier New', Courier, Fixed; }
    /* End Comments */
    /* Begin Various Tags & Classes */
    acronym, abbr, span.caps { cursor: help; }
    acronym, abbr { border-bottom: 1px dashed #999; }
    blockquote { margin: 15px 30px 0 10px; padding-left: 20px; border-left: 5px solid #FAF7EF; }
    blockquote cite { margin: 5px 0 0; display: block; }
    .center { text-align: center; }
    .navigation {  font-size: 12px; padding: 0 0 18px 0;  float:left; width:100%; margin-top:7px; }
    .navigation .alignleft{	width:100%; text-align: left;}
    .navigation .alignright{ width: 100%; text-align: right; }
    /* End Various Tags & Classes*/



    ahh cmon, dont do that 🙁

    if you want style help, link to your site.


    I did link to my site up top. Here it is again though:




    ah oke, missed it in the link, my bad 🙂 now I can go look.




    5 pages in and I cant find an example of what your problem is .. the link in the 1st post is a 404.

    can you provide a link to a page or post that illustrates the problem you are describing, please?


    Something I didn’t think about, but maybe it’s my browser. I use Firefox. Is it showing up OK with IE and Safari? I don’t use either of those nor have them installed on my machine.


    OK I’ve fixed a couple of problems (outside people not being able to view pages) but I still haven’t fixed my image bump issue. You can see this on the front page with the most recent post:

    I’ve tried changing the margins and the padding to no avail. Thank you.


    Nevermind, I’m just adding HTML coding to each picture on the site. There are a ton and it’s a PITA but at least I will only have to do it once per picture from now on.

    style="margin-left: 10px; margin-right: 0px"

    Kate…Try these options for a temporary fix(I use this):

    In HTML mode on the WP editor, within the image tag <img></img> add style=”margin: 20px;” or a combination of margin-left or margin-right with the same values.

    If this doesn’t work then in the <p> </p> tags surrounding your text beside the image do this:

    <p style margin: 8cm;”>…Text….</p>

    This will push your text 8 cms away from the left hand edge of the display frame(not 8cms away from the image), so this depends on the width of the image. So you will have to play with the values. The margin: attribute only works with whole centimeter values, so 0.75 and 15.5 will not work. I find 6cm is the best for me.

    Good luck,


Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Text running up against images…. highly frustrating’ is closed to new replies.