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 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    96
    Thanks
    1
    Thanked 5 Times in 4 Posts

    Searchbar icon looks different in IE9 and has purple outline around it.

    This is what it should look like



    but this is what it looks like in IE9



    IE9 adds a purple box around my search and it brings my search icon up.

    Here is my html

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<meta name="Keywords" content="" />
    	<meta name="Description" content="" />
    	<link rel="stylesheet"type="text/css" href="style.css"/>
    	<title>sellmysoftware - Make money for your software.</title>
    
    </head>
    <body>
    
    	
    <div class="homepage">
     
     
     
    	<div id="header">
    		<img src="Images/header.jpg"/>
    		
    		<input type="text" name="searchbox" id="searchbox" value="Search for software" onfocus="this.value=''"/>
    		<a href="search.php"><img src="Images/searchicon1.png" onmouseover="this.src='Images/searchicon2.png';" onmouseout="this.src='Images/searchicon1.png';" id="searchicon"/></a>
    	
    	</div>
    		
    	
    		
    		<div id="loginbox">
    			
    		</div>
    		
    		<div id="footer">
    		  Copyright © 2012 sellmysoftware.net. All rights reserved.
    		</div>
    		
    
    
    
    
    
    </div>
    </body>
    </html>

    and my css

    Code:
    body {
    background-image:url('images/background.png');
    background-repeat:repeat;
    }
    
    .homepage {
    border:1px solid gray;
    height:1000px;
    width:80%;
    background-color:white;
    position:relative;
    top:-10px;
    left:10%;
    }
    #footer {
    border:1px solid black;
    height:2%;
    width:99.96%;
    background-color:black;
    color:white;
    text-align:center;
    position:relative;
    top:85.10%;
    left:0%:
    }
    #loginbox {
    }
    #searchbox {
    height:23px;
    width:210px;
    position:relative;
    top:-70px;
    left:70%;
    -moz-border-radius: 2px;
    border-radius: 2px;
    padding:5px;
    font-size:17px;
    outline: none;
    color: #969696;
    border-style: none;
    }
    #menubar {
    position:relative;
    top:-33px;
    }
    #searchicon {
    position:relative;
    top:-59px;
    left:65%;
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    <a href="search.php"><img src="Images/searchicon1.png" onmouseover="this.src='Images/searchicon2.png';" onmouseout="this.src='Images/searchicon1.png';" id="searchicon"/></a>
    The purple border is because you've wrapped the image by an anchor. It's the default rendering of the browser in that case, just like how it underlines all anchors.

    You may remove this by adding
    Code:
    a img{border:none;}
    in to your CSS. But, in your case you don't even need that anchor. Instead, you'll have to use a form to wrap the input element and then change the <img> tag to
    Code:
    <input type="image" ...>
    PS: Add a valid DOCTYPE at the top.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I believe the reason for the misalignment as well as the purple outline of the search icon, is because the image is being given a link border (browser default). You could override this by adding this to the top of your CSS:

    Code:
    a img
    {
    border:none;
    }
    This will prevent any link-indication borders from being placed around images that are links. In addition to help clean things up a bit, I personally would:

    1. Replace your current #searchicon{} CSS with this:

    Code:
    #searchicon
    {
    position:relative;
    width:?px;
    height:?px;
    top:-59px;
    left:65%;
    background:url(Images/searchicon1.png);
    }
    2. Also in your CSS, add this under #searchicon{}:

    Code:
    #searchicon:hover
    {
    background:url(Images/searchicon2.png);
    }
    3. Remove the entire search icon <img> tag ( <img src="Images/searchicon1.png" onmouseover="this.src='Images/searchicon2.png';" onmouseout="this.src='Images/searchicon1.png';" id="searchicon"/> ), and replace it with:

    Code:
    <div id="searchicon">
    Now your image will be the div's background image instead of being a loose image element. Personally I always prefer to place my images as background images like this, rather than using the <img> tags, whenever possible. Also in Step 1, you will need to replace the ?'s in the width and height properties with the image's width and height. Step 2 is a cleaner method for changing the image when being hovered. And with doing all that, you now only need the simple <div> tag shown in Step 3. Hope this helps!

  • #4
    New Coder
    Join Date
    Feb 2012
    Posts
    96
    Thanks
    1
    Thanked 5 Times in 4 Posts
    Thanks guys

  • #5
    New Coder
    Join Date
    Feb 2012
    Posts
    96
    Thanks
    1
    Thanked 5 Times in 4 Posts
    But how do i disable right click on images? So people can't see
    "Save image as"
    "copy image url"
    etc.
    I tried
    Code:
    background-image:url
    but it messes up the picture and then you can't see it.


  •  

    Posting Permissions

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