Bottom Right floating link - scroll bar issue 2

[tektipsismyfavorite]

I have a div floating absolutely to the bottom and right of the page. I have an image inside the div and it has a link on it.

<div style="right:0px; bottom:0px; width:141px; height:141px; position:absolute;"><a href="shows.php"><img src="img/nextshow.gif" width="141" height="141" border="0" /></a></div>

The problem occurs on FireFox when you click the link, the scroll bars appear, moving the link slightly up and to the left, and sometimes even causing the "click" action to not go through and the user must click again to follow the link. if the link didn't work the first time and if you click off away from the div (like in some blank space) the scroll bars go away.

Any ideas?

 

[Vragabond]

Is there any code out there that could reflect hovering over the link? Do you have this page live where we could see it for ourselves? If not, could you write up a simple test harness so we can try and experience the problem ourselves?

 

[tektipsismyfavorite]

Sure, I'll put up a link.

At the moment no, there is no hover code and it's only affected when it's clicked, not hover. It may be some Firefox plugin I have installed, but when you click links, it puts a 1px dotted border around the item, and that's what's causing the scroll bars to appear, but can't test it out on Plain Firefox w/no Plugins. It doesn't do it in IE6, IE7, Opera, or Netscape.

Please don't make fun of the site, it's by no means my "style" of design. I mean, i wrote the code, but the rainbow colors and the blink and the brick wall and the painted text logo... not my idea. Thanks for understanding.

http://www.jacksonsnla.com

The URL doesn't seem to be working right this second, but it should come up soon.

 

[tektipsismyfavorite]

Ok, I just found out that it doesn't exactly work the way I want it to. How do I make the graphic on the bottom right, stay on the bottom right, no matter the size of the browser, or if the user resizes it, or if they scroll down or what. Thanks for help.

 

[Vragabond]

Substitute [tt]position: absolute;[/tt] with [tt]position: fixed;[/tt] for most modern browsers to work the way you want. IE however (6, I don't know about 7) does not support this and you will need to employ JS for IE.

Incidentally, if you want to get rid of the dotted border around the links in FF, you can use [tt]outline: none;[/tt] on the links you want to remove it from.

 

[tektipsismyfavorite]

Awesome. That fixed it all. Thanks!

 

[jpadie]

@vragabond
can't you use the * hack in ie6

#fixedimage { 
 right:0px; 
 bottom:0px; width:141px; 
 height:141px; 
 position:fixed;
}
* html #fixedimage {position:absolute;}

 

[Vragabond]

Sure you can -- but position absolute, even in IE, does not make an element stick to one position regardless of scrolling. IE needs javascript for that effect.

 

[tektipsismyfavorite]

Yeah, oops, thanks vragabond, I didn't even check IE. Should I hit up the Javascript forum?

 

[jpadie]

@vragabond:
there was something niggling at me saying that this could be done with js. i've played around a bit and have posted a version that uses no js at all.

http://www.tmogolf.co.uk/tektips/thread215-1238401/index.html

@tektipsismyfavourite:
sorry to make use of your design to exemplify. i'll take it down in a bit and post the css if people confirm that it works for their browsers.

Justin

 

[jpadie]

oops - meant withOUT js...

 

[jpadie]

the link is rather malformed above. this is it again

http://www.tmogolf.co.uk/tektips/thread215-1238401/index.html

 

[tektipsismyfavorite]

it's not bad. I'm getting in IE6 where it sits about 15px or so away from the right side. I saw where you had:
#fixeddiv {right:15px;}

That may have had something to do with you changing the margin of the body to 0, but leaving mine the way it is, this seemed to work well:

#fixeddiv {right:0px; bottom:0px;}

http://www.jacksonsnla.com