Forums

ikthius

absolute positioning moves in IE:

here is the code:


a.promo, a.promo:link, a.promo:visited 
{
	position:absolute;
	top:120px;
	right:200px;
	width:115px;
	height:25px;
	line-height:25px;
	text-align:center;
	font-family:\"arial\"; 
	font-size:10pt; 
	font-weight:bold;
	border:1px solid #b5bcd9;
	background-color:#ff0000;
	color:#ffffff;
	text-decoration:none; 
}
a.promo:hover, a.promo:active
{
	position:absolute;
	top:120px;
	right:200px;
	width:115px;
	height:25px;
	line-height:25px;
	text-align:center;
	font-family:\"arial\"; 
	font-size:10pt; 
	font-weight:bold;
	border:1px solid #b5bcd9;
	background-color:#ffffff;
	color:#ff0000;
	text-decoration:none; 	
}

here is a test page http://www.bearsdensom.com/test/, its the xmas vouchers thats the problem.

they are static in FF, Chrome, Safari, & Opera, but in IE8 when hovering the button moves to the left about 20px;

why? the code is virtually the same apart from the colours

MikeC

Works fine for me on FF3 and IE7, and using IE Tester it also works on IE6 and IE8 beta 2

ikthius

"MikeC" said:
Works fine for me on FF3 and IE7, and using IE Tester it also works on IE6 and IE8 beta 2

it moves only on hover in IE I got IE8, but after you have hovered it stays where it went to which is about 20 pixels more to the left.

in IE hover then refresh, hover then refresh, you will see it happen

I uploaded 3 image and I put a red line from the right top edge and moved it up to show you what is going on all in IE8.

http://www.bearsdensom.com/test/before.jpg
http://www.bearsdensom.com/test/hover.jpg
http://www.bearsdensom.com/test/after.jpg

forgive that the page looks as if it is sitting on another page, but that is just me pasting my screenshot.

MikeC

Ok well for me the button is to the right, outside the main part of the website.

I think you havea problem...

Robskiwarrior

Have you added a position to the div that its contained in? So the <div class="banner"> should have a position of relative, then the absolute postion would be defined by the div banner box...

ikthius

"Robskiwarrior" said:
Have you added a position to the div that its contained in? So the <div class="banner"> should have a position of relative, then the absolute postion would be defined by the div banner box...

I added a position:relative to the banner CSS but does not alter anything, IE still showing it moving slightly

ikthius

"MikeC" said:
Ok well for me the button is to the right, outside the main part of the website.

I think you havea problem...

could you screenshot that for me please?

I think I got it now:

this is my new code and it seems ok on 1024x768 & 1280x1024

it seems to sit perfectly, i changed my CSS to:


a.promo, a.promo:link, a.promo:visited 
{
	display:inline;
	position:absolute;
	padding-top:0px;
	margin-top:110px;
	margin-left:-160px;
	width:115px;
	height:25px;
	line-height:25px;
	text-align:center;
	font-family:\"arial\"; 
	font-size:10pt; 
	font-weight:bold;
	border:1px solid #b5bcd9;
	background-color:#ff0000;
	color:#ffffff;
	text-decoration:none; 
}
a.promo:hover, a.promo:active
{
	display:inline;
	position:absolute;
	padding-top:0px;
	margin-top:110px;
	margin-left:-160px;
	width:115px;
	height:25px;
	line-height:25px;
	text-align:center;
	font-family:\"arial\"; 
	font-size:10pt; 
	font-weight:bold;
	border:1px solid #b5bcd9;
	background-color:#ffffff;
	color:#ff0000;
	text-decoration:none; 	
}

treehouse : what would you like to learn today?

Forums

absolute positioning problem