Social Buttons
  1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Very stupid CSS problem with bg color

Discussion in 'CSS' started by Lorelei, Dec 30, 2008.

0
  1. #1
    Hi,
    SEMrush
    I know this is a really basic problem but since I am working with a theme I bought from elegantthemes and didn't create myself I am struggling a lil`.

    I wanted to make the links in the post appear white against a green background strip, like I did here.
    http://pswish.com/pswishcom-wishes-everyone-happy-holidays/

    That part went easy, but problem is, when I insert an image that is hyperlinked (like in the post above) -- it also has background and moreover border that I have no idea where is comes from.

    How can I remove the bg from hyperlinked images, any ideas? here is the css:

    <?php
require_once( dirname(__FILE__) . '../../../../wp-config.php');
require_once( dirname(__FILE__) . '/functions.php');
header("Content-type: text/css");

global $options;

foreach ($options as $value) {
    if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); } }
?>

body {
margin-top: 0px;
padding: 0;
color: #535B4F;
background-color:#cacbaf;
background-image: url(images/bg.png);
background-repeat: repeat-x;
font-family: Arial; /* GillSans,Calibri,Trebuchet,sans-serif */
font-size: 11px;
line-height: 18px;
/* letter-spacing: 0.06em; */
}

#wrapper2 {
width: 950px;
margin-left: auto;
margin-right: auto;
padding: 0px 0px 0px 0px;
background-color: #FFF;
margin-top: 33px;
background-image: url(images/top-left.gif);
background-position: top left;
background-repeat: no-repeat;
}

.single-entry {
float: left;
width: 100%;
margin-bottom: 10px;
padding: 0px;
}
.single-entry p {
font-size:1.23em;
line-height:150%;
}

.single-entry a:link, .single-entry a:visited,.single-entry a:active {
color: #fff; 
background: #7db006;
padding: 0px 2px 0px 2px;
}

.single-entry a:hover {

color: #ddddcb; 
background: #5a6055;
padding: 0px 2px 0px 2px;
}

.single-entry a:link img {
background:none;
padding: 0 0 0 0;

max-width: 610px;
}


color: #ddddcb; 
background: #5a6055;
padding: 0px 2px 0px 2px;
}

.post-wrapper {
background-color: #FFF;
padding: 15px;
width: 573px;
border: 1px solid #dedecc;
}

a:link { 
text-decoration: none; 
color:#585f53;
}

a:visited { 
text-decoration: none; 
color: <?php echo $artsee_link_color; ?>; 
}

a:hover, a:active { 
color: #3B3B3B; 
}

h1, h2, h3, h4, h5, h6 { 
font-weight: normal; 
margin: 0px 0 10px; 
}

h1 { 
font-size: 32px; 
margin-bottom: 0px; 
margin-top: 10px;
}

h2 { 
font-size: 28px; 
}

h3 { 
font-size: 24px;
}

.post-title {
line-height: 30px;
}

.home-post-wrap {
width: 613px;
margin-right: 13px;
float: left;
background-color: #FFF;
border: 1px solid <?php echo $artsee_content_border; ?>;
}

.home-post-wrap2 {
width: 593px;
padding: 10px;
margin-right: 13px;
float: left;
background-color: #FFF;
border: 1px solid <?php echo $artsee_content_border; ?>;
margin-bottom: 10px;
}

.home-categories img{
border: 4px solid #cacbaf;
float: left;
margin-right: 10px;
margin-bottom:5px;
}
.home-categories img:hover{
border: 4px solid #9cca07;
float: left;
margin-bottom:5px;
margin-right: 10px;
}

.index-post-wrap {
width: 593px;
margin-right: 13px;
margin-bottom: 10px;
float: left;
background-color: #FFF;
border: 1px solid <?php echo $artsee_content_border; ?>;
padding: 10px;
}

.readmore {
background-image: url(images/bullet.png);
background-repeat: no-repeat;
background-position: left;
float: right;
padding-left: 20px;
color:#fff;
margin-top: 10px;
}

.readmore a:link, .readmore a:hover {
color: #fff;
}
.thumbnail-home {
border: 0px;
margin: 0px 0px 0px 0px;
}

h4, h5, h6 { 
font-size: 20px; 
}

.titles { 
font-weight: normal; 
font-size: 24px; 
text-decoration: none;
}


.titles a:link, .titles a:visited, .titles a:active {
text-decoration: none;
font-size: 20px;
font-weight: bold;
font-family: Trebuchet MS;
text-transform: uppercase;
margin-bottom: 10px;
margin-top: 10px;
display: block;
background:none;
color:#a60328;
}

.titles-featured a, .titles-featured a:hover, .titles-featured {
font-size: 30px;
line-height: 30px;
}

pre, blockquote {
overflow: auto;
padding: 0 10px;
margin: 20px 30px;
line-height: 1.8em;
background-color: #f5f5f5;
border: 1px solid #e0e0e0;
}

pre:hover, blockquote:hover {
background-color: #f0f0f0;
border: 1px solid #d0d0d0;
}


ul { 
list-style-image: url(images/bullet.png); 
}

#pages {
width: 950px;
float: left;
background-image: url(images/pagesbg.jpg);
background-position: top right;
background-repeat: no-repeat;
min-height: 68px;
}

#categories {
width: 950px;
min-height: 48px;
background-image: url(images/categories-bg.gif);
background-repeat: repeat-x;
float: left;
font-size:90%;
font-family: Arial;
letter-spacing:0px;
background-color: #433D3D;
}

#categories ul {
margin: 0px 0px 0px 10px;
padding-left: 0px;
list-style-type: none; 
list-style-image: none; 
float: left;
}

#categories ul li {
float: left; 
display: block; 
padding-left: 0px; 
height: 48px;
}

#categories ul li a:link,#categories ul li a:visited, #categories ul li a:active, #categories ul li a:hover   {
height: 36px;
display: block;
color: <?php echo $artsee_cat_color; ?>;
font-size: 11px;
font-weight: bold;
padding: 12px 10px 0px 10px;
background-image: url(images/categories-line.gif);
background-repeat: no-repeat;
background-position: right;
float: left;
}

#categories ul li a:hover {

background-image: url(images/categories-hover.gif);
background-repeat: repeat-x !important;
}

#readers {
margin: -45px 0 0 10px;
float:right;
display: inline;
padding: 8px 36px 0 0;
}

#header {
width: 950px;
margin-top: 0px;
height: 219px;
background-color: #373434;
background-image: url(images/header.jpg);
background-repeat: no-repeat;
float: left;
}

#container {
float: right;
width: 950px;
color: #535B4F;
background-image: url(images/content-bg.gif);
}

#left-div {
width: 646px;
float: left;
}

#left-inside {
float: left;
padding: 0px 10px 0px 19px;
}

.adwrap {
margin-left: 26px;
}

#sidebar-wrapper {
width: 300px;
float: left;
margin-bottom: 20px;
}

#sidebar {
float: left;
padding-left: 0px;
padding-right: 13px;
width: 287px;
}

#footer {
clear: both;
width: 930px;
height: 31px;
padding-left: 20px;
text-align: left;
color: #C3B8B6;
padding-top: 14px;
background-image: url(images/footer.gif);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
font-size: 11px;
}

#footer a {
color: #C3B8B6;
font-size: 11px;
}

#footer a:visited {
color: #C3B8B6;
}

#footer a:hover {
color: #C3B8B6;
text-decoration: underline;
}

#extras {
float: left;
width: 780px;
color: #C7AA92;
text-align: left;
padding: 0 10px 10px;
margin: 10px 12px 20px;
background-color: #f5f5f5;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
}

#pages ul { 
list-style-type: none; 
list-style-image: none; 
float: left; 
padding: 0px 0px 0px 0px; 
margin-left: 10px; 
margin-top: 0px; 
margin-bottom: 0px;
}
#pages li { 
float: left; 
display: block; 
margin-top: 0px; 
margin-bottom: 0px;
font-weight: 700;
}

#pages li:hover {
background-image: url(images/pages-hover.gif);
}

#pages li a:link, #pages li a:visited {
float: left;
color: <?php echo $artsee_nav_color; ?>;
display: block;
height: 45px;
padding-top: 23px;
font-size: 14px;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 0px;
}

#pages li a:hover, #pages li a:active {
color: <?php echo $artsee_nav_color; ?>;
font-size: 14px;
margin-bottom: 0px;
background-image: url(images/pages-arrow.png);
background-position: top;
background-repeat: no-repeat;
}

.sidebar-box {
padding-top: 5px;
margin-bottom: 0px;
}

.articleinfo {
border-bottom: 1px solid #EEEEEE; padding-bottom: 7px; color: #545454;
}

.sidebar-box ul li a:link, .sidebar-box ul li a:visited, .sidebar-box ul li a:active {
display: block; 
color: #373434; 
width: 100%; 
/* padding: 3px 3px 3px 3px; */
background-image: none !important;
} 

.sidebar-box ul li {
color: #373434 !important;
}

.sidebar-box ul li a:hover {
width: 100%;
display: block; 
color: #393939; 

} 

.sidebar-box h3 { 
margin-top: 5px; 
font-size: 11px; 
color: #FF8400; 
padding-top: 9px; 
font-weight: normal; 
text-transform: lowercase; 
font-weight: bold; 
margin-left: 0px; 
font-family: Trebuchet MS; 
background-image: url(images/h3-bg.jpg); 
background-repeat: no-repeat; 
background-position: left; 
width: 263px; 
height: 30px; 
padding-left: 10px;
}

#commentwrap {
display: block;
width: 570px;
margin-bottom: 20px;
margin-top: 20px;
margin-left: 5px;
}

.commentlist li{
display: block;
float: left;
clear: both;
margin-left: 0px;
margin-bottom: 10px;
}

.commentlist ol {
margin-left: 0px; 
padding-left: 0px;

}
.commentlist {
margin-left: 0px; 
padding-left: 0px;
}

.comment-inside {
background-image: url(images/comment-bg.gif);
padding-left: 15px;
padding-right: 15px;
padding-top: 0px;
padding-bottom: 0px;
margin: 0px 0px 0px 0px;
width: 542px;
float: left;
color: #AA9D6C;

}

#commentform {
margin: 1em 0;
background: #f7f7f3;


margin-left: 20px;

}

#commentform textarea {
background: #f8f7f6;
border: 1px solid #d6d3d3;
width: 370px;
}

#commentform #email {
font-size: 1.1em;
background: #f8f7f6;
border: 1px solid #d6d3d3;
width: 280px;
background-image: url(images/comment-email.gif);
background-position: 7px 7px;
background-repeat: no-repeat;
height: 20px;
padding-left: 30px;
padding-top: 6px;
}

#commentform #author {
font-size: 1.1em;
background: #f8f7f6;
border: 1px solid #d6d3d3;
width: 280px;
background-image: url(images/comment-author.gif);
background-position: 7px 7px;
background-repeat: no-repeat;
height: 20px;
padding-left: 30px;
padding-top: 6px;
}

#commentform #url {
font-size: 1.1em;
background: #f8f7f6;
border: 1px solid #d6d3d3;
width: 280px;
background-image: url(images/comment-website.gif);
background-position: 7px 7px;
background-repeat: no-repeat;
height: 20px;
padding-left: 30px;
padding-top: 6px;
}

#commentform #email:focus {
font-size: 1.1em;
background: #ffffff;
border: 1px solid #939793;
width: 280px;
background-image: url(images/comment-email.gif);
background-position: 7px 7px;
background-repeat: no-repeat;
height: 20px;
padding-left: 30px;
padding-top: 6px;
}

#commentform #author:focus {
font-size: 1.1em;
background: #ffffff;
border: 1px solid #939793;
width: 280px;
background-image: url(images/comment-author.gif);
background-position: 7px 7px;
background-repeat: no-repeat;
height: 20px;
padding-left: 30px;
padding-top: 6px;
}

#commentform #url:focus {
font-size: 1.1em;
background: #ffffff;
border: 1px solid #939793;
width: 280px;
background-image: url(images/comment-website.gif);
background-position: 7px 7px;
background-repeat: no-repeat;
height: 20px;
padding-left: 30px;
padding-top: 6px;
}

#commentform input {
margin-bottom: 3px;
}

.search_bg {
height:35px;
width:260px;
float: left;
margin-top: 10px;
margin-left: 10px;
}

#search {
color:#FFFFFF;
padding:0;
}

#search input {
background: #FFF;
font-size:11px;
color:#B8B8B8;
font-family:Tahoma, arial, verdana, courier;
width:150px;
height:11px;
vertical-align:middle;
padding:10px;
border: 1px solid #E7E7DC;
}

.icons {
margin-top: 0px; 
margin-bottom: -5px;
margin-right: 10px;
}

#search .input {
width:66px;
height:31px;
background:none;
border:none;
vertical-align:middle;
margin:0;
padding:0;
margin-left: 10px;
}

.thumbnail-div {
border: 1px solid #DFDFDF;
width: 120px;
height: 120px;
padding: 4px;
margin-bottom: 10px;
float: left;
margin-right: 10px;
}

.post-info {
margin-bottom: 10px;
margin-right:20px;
color: #252722;
font-size: 11px;
font-family:Arial;
padding:0px 10px 0px 10px;
background:#dedecc;
border:1px solid #ccccb5;
}

.post-info a:link, .post-info a:hover, .post-info a:active, .post-info a:visited {
color:#252722;
background:none;
}

.post-inside {
float: left;
width: 245px;
}

.post-inside-2 {
float: left;
width: 450px;
}

#home-right {
width: 187px;
float: right;
padding: 10px;
border-left: 1px solid <?php echo $artsee_content_border; ?>;
border-bottom: 1px solid <?php echo $artsee_content_border; ?>;
}

#home-right ul {
list-style-image: url(images/bullet-home.gif);
margin-left: -15px;
float: left;
}

#home-left {
float: left;
width: 385px;
padding: 10px;
}

.home-categories, .home-categories-comments {
width: 280px;
min-height: 180px;
border: 1px solid <?php echo $artsee_content_border; ?>;
padding: 10px;
margin-top: 10px;
margin-right: 10px;
float: left;
}

.home-categories-comments ul {
list-style-image: url(images/comment-icon.gif);
}

.home-categories a:link, .home-categories a:hover, .home-categories a:visited {
color: #5F666F;
text-transform: uppercase;
font-size: 15px;
font-weight: bold;
}

.logo {
float: left; 
margin-bottom: 15px;
border: 0px;
margin-left: 40px;
margin-top: 68px;
}

.children {
display: none !important;
}

a:focus {
outline: none;
}

.share-div {
width: 590px;
height: 30px;
background-color: none;
display: none;
}

.share {
visibility: <?php echo $artsee_share; ?>;
}

.random-image {
width: 44px;
height: 44px;
border: 4px solid #F2F2E4;
float: left;
margin-left: 10px;
}

.random-content {
float: right;
width: 210px;
}

.random-content a:link {
font-size: 13px;
}
.random {
width: 280px;
float: left;
margin-top: 10px;
}

.orange-titles {
color: #7aad06;
font-size: 11px;
font-weight: bold;

text-transform: lowercase;
display: block;
margin-bottom: 5px;


width: 100%;
}

ul, ol { line-height: 2.0em; }

/* 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 */

/* Begin Images */



p img {
    padding: 0;

max-width: 610px;
background:none;
padding: 0 0 0 0;
    }



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 */
    Code (markup):
    Thanks in advance!!
     
    Lorelei, Dec 30, 2008 IP
    SEMrush
  2. kmap

    kmap Well-Known Member

    Messages:
    2,215
    Likes Received:
    29
    Best Answers:
    2
    Trophy Points:
    135
    #2
    it is simple

    First of all in your image tag in php file

    use
    <img border="0" src="">

    so u need to add border attribute to 0

    this will remove the blue border from image link

    regarding the green background u can write a special class for ur images and use it with images

    <a class="abc" ... >

    this will prevent image links to follow the default link css

    I hope that helps


    Regards

    Alex
     
    kmap, Dec 30, 2008 IP
    Lorelei likes this.
  3. hockeyhero

    hockeyhero Active Member

    Messages:
    853
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    70
    #3
    i had a problem like this with one of my other sites..

    i believe apart from kmap's solution you can also add 

    border-style: none;
    Code (markup):
    to your "img" class in your css..:)

    This should remove the border from the image when it's hyperlinked
     
    hockeyhero, Dec 30, 2008 IP
  4. pcshop899

    pcshop899 Peon

    Messages:
    345
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #4
    This would do for sure...


    .single-entry img {
    border: none 0px;
    background: transparent none;
    }
     
    pcshop899, Jan 17, 2009 IP
    Lorelei likes this.