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

bigcasey123 · 06-25-2012, 03:06 AM

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%;
}

abduraooft · 06-25-2012, 06:24 AM

Quote:

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.

resin · 06-25-2012, 06:59 AM

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!

bigcasey123 · 06-25-2012, 02:59 PM

Thanks guys

bigcasey123 · 06-25-2012, 04:11 PM

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.