asked on

CSS Style Outline for IE7

It doesn't seem that IE7 supports style outline. Is there any way to hack this and make IE7 support it? Or is there any other specification similar to outline, ie a border that doesn't use space!

How can I get s similar function for IE7. I have got to have a border that doesn't use space and push other elements. I need it for highlighting on mouseover.

Please help!

outline-style:solid;
		outline-color:#FF000;
		outline-width:22px;

Open in new window

ASKER CERTIFIED SOLUTION

glumlun

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Shaye Larsen

ASKER

Wow, interesting concept. Sorry it took me a bit to get back with you. I will implement it and let you know. Here is a look at what I am doing. Right now I am simply creating a div inside another that is the size of the container minus the size the borders take up. Take a look:

<script language='javascript'>
 
function setDivHeights() {
 
 var contentMain = document.getElementById("span_main");
 var changeMain2 = document.getElementById("change_main2");
 var changeMain = document.getElementById("change_main");
 //I subtract 44px to account for 22px on the top and bottom and the same for the 2px's
 changeMain2.style.height = String(Number(contentMain.style.height) - 44) + "px";
 changeMain.style.height = String(Number(contentMain.style.height) - 2) + "px";
 
}
 
addEventListener('load',setDivHeights,true);
 
</script>
 
<style type="text/css">
 
div.main-content {
	position:relative;
	width:570px;
	float:left;
}
 
span.main-content {
	padding:15px;
	float:left;
}
 
div.container {
		padding:0;
		margin:0;
		width:100%;
		position:relative;
		z-index:100;
		top:0;
		left:0;
}
 
#change_main2
{
		filter:alpha(opacity=00); opacity:.000; -moz-opacity:.000; -khtml-opacity:0.00; padding:0; margin:0; position:absolute; top:0; left:0;
		z-index:101; border-style:solid; border-color:#FFFB89; border-width:22px;
}
 
#change_main
{
		filter:alpha(opacity=00); opacity:.000; -moz-opacity:.000; -khtml-opacity:0.00; padding:0; margin:0; position:absolute; top:0; left:0; z-index:101; 
		border-style:solid; border-color:#006FB5; border-width:1px;
}
 
.edit_main
{
		position:absolute;
		top:100px;
		left:25%;
		right:25%;
		text-align:center;
		z-index:103;
		vertical-align:middle
}
 
.edit_box {
		background-color:#FFFB89;
		text-align:center;
		font-size:35px;
		font-weight:bold;
		text-decoration:none;
		color:#006FB5;
		font-family:Arial, Helvetica, sans-serif;
		filter:alpha(opacity=85);
      	opacity:.850;
      	-moz-opacity:.850;
      	-khtml-opacity:0.85;
		border:1px solid #006FB5;
		padding:13px;
	    z-index:103;
		cursor:pointer;
}
 
.edit_text
{
		text-align:center;
		font-size:35px;
		font-weight:bold;
		text-decoration:none;
		color:#006FB5;
		font-family:Arial, Helvetica, sans-serif;
	    z-index:103;
		width:100%;
		height:100%;
}
 
</style>
 
<div class="main-content">
	<div class="container" style="height:100%;">
		<span id="span_main" class="main-content"><%= ResponseBean.getDynamicLayoutsMainContent(0) %></span>			
		<div class="edit_main edit_box" onClick="location.href='editmain<%= ResponseBean.getDynamicLayoutsLayout(0) %>.jsp';" align="center"><a class="edit_text" href="editmain<%= ResponseBean.getDynamicLayoutsLayout(0) %>.jsp">Edit Main Content</a></div>
		<div id="change_main2" style="width:556px; height:100%"></div>
		<div id="change_main" style="width:598px; height:100%"></div>
	</div>
</div>

Open in new window

Shaye Larsen

ASKER

Thank you!