asked on

This only apply to IE8 but not firefox and chrome.

Hello

When running the test.html file, may I know why IE8 display the first Try Demo Blue Button with an additional vertical line on the right? where else the second button does not have. This only apply to IE8 but not firefox and chrome.

I don't think this is a bug of IE8.

test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="test.js"></script>

</head>
<body>
<div class="box1">
<ul>
<li class="trydemobuttonspacing">Demo Program<a href="http://www.test.com/demo/" TARGET="_blank" class="button1 blue small">Try Demo</a></li>
<li class="trydemobuttonspacing2">Demo Program<a href="http://www.test.com/demo/" TARGET="_blank" class="button1 blue small">Try Demo</a></li>
</ul>
</div>
</body>
</html>

Open in new window

test.css

.trydemobuttonspacing a {
	position:absolute;
	line-height: 15px;
	/* margin: top right bottom left */	
	margin:3px 11px;
}

.trydemobuttonspacing2 a {
	float:right;
	position:relative;
	line-height: 15px;
	/* margin: top right bottom left */	
	margin:3px 11px;
}

.box1{
	float:left;
	width:350px;
	border-left:1px solid #e4e7eb;
}

.box1 ul{
	margin:0;
	padding:0;
}

.box1 ul li{
	list-style:none;
	font-size:14px;
	line-height:31px;
	padding-left:20px;
	border-top:1px solid #fff;	
	border-bottom:1px solid #ccc;
	background-color:#EFEEDA;
}

.button1 {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font-size:14px;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 5px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 5px 2px rgba(0,0,0,.2);
	box-shadow: 0 5px 2px rgba(0,0,0,.2);
}

.button1:hover {
	text-decoration: none;
}

.button1:active {
	position: relative;
	top: 1px;
}

.blue {
	background: #1177bd;
	border: solid 1px #f1f9ff;
	color:#fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#00cff0), to(#1177bd));
	background: -moz-linear-gradient(top,  #00cff0,  #1177bd);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00cff0', endColorstr='#1177bd');
}

.blue:hover {
	color: #fff;
	border: solid 1px #f1f9ff;
	background: #00cff0;
	background: -webkit-gradient(linear, left top, left bottom, from(#1177bd), to(#00cff0));
	background: -moz-linear-gradient(top,  #1177bd,  #00cff0);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#1177bd', endColorstr='#00cff0');
}

.blue:active {
	color:#fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#00cff0), to(#1177bd));
	background: -moz-linear-gradient(top,  #00cff0,  #1177bd);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00cff0', endColorstr='#1177bd');
}

.small {
     font-size: 11px;
     font-weight: bold;
     padding: 0.3em 0.75em;
}

Open in new window

test.js

$(document).ready(function () {
	try {
		$(".trydemobuttonspacing").find("a")
			//.text("some new text on the link") 
			.css({
			'position' : 'absolute',
			'margin-top' : '5px',
			'margin-right' : '10px'
			});
	} catch (ex) {
		alert(ex);
	}
});

Open in new window

Michel Plungjan

I do not see any extra lines

http://jsfiddle.net/mplungjan/h4PuB/

surework1

ASKER

Hello mplungjan

using IE8 to open your URL, there is this vertical line on the right border of the second button.

Julian Hansen

I am not sure what you are looking for but if you change your second <li> to some thing like this

<li class="trydemobuttonspacing2"><div style="float: left">Demo Program</div><a href="http://www.test.com/demo/" TARGET="_blank" class="button1 blue small">Try Demo</a><div style="clear:both"></div></li>

Open in new window

You might also look at positioning the button absolutely relative to the <li> container something like this

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="test.js"></script>

</head>
<body>
<div class="box1">
<ul>
<li class="trydemobuttonspacing">Demo Program<a href="http://www.test.com/demo/" TARGET="_blank" class="button1 blue small">Try Demo</a></li>
<li class="trydemobuttonspacing2">Demo Program<a href="http://www.test.com/demo/" TARGET="_blank" class="button1 blue small">Try Demo</a></li>
</ul>
</div>
</body>
</html>

Open in new window

.trydemobuttonspacing a {
	position:absolute;
	line-height: 15px;
	/* margin: top right bottom left */	
	margin:3px 11px;
}

.trydemobuttonspacing2 a {
	position:absolute;
	line-height: 15px;
	/* margin: top right bottom left */	
	margin:3px 11px;
	right: 0;
	top: 0;
}

.box1{
	float:left;
	width:350px;
	border-left:1px solid #e4e7eb;
}

.box1 ul{
	margin:0;
	padding:0;
}

.box1 ul li{
	list-style:none;
	font-size:14px;
	line-height:31px;
	padding-left:20px;
	border-top:1px solid #fff;	
	border-bottom:1px solid #ccc;
	background-color:#EFEEDA;
	position:relative;
	height: 31px;
}

.button1 {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font-size:14px;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 5px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 5px 2px rgba(0,0,0,.2);
	box-shadow: 0 5px 2px rgba(0,0,0,.2);
}

.button1:hover {
	text-decoration: none;
}

.button1:active {
	position: relative;
	top: 1px;
}

.blue {
	background: #1177bd;
	border: solid 1px #f1f9ff;
	color:#fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#00cff0), to(#1177bd));
	background: -moz-linear-gradient(top,  #00cff0,  #1177bd);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00cff0', endColorstr='#1177bd');
}

.blue:hover {
	color: #fff;
	border: solid 1px #f1f9ff;
	background: #00cff0;
	background: -webkit-gradient(linear, left top, left bottom, from(#1177bd), to(#00cff0));
	background: -moz-linear-gradient(top,  #1177bd,  #00cff0);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#1177bd', endColorstr='#00cff0');
}

.blue:active {
	color:#fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#00cff0), to(#1177bd));
	background: -moz-linear-gradient(top,  #00cff0,  #1177bd);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00cff0', endColorstr='#1177bd');
}

.small {
     font-size: 11px;
     font-weight: bold;
     padding: 0.3em 0.75em;
}

Open in new window

Michel Plungjan

I see this in IE8
ie8.png

surework1

ASKER

Hello mplungjan

Attached is the screen shot for your perusal

Hello JulianH

After using your various methods, I'm still getting the same display button with additional vertical line next to the blue button.
Untitled.png

jrm213jrm213

I also do not see an additional vertical line in IE8

do you have any add-ons enabled for web development or anything similar? That might be causing the difference... Try running your ie8 with add-ons disabled. You can do that by
clicking on Start->All Programs->System Tools->Internet Explorer (No Add-ons)

Do you still see the extra vertical line?

surework1

ASKER

Hello jrm213jrm213

I'd disabled all add-on, but i still see the vertical line.

please see screen shot.

I am using 2 desktops and 2 notebooks to view all i can see this vertical line using IE8, windows 7 (64 bits)
Untitled.png

Julian Hansen

I loaded the code I posted in IE8 (not fiddle) and there is no line with IE8

surework1

ASKER

Hello JulianH,

I just want to confirm, by using my code, did you see the vertical line?

hielo

Not sure if this is platform related, but I see the line he describes. I'm on Vista.

Changing:

.blue {
background: #1177bd;
border: solid 1px #f1f9ff;
...
}

to:

.blue {
background: #1177bd;
border: solid 10px #f1f9ff;
...
}

might reveal the problem to others. Conversely, changing the border to:
border: solid 0px #f1f9ff;

(OR getting rid of that line completely) gets rid of the line. You might also need to do the same changes/updates to .blue:hover{...}

surework1

ASKER

Hello hielo

by setting the border to 0px, the vertical line disappear. But I would like to show the border instead of setting it to 0px.

Can you confirm is it the IE8 bug? or is there any hack or work around?

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

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

Start Free Trial

Julian Hansen

Why don't you make your buttons a background image instead - that way you won't have to worry about borders and it will look the same in both browsers?

surework1

ASKER

Hello hielo,

This fixed the vertical line issue.

.small {
font-size: 11px;
font-weight: bold;
padding: 0.3em 8px;
}

is it an IE8 bug or my earlier parameter is wrong?

Hello julianH

1) using images are slower
2) images do not automatically compensate for more text. eg. if you have 2 languages the current buttons will automatically stretch to fit any text you add