Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    zc1
    zc1 is offline
    New Coder
    Join Date
    Jun 2007
    Posts
    29
    Thanks
    8
    Thanked 0 Times in 0 Posts

    [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)


    Opera (click on Image for Full Size)


    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

    Code:
    #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
    Last edited by zc1; 06-04-2007 at 10:38 AM.

  • #2
    Regular Coder
    Join Date
    May 2007
    Posts
    118
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 . And your problem, show us rather your URL.
    Forum for webmasters and developers
    http://www.htmlfrenzy.com
    Are you an IT expert? Join our Reward system
    www.htmlfrenzy.com/reward-system.php

  • #3
    zc1
    zc1 is offline
    New Coder
    Join Date
    Jun 2007
    Posts
    29
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Hi,

    I have fixed the position of the thumbnails be changing the first line of the sytlesheet it is now
    Code:
    #menu {position:static; background-color:#fff; z-index:100;}
    Quote Originally Posted by smalldog
    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 . 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

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    zc1
    zc1 is offline
    New Coder
    Join Date
    Jun 2007
    Posts
    29
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Hi,

    Thanks for your reply

    So what should I use instead of position:fixed ?

    Quote Originally Posted by _Aerospace_Eng_
    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

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try position:absolute though you haven't actually told us what you trying to do. We aren't psychic.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    zc1
    zc1 is offline
    New Coder
    Join Date
    Jun 2007
    Posts
    29
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Hi,

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

    Regards,
    Garry

  • #8
    zc1
    zc1 is offline
    New Coder
    Join Date
    Jun 2007
    Posts
    29
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Hi,

    Problem Page: http://www.testarea.lovehangar.com/o...emberslist.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


    Code:
    #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

  • #9
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by zc1 View Post
    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".

  • #10
    zc1
    zc1 is offline
    New Coder
    Join Date
    Jun 2007
    Posts
    29
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Hi,

    Thank you for all your replies.

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

    Regards,
    Garry


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •