mssakib Posted July 29, 2013 Share Posted July 29, 2013 Hi I am trying to make some images with links. The code works fine in my localhost in single html page(i use appsrv) . But when i add it to my Wordpress Page , it have some problems. Here is the view in my local host . Here is the view in my Wordpress page. i want to remove the white border around the image and the width of transparent image behind the text is too big. Here is the code <style> .image_sha { -moz-box-shadow:4px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-shadow: 3px 4px 4px grey; } div.description{ bottombottom:0px; /* position will be on bottom */ margin-top:-61px; width:250px; height:7%; /* styling bellow */ background-color:white; font-family: 'tahoma'; font-size:15px; font-weight:bold; color:black; opacity:0.6; /* transparency */ filter:alpha(opacity=60); /* IE transparency */ } p.description_content{ padding:10px; color:red; margin:0px; } </style> <html> <div> <div style="float: left;"> <div style="padding-right: 10px;"> <a href="http://www.garioninaval.com/companyprofile/"> <img class='image_sha' src="http://www.garioninaval.com/wpress/wp-content/uploads/2013/07/company-profile.jpg" alt="" /></a> <div class='description'> <p class='description_content'>Company Profile</p> </div> </div> </div> <div style="float: left; margin-left:50px;"> <div style="padding-left: 10px;"> <a href="http://www.garioninaval.com/download/depliantbrochure/"> <img class='image_sha' src="http://www.garioninaval.com/wpress/wp-content/uploads/2013/07/depliant-brochure.jpg" alt="" /></a> <div class='description'> <p class='description_content'>Depliant Brochure</p> </div> </div> </div> </div> <div style="clear:both;"> </div> <div style="margin-top:80px;"> <div style="float: left;"> <div style="padding-right: 10px;"> <a href="http://www.garioninaval.com/garioni-naval-newsletter/"> <img class='image_sha' src="http://www.garioninaval.com/wpress/wp-content/uploads/2013/07/garioni-naval-newsletter.jpg" alt="" /></a> <div class='description'> <p class='description_content'>GarioniNaval Newsletter</p> </div> </div> </div> <div style="float: left; margin-left:50px;"> <div style="padding-left: 10px;"> <a href="http://www.garioninaval.com/download-prodotti/"> <img class='image_sha' src="http://www.garioninaval.com/wpress/wp-content/uploads/2013/07/prodotti.jpg" alt="" /></a> <div class='description'> <p class='description_content'>Prodotti</p> </div> </div> </div> </div> </html> Need help. Thx in advance Quote Link to comment Share on other sites More sharing options...
pleek Posted August 3, 2013 Share Posted August 3, 2013 (edited) mssakib, I believe your wordpress stylesheet is adding a padding to the images. Since you're images have a class of image_sha try adding the following code .image_sha { padding:0px; } Could supply a link to your wordpress page so I can look at the styling? Edited August 3, 2013 by pleek Quote Link to comment Share on other sites More sharing options...
Solution mssakib Posted August 3, 2013 Author Solution Share Posted August 3, 2013 The problem is fixed Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.