1. Home
  2. Forums Index
  3. Browser Side / CSS 4:15 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Wordpress Coding Help (weird image border)

         

kevintan

2:24 am on Aug 5, 2010 (gmt 0)

10+ Year Member



Hey all,

I've been having issues trying to remove a weird border around the images on my Wordpress blog. I've gone to multiple forums but no one has been able to help me resolve this. Here are some screenshots of what I'm talking about: 
http://a.imageshack.us/img840/1816/screencapturekg.png

http://a.imageshack.us/img686/6135/borderandspace.jpg


I'm also trying to customize the template so that there's more space for my content and less wasted space for the date and comment count.

If anyone knows how to fix these problems please let me know. I realize this is a lot of code, but I don't know where to start. Here's the code to the style.css file: 

/* 
Theme Name: Typebased
Theme URI: http://www.woothemes.com/
Description: Typebased by WooThemes
Version: 2.3.1
Author: WooThemes
Author URI: http://www.woothemes.com/
*/

html, body {
 font-family: arial;
 font-size: 12px;
 border: 0;
 color: #404040;
 padding-bottom: 30px;
}

body {
 background: #334F60;
}

body, img, p, h1, h2, h3, h4, h5, ul, ol, li, form, blockquote {
 margin: 0;
 padding: 0;
}

p {
 line-height: 18px;
}

p, h1, h2, h3, h4, h5, ul, ol, blockquote p {
 padding: 10px 0;
}

ul, ol {
 list-style: none;
}

small {
 font-size: 11px;
}

code {
 background: #FFFFC1;
}

a {
 color: #CE1433;
 text-decoration: none;
}

a:hover {
 text-decoration: none;
}

a img {
 border: none;
}

/* Align (used for images) */

.aligncenter {
 margin: 5px auto 5px auto;
 display: block;
}

.alignleft {
 margin: 14px 15px 10px 0;
 float: left;
}

.alignright {
 margin: 14px 0px 10px 15px;
 float: right;
}

/* Wrap */

.wrap {
 width: 100%;
}

.left-col {
 float: left;
}

.right-col {
 float: right;
}

/* Container */

#container {
 width: 940px;
 margin: 0 auto;
 background: url(images/top.gif) no-repeat 0 143px;
}

/* Header */

#header {
 width: 100%;
 height: 108px;
}

#header h1 {
 padding: 30px 0 0 20px;
}

/* Main Menu */

#menu {
 width: 100%;
 height: 35px;
 margin-bottom: 4px;
}

#menu ul {
 position: relative;
 width: 764px;
 height: 35px;
 margin-left: 160px;
 padding: 0;
 background: url(images/menu_bg.gif) repeat-x 0 bottom;
}

#menu ul li {
 float: left;
 line-height: 30px;
 display: inline;
 font-weight: bold;
 text-transform: uppercase;
 font-family: "Lucida Sans", Arial, sans-serif;
}

#menu ul li a {
 display: block;
 position: relative;
 margin-top: 5px;
 padding: 0 27px 0 0;
 color: #C0CDCF;
 border-left: #2B404D 1px solid;
}

#menu ul li a:hover {
 color: #fff;
 cursor: pointer;
}

#menu ul li a span {
 display: inline-block;
 height: 30px;
 padding: 0 0 0 27px;
}

/* Main Menu - Current Page Item */

#menu ul li.current_page_item {
 line-height: 35px;
}

#menu ul li.current_page_item a {
 background: url(images/menu_button.gif) no-repeat right top;
 margin-top: 0;
 color: #1A272E;
 border: 0;
}

#menu ul li.current_page_item a:hover {
 color: #1A272E;
}

#menu ul li.current_page_item a span {
 background: url(images/menu_button.gif) no-repeat left top;
 height: 35px;
}

/* Main Menu - extra */

#menu ul li.first a {
 border: 0;
}

#menu ul li.current_page_item a {
 position: relative;
}

/* Main Menu - Drop-down menus */
#menu .nav li ul { height: auto; margin-left: 0; margin-top: 0; background: #F5F5F5; position: absolute; left: -999em; width: 180px; border: 1px solid #dbdbdb; border-width:1px 1px 0; z-index:999; }
#menu .nav li ul li { float: left; background:#F5F5F5; border-top:1px solid #fff; border-bottom:1px solid #dbdbdb; }
#menu .nav li ul li a { float: none; margin: 0; padding: 0 0 0 20px!important; line-height: 28px; height: auto; width:160px; color:#555; font-size:0.8em; border: none; background: none; }
#menu .nav li ul li a span { padding: 0; height: auto; background: none; }
#menu .nav li ul li a.sf-with-ul { padding:5px 10px; }
#menu .nav li ul li a:hover { background:#e0e0e0;}
#menu .nav li ul ul { margin: -25px 0 0 180px; }
#menu .nav li ul ul li a { }
#menu .nav li ul li ul li a { }

#menu .nav li:hover, #menu .nav li.hover { position:static; }
#menu .nav li:hover ul ul, #menu .nav li.sfhover ul ul,
#menu .nav li:hover ul ul ul, #menu .nav li.sfhover ul ul ul,
#menu .nav li:hover ul ul ul ul, #menu .nav li.sfhover ul ul ul ul { left:-999em; }
#menu .nav li:hover ul, #menu .nav li.sfhover ul,
#menu .nav li li:hover ul, #menu .nav li li.sfhover ul,
#menu .nav li li li:hover ul, #menu .nav li li li.sfhover ul { left:auto; }

#menu .nav .sf-sub-indicator {background: url(images/arrow-superfish.png) no-repeat;position:absolute;display:block;right:0.4em;top:0.9em;width:10px;height:10px;text-indent:-999em;overflow:hidden;}
#menu .nav li ul .sf-sub-indicator {background:url(images/arrow-superfish-right.png) no-repeat;}

/* Content Area - Content and Sidebar */

.background {
 background: #F5F5F5 url(images/content_bg.gif) repeat-y right top;
}

/* Content */

#content {
 width: 651px;
}

h2.arh {
 width: 460px;
 margin-left: 160px;
 margin-top: 12px;
 margin-bottom: 10px;
 padding: 10px 15px;
 font-size: 20px;
 background: #FFF0D4;
 border-bottom: #D7D7D7 1px solid;
 border-top: #D7D7D7 1px solid;
 line-height: 25px;
}

/* Post */

.post {
 width: 100%;
 clear: both;
 padding: 10px 0;
 border-bottom: #CBCBCB 1px solid;
 background: url(images/post_element.gif) no-repeat 159px 21px;
}

.error, .page {
 border: 0;
}

/* Post Content */

.post-content {
 width: 440px;
 margin-right: 21px;
 display: inline;
}

.post-content a {
 font-weight: bold;
}

.post-content a:hover {
 text-decoration: underline;
}

/* Post Content Headings */

.post-content h2 {
 font-size: 28px;
 line-height: 30px;
}

.post-content h2 a {
 color: #404040;
}

.post-content h2 a:hover {
 text-decoration: underline;
}

.post-content h3 {
 font-size: 14px;
 padding: 5px 0;
}

/* Post Content Lists and Blockquote */

.post-content ol, .post-content ul {
 line-height: 20px;
}

.post-content ul {
 padding-left: 30px;
}

.post-content ul li {
 list-style: circle;
 padding: 3px 0;
}

.post-content ol {
 padding-left: 37px;
}

.post-content ol li {
 list-style: decimal;
 padding: 3px 0;
}

.post-content blockquote {
 border-left:2px solid #777777;
 color:#777777;
 font-style:italic;
 margin:5px auto 15px;
 padding:0px 10px;
 width:85%;
}

/* Post Content Images*/

.post-content img {
 
}

/* Post Content (read more) */

.post-content span.read_more {
 padding: 5px 0 10px 0;
 display: block;
 float: left;
 font-size: 13px;
}

.post-content a span.read_more {
 color: #1A86DF;
 text-decoration: underline ;
}

.post-content a:hover span.read_more {
 text-decoration: none;
}

/* Post Meta */

.post-meta {
 width: 140px;
 margin-left: 6px;
 text-align: right;
 display: inline;
 padding-top: 11px;
}

.post-meta a {
 color: #587384;
}

.post-meta a:hover {
 text-decoration: underline;
}

/* Post Meta Date */

.post-meta h3 {
 padding: 3px 0;
 margin-bottom: 23px;
}

.post-meta h3 span.day {
 display: block;
 float: right;
 line-height: 28px;
 font-size: 35px;
 border-right: #CBCBCB 1px solid;
 padding-right: 5px;
 color: #8D8D8D;
}

.post-meta h3 span.month, .post-meta h3 span.year {
 color: #666666;
 width: 40px;
}

.post-meta h3 span.month {
 display: block;
 float: right;
 font-size: 16px;
 line-height: 14px;
 padding-left: 4px;
 text-align: center;
 text-transform: uppercase;
}

.post-meta h3 span.year {
 font-size: 14px;
 display: block;
}

/* Post Meta Author and Comments */

.post-meta h4 {
 font-size: 12px;
 padding: 3px 21px 3px 0;
 color: #666666;
}

.post-meta h4.author {
 background: url(images/icon_author.gif) no-repeat right 2px;
 font-style: italic;
}

.post-meta h4.comments {
 background: url(images/icon_comment.gif) no-repeat right 4px;
}

.post-meta h4.comments a {
 color: #666666;
}

/* More Entries */

.more_posts {
 width: 400px;
 clear: both;
 margin-left: 190px;
 padding: 5px 0 6px 0;
}

.more_posts h2 {
 font-size: 20px;
}

.more_posts h2 a {
 color: #404040;
}

.more_posts h2 a:hover {
 color: #1A86DF;
}

/* Comments (single.php and comments.php) */

h3#comments, h3.lc {
 font-size: 18px;
 border-bottom: #D7D7D7 2px solid;
}

h3.lc {
 padding-top: 20px;
}

.comments_wrap {
 margin: 20px 0 0px 0px;
 clear: both;
 padding-bottom: 5px;
 border-bottom: #D7D7D7 1px dotted;
}

.comments_wrap img {
 background: none;
 padding: 1px;
}

.comments_wrap .left {
 width: 46px;
 padding-top: 2px;
 float: left;
}

.comments_wrap .left img {
 border: #D7D7D7 1px solid; 
 padding: 1px !important;
}

.comments_wrap .right {
 margin-left: 55px;
}

.comments_wrap .right h4 {
 font-size: 11px !important;
 text-transform: none;
 padding: 0;
 font-weight: normal;
}

.comments_wrap .right h4 b {
 font-size: 12px !important;
}

.comments_wrap .right h4 a {
 text-decoration: none;
}

.comments_wrap .right h4 a:hover {
 text-decoration: underline;
}

/* Comments (form) */

#content form {
 margin: 20px 0 30px 10px;
}

#content form label {
 display: block;
 margin: 10px 0;
 font-size: 12px;
}

#content form label input {
 padding: 3px;
 width: 180px;
 font-size: 12px;
}

#content textarea {
 margin-bottom: 10px;
 display: block;
 padding: 3px;
 font-size: 12px;
}

#content form input {
 margin-top: 5px;
}

.lc_logged {
 padding: 0;
 margin-top: -10px;
}

/* Sidebar */

#sidebar {
 width: 289px;
}

#sidebar h2 {
 font-size: 13px;
 color: #4A8393;
}

/* Sidebar Search */

#search {
 width: 100%;
 height: 57px;
 background: url(images/search_block_bg.gif) no-repeat 0 0;
 height: 50px;
}

#search form {
 padding: 14px 0 0 14px;
}

#search form div {
 width: 259px;
 height: 28px;
 background: url(images/search_field.gif) no-repeat 0 0;
 position: relative;
}

#search form input.search_box {
 width: 175px;
 border: 0;
 position: absolute;
 left: 5px;
 top: 5px;
 padding-top: 2px;
 background: transparent;
 font-size: 11px;
 font-weight: bold;
 outline: none;
}

#search form input.submit {
 position: absolute;
 right: 0;
}

/* Sidebar Block */

#sidebar .block {
 padding: 14px 4px 14px 14px;
 background: url(images/sidebar_block_top.gif) repeat-x 0 0;
}

#sidebar .block a {
 color: #3F6069;
}

#sidebar .block a:hover {
 color: #131A1C;
}

#sidebar .block ul {
 width: 100%;
 padding: 1px 0 8px 0;
}

/* Sidebar Inside Block */

#sidebar_in .block ul li {
 font-weight: bold;
 border-bottom: #BDCCD1 1px solid;
 line-height: 20px;
 padding: 4px 0 4px 21px;
 background: url(images/circle.gif) no-repeat 5px 11px;
 margin-right: 10px;
}

#sidebar_in .block ul li ul li {
 border: 0;
}

/* Sidebar Special List */

#sidebar .categories ul, #sidebar .blogroll ul, #sidebar .widget_categories ul, #sidebar .widget_links ul {
 background: url(images/sidebar_ul_lines.gif) no-repeat 0 0;
 margin-top: 3px;
}

#sidebar .categories ul li, #sidebar .blogroll ul li, #sidebar .widget_categories ul li, #sidebar .widget_links ul li {
 width: 104px;
 float: left;
 margin-right: 10px;
 display: inline;
}

#sidebar .categories ul li, #sidebar .widget_categories ul li {
 background: url(images/icon_folder.gif) no-repeat 0 6px;
}

#sidebar .blogroll ul li, #sidebar .widget_links ul li {
 background: url(images/circle.gif) no-repeat 5px 11px;
 font-size: 11px;
}

/* Sidebar Flickr */

#sidebar .flickr h2 span {
 color: #0061D8;
}

#sidebar .flickr h2 span span {
 color: #FF1183;
}

#sidebar .flickr .wrap {
 padding-top: 5px;
 margin-left: -10px;
 position: relative;
}

#sidebar .flickr li {
 float: left;
 margin-left: 10px;
 display: inline;
 margin-bottom: 10px;
}

#sidebar .flickr img {
 float: left;
 margin-left: 5px;
 display: inline;
 margin-bottom: 5px;
 display: block;
 padding: 4px;
 background: #fff;
 border: #BFCACE 1px solid;
}

/* Sidebar Adverts */

#sidebar .adverts {
 width: 285px;
 padding: 15px 0 10px 4px;
 background: url(images/sidebar_block_top.gif) repeat-x 0 0;
}

#sidebar .adverts ul {
 padding: 0;
}

#sidebar .adverts ul li {
 float: left;
 margin-left: 10px;
 margin-top: 10px;
 display: inline;
}

#sidebar .adverts img {
 display: block;
}

/* Widget (calendar) */

#wp-calendar {
 width: 95%;
 padding: 0 0 0px 0;
 margin-bottom: 15px;
}

#wp-calendar caption {
 padding: 10px;
}

#wp-calendar th, #wp-calendar td {
 padding: 5px;
 text-align: center;
 background: #C0DBE2;
}

#wp-calendar td {
 background: transparent;
}

#wp-calendar td, table#wp-calendar th {
 padding: 3px 0;
}

#wp-calendar a {
 text-decoration: underline;
}

#wp-calendar a:hover {
 text-decoration: none;
}

/* Widget (tag cloud) */

#tag_cloud {
 padding-bottom: 20px;
}

#tag_cloud h2 {
 margin-bottom: 5px;
}

/* Footer */

#footer {
 width: 940px;
 margin: 0 auto;
 background: url(images/footer_bg.gif);
 padding-top: 18px;
 margin-top: -1px;
 position: relative;
}

#footer a {
 color: #B2D1E4;
}

#footer a:hover {
 color: #318DE1;
}

#footer h2 {
 color: #6D7E87;
}

/* Footer Popular Articles */

#footer .popular {
 padding-bottom: 30px;
}

#footer .left-col .wrap {
 width: 646px;
}

#footer .left-col h2 {
 width: 115px;
 display: block;
 float: left;
 line-height: 24px;
 text-align: right;
 padding: 10px 35px 10px 10px;
 font-size: 20px;
 background: url(images/footer_element.gif) no-repeat right 18px;
 display: inline;
}

#footer .left-col ul {
 width: 441px;
 display: block;
 float: left;
 padding: 5px 0 15px 30px;
}

#footer .left-col ul li {
 line-height: 20px;
 font-size: 16px;
 padding: 6px 0 9px 0;
 font-weight: bold;
 background: url(images/footer_line.gif) repeat-x left bottom;
}

/* Footer Subscribe */

#footer #subscribe {
 width: 241px;
 padding: 0 30px 0 18px;
 color: #B2D1E4;
}

#footer #subscribe a {
 font-weight: bold;
 text-decoration: underline;
}

#footer #subscribe h2 {
 font-size: 16px;
}

#footer #subscribe p {
 padding: 8px 0 8px 42px;
}

#footer #subscribe p.rss {
 background: url(images/icon_rss.gif) no-repeat 0 11px;
}

/* Copyright */

#copyright {
 width: 100%;
 clear: both;
 background: #1A272E url(images/bottom.gif) no-repeat left bottom;
 border-top: #2B404D 1px solid;
 font-size: 11px;
 color: #677881;
 padding: 5px 0;
}

#copyright .left-col {
 padding-left: 15px;
}

#copyright .right-col {
 padding-right: 15px;
}

#copyright .right-col img {
 vertical-align: middle;
}

/* Fix */

.wrap:after,
.block ul:after {
 content: "."; 
 display: block;
 height: 0;
 clear: both; 
 visibility: hidden;
}

/* Misc */

.fix{
 clear: both;
 height: 1px;
 margin: -1px 0 0;
 overflow: hidden
}
.fl{
 float: left
}
.fr{
 float: right
}
.ac{
 text-align: center
}
.ar{
 text-align: right
}
img.centered{
 display: block;
 margin-left: auto;
 margin-right: auto;
}

img.alignright{
 padding: 4px;
 margin: 3px 0 2px 10px;
 display: inline;
}

img.alignleft{
 padding: 4px;
 margin: 3px 10px 2px 0;
 display: inline;
}

.alignleft{
 float: left;
}

.alignright{
 float: right;
}

/* Threaded comments */

ol.commentlist {
 margin:0;
 padding:0;
}

ol.commentlist li{
 list-style-type:none;
}

ol.commentlist li ul.children {
 padding-left:20px;
}
ol.commentlist li ul.children li{
 border-top:1px dotted #D7D7D7; 
 border-bottom:none;
 padding-top:15px;
}

/* Gravity forms */

.gfield { margin-bottom: 10px; }
.gform_wrapper .top_label .gfield_label { display:block;float:left; padding-right:20px; width: 100px; margin: 5px 0px 4px !important; }
.gform_wrapper input.button { padding: 5px 10px 6px !important; }
.gform_wrapper input { padding: 7px 3px !important; }
.gform_wrapper .top_label input.large, .gform_wrapper .top_label select.large, .gform_wrapper .top_label textarea.textarea { width: 400px !important; padding: 7px 3px !important; }
.gform_wrapper .entry img, .gform_wrapper img.thumbnail { padding: 0px !important; border: 0px !important; }
ul.top_label .clear-multi { clear: none !important; }
.gform_wrapper .gfield_checkbox li, .gform_wrapper .gfield_radio li { display: inline !important; }
.gform_wrapper .gfield_checkbox, .gform_wrapper .gfield_radio { margin-left: 120px !important; }
img.ui-datepicker-trigger { border: 0px; padding: 0px; }


Thanks for your help!

Major_Payne

4:05 pm on Aug 5, 2010 (gmt 0)



If you want all image borders removed and to clear browsers of margins/paddings before your own styles take over, place the following at the very top of the CSS: 

* { margin: 0; padding: 0; border: 0; }


If you are getting borders on images used as links: 

 a image {
border: 0;
text-decoration: none;
}


As to increasing space for content, maybe increase the padding around the comment container(s).

Ron
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 4:15 pm May 1, 2026