• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 499
  • Last Modified:

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

0
surework1
Asked:
surework1
  • 6
  • 3
  • 2
  • +2
1 Solution
 
Michel PlungjanIT ExpertCommented:
I do not see any extra lines

http://jsfiddle.net/mplungjan/h4PuB/
0
 
surework1Author Commented:
Hello mplungjan

using IE8 to open your URL, there is this vertical line on the right border of the second button.
0
 
Julian HansenCommented:
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

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Michel PlungjanIT ExpertCommented:
I see this in IE8
ie8.png
0
 
surework1Author Commented:
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
0
 
jrm213jrm213Commented:
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?
0
 
surework1Author Commented:
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
0
 
Julian HansenCommented:
I loaded the code I posted in IE8 (not fiddle) and there is no line with IE8
0
 
surework1Author Commented:
Hello JulianH,

I just want to confirm, by using my code, did you see the vertical line?
0
 
hieloCommented:
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{...}
0
 
surework1Author Commented:
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?
0
 
hieloCommented:
But I would like to show the border instead of setting it to 0px.
retain the original values/settings in .blue{}.  Instead try:
.small {
     font-size: 11px;
     font-weight: bold;
     padding: 0.3em 0.75em;
     padding-right:0.29em;
}
0
 
Julian HansenCommented:
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?
0
 
surework1Author Commented:
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
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 6
  • 3
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now