Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer how to get rid of small boxes area

    Hi there

    I'm using wordpress
    and i want to enter a simple HTML img with 4 social icons and use a simple html mapping code to generate links to each icon.

    because i'm running in wordpress environment
    i have some css rules applied to my code

    i have now problem under google chrome of safari
    but when running this code in IE 7 , 8, 9
    i get 4 small boxes next to my image

    so be sure to check this code under IE please.

    what i did to solve this problem
    i have created a new class under the name "soc"
    and tried to remove all the rules;

    what i have accomplish was to make the boxes disappear
    but there is a click able area where these boxes were. when you press them you get to the same links

    how can i make these boxes go away in IE
    and get rid of that extra click able area


    Here is the code with the before and after (with the soc class)


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    
    area {
    	-webkit-border-radius: 2px;
    	-webkit-box-shadow: 0 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
    	background-color: #fff;
    	box-shadow: 0 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
    	box-sizing: border-box;
    	border: 1px solid #aaa;
    	border-bottom-color: #ccc;
    	border-radius: 2px;
    	height: auto;
    	overflow: auto;
    	margin: 0;
    	outline: none;
    	padding: 8px 10px;
    	width: 100%;
    }
    
    img {
    	-ms-interpolation-mode: bicubic;
    	border: 0;
    	height: auto;
    	max-width: 100%;
    	vertical-align: middle;
    }
    
    selection {
    background: #999;
    color: #fff;
    text-shadow: none;
    }
    
    
    /*    this is my new css rule to override the wordpress rules */
    map.soc, img.soc, area.soc{
    	background: none;
    	background-color:transparent;
    	border: none;
    	filter: none;
    	box-shadow:none;
    	text-shadow: none;
    	overflow: hidden;
    	border:hidden;	
    }
    </style>
    </head>
    
    <body>
    <div class="textwidget">
    <img src="http://danad.co.il/blog/wp-content/uploads/2013/04/B1.png" alt="social" width="237" height="65" border="0" usemap="#Map">
    
    <map name="Map" id="Map">
    <area shape="rect" coords="80,-1,117,61" href="https://www.facebook.com/pages/Dana-Israeli-Workshops/222396291155917" target="_blank" alt="לדף הסדנאות">
    <area shape="rect" coords="34,3,69,38" href="http://instagram.com/danaisraeli" target="_blank" alt="לאינסטגרם שלי">
    <area shape="rect" coords="178,5,214,36" href="http://pinterest.com/danaisraeli/" target="_blank" alt="הערוץ שלי ב-PINTREST">
    <area shape="rect" coords="126,-1,163,61" href="https://www.facebook.com/pages/Dana-Israeli-Photographer/219968661401561" target="_blank" alt="לדף הצילום">
     </map>  
    </div>
    
     <p>
    	<img class="soc" src="http://danad.co.il/blog/wp-content/uploads/2013/04/B1.png" alt="social" width="237" height="65" border="0" usemap="#Map" />
    	<map class="soc" name="Map" id="Map">
    	<area class="soc" shape="rect" coords="80,-1,117,61" href="https://www.facebook.com/pages/Dana-Israeli-Workshops/222396291155917" target="_blank" alt="לדף הסדנאות" />
    	<area class="soc" shape="rect" coords="34,3,69,38" href="http://instagram.com/danaisraeli" target="_blank" alt="לאינסטגרם שלי" />
    
    	<area class="soc" shape="rect" coords="178,5,214,36" href="http://pinterest.com/danaisraeli/" target="_blank" alt="הערוץ שלי ב-PINTREST" />
    
    	<area class="soc" shape="rect" coords="126,-1,163,61" href="https://www.facebook.com/pages/Dana-Israeli-Photographer/219968661401561" target="_blank" alt="לדף הצילום" />
     </map> 
    </p>
     
    </body>
    </html>
    i have attach the file

    thanks

    gidi
    Attached Files Attached Files


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •