[solved]CSS Problem with Opera and position question

Hi,

I have add some CSS to display a bigger picture on the left using postion:fixed when you hover over it, which works fine, however the display of the thumbnail is not displaying correctly in Opera but ok in Internet Explorer and FireFox see screen shots below


Internet Explorer/FireFox (click on Image for Full Size)
http://img177.imageshack.us/img177/8839/ieffqr0.th.gif (http://img177.imageshack.us/my.php?image=ieffqr0.gif)

Opera (click on Image for Full Size)
http://img177.imageshack.us/img177/7352/operabx7.th.gif (http://img177.imageshack.us/my.php?image=operabx7.gif)

As you can see the opera looks a mess and does not display the small image correct, does anyone know how to fix this

The css code I am using is below


#menu {position:fixed; width:64px; height:64px; background-color:#fff; z-index:100;}
#menu a.p1, #menu a.p1:visited {display:block; width:64px; height:64px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#menu a img {border:0;}
#menu a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000; border:5px solid #347235;}
#menu a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#menu a.p1:hover .large {display:block; position:fixed; width:auto; height:auto; border:5px solid #347235;}

#info {z-index:100; height:22em;}



Regards,
Garry

I don't believe you that position:fixed works fine in IE because it's an old thing that in IE is position:fixed equal to position:static :D. And your problem, show us rather your URL.

Hi,

I have fixed the position of the thumbnails be changing the first line of the sytlesheet it is now

#menu {position:static; background-color:#fff; z-index:100;}


I don't believe you that position:fixed works fine in IE because it's an old thing that in IE is position:fixed equal to position:static :D. And your problem, show us rather your URL.
Thanks for your reply, I have tested position:fixed in IE7 and that works ok.

So will IE6 have a problem with position:fixed ?

I can't really post a link as it password protected

Regards,
Garry

Yes IE6 will have an issue with position:fixed as it doesn't support it and yes you can post a link, you could even setup a temp account or you could upload the site to a different host. Help us help you.

Hi,

Thanks for your reply

So what should I use instead of position:fixed ?

Yes IE6 will have an issue with position:fixed as it doesn't support it and yes you can post a link, you could even setup a temp account or you could upload the site to a different host. Help us help you.

Regards,
Garry

Try position:absolute though you haven't actually told us what you trying to do. We aren't psychic.

Hi,

I will try and post a link tomorrow, so I can show you want I am trying to do.

Regards,
Garry

Hi,

Problem Page: http://www.testarea.lovehangar.com/osdate_v2/newmemberslist.php
Username: tester1
Password: tester1

As you see when you hover over the picture, it will give a bigger picture, is there anyway to have the bigger

picture in the top left of the browser so when you scroll down it still in the top left of the browser, but not at

the top of the page, so you can still see it regardless how much you have scrolled down, like position:fixed did



#menu {position:static; background-color:#fff; z-index:100;}
#menu a.p1, #menu a.p1:visited {display:block; width:64px; height:64px; text-decoration:none; background:#fff;

top:0; left:0; border:0; border:5px solid #347235;}
#menu a img {border:0;}
#menu a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000; border:5px solid #347235;}
#menu a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#menu a.p1:hover .large {display:block; position:absolute; left:45%; top:auto; width:auto; height:auto; border:5px

solid #347235;}

#info {z-index:100; height:22em;}


Regards,
Garry

As you see when you hover over the picture, it will give a bigger picture, is there anyway to have the bigger picture in the top left of the browser so when you scroll down it still in the top left of the browser, but not at the top of the page, so you can still see it regardless how much you have scrolled down, like position:fixed did
In that case you will need position: fixed for your large image. Update your code and repost a link.

As has been noted, it won't work in IE6, but there are fixes for that. For now, start changing the code so it displays the way you want in Firefox. Then later fix for IE6.

As a side issue, you shouldn't reuse id="menu". What you need is class="menu".

Hi,

Thank you for all your replies.

I am going to leave the hover over image as it is

Regards,
Garry