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 Link to comment https://forums.phpfreaks.com/topic/280620-image-shadow-and-bored-problem/ Share on other sites More sharing options...
pleek Posted August 3, 2013 Share Posted August 3, 2013 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? Link to comment https://forums.phpfreaks.com/topic/280620-image-shadow-and-bored-problem/#findComment-1443378 Share on other sites More sharing options...
mssakib Posted August 3, 2013 Author Share Posted August 3, 2013 The problem is fixed Link to comment https://forums.phpfreaks.com/topic/280620-image-shadow-and-bored-problem/#findComment-1443379 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.