SitePoint Sponsor

User Tag List

Page 4 of 4 FirstFirst 1234
Results 76 to 96 of 96
  1. #76
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    BTW the last two images are not in their container in IE6
    The last two images in that block are misplaced in IE6 because you haven't defined a class for the middle spacer img to occupy. You have left the class as container5 but nothing is defined. Change it to .spacerimg and add a style similar to this:

    Code:
    .spacerimg {
    OVERFLOW: hidden; 
    WIDTH: 100%; 
    HEIGHT: 67px
    }
    That should make it display ok in IE6.

    Paul

  2. #77
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I already had a container round the images, so I added the {display:block} to that, I just nead to test on my Mac at home, and it could be sorted. I also added a .navgap class to deal with the gap.

    P.S. yeh I noticed about them bursting out of the container at the bottom (If you resized the window it sorted it though?) adding a <br clear="all" /> and a non-breaking space after the nav elements have fixed it though.

  3. #78
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Boston
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Reading over your postings, the following is a must read:

    http://www.simplebits.com/archives/2...rollovers.html

    He uses a method partly talked about, but explains this process very well and to the point. Hope it helps :-)
    -Lewis

  4. #79
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Lewis,

    Thanks for the link , but if you read the thread thoroughly you will see that this method was discussed above and finally discounted. Although I'm not saying that this method isn't very useful as you can have three images in the background for the normal, hover and active states which would be awkward to achieve otherwise. It's just the flicker that we were trying to avoid.

    The problem with moving the background image is that IE displays the hourglass and you get the annoying flicker. This happens not only when the image is loaded but also when it is moved.

    Hiding the foreground image and leaving the background image static (as in my original examples) does not suffer from this flicker and does not incur the hourglass flicking on and off.

    However it's all a matter of choice and what suits best.

    Paul

  5. #80
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It appears that the 'major flicker' (where the roll over images disapear) is more of a 'developer' issue.
    as described on this page.
    Web Developers always want to see the most recent version of a page etc. so we have all set the 'check for newer version of the page' to every time, It seams like it's this setting that causes the flicker. Fortunately IE's default setting (and the one which most people keep) is 'Automatically'.

  6. #81
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mediaman_12
    Fortunately IE's default setting (and the one which most people keep) is 'Automatically'.
    mediaman,
    Fortunately, we've discovered through this thread, a solution that works also when 'check for newer version of the page' is set to every time. Asking people to change their IE settings hardly is a recommended solution.

  7. #82
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone had a go at getting something working using a span in an <a>, set a bg on it, and then use margins/padding/position to hide the span? (By moving it out the side somewhere perhaps) The Hover state being the BG of the <a> itself.

    Douglas
    Hello World

  8. #83
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Doug,
    It seems that anything you do to a bg image on hover in IE produces the hourglass to flick on and off rather annoyingly.

    I originally had the hover state of the image in the background of the a tag and then the normal state of the image in the bg of the span. However any movement of the span results in the hourglass appearing and makes it looks like its flickering. (Mozilla looked ok).

    I tried making the span invisible, transparent and setting the bg position out of the way and also setting the span to zero height,width & linewidth. All seemed to work in their own way but all produced the hourglass in IE.

    As an example I just tried an empty style:
    .cssnav a:hover span{}
    and this also caused the hourglass to appear.


    After that I decided that there was no way to move a bgimage without a flicker of the hourglass in IE although Mozilla seemed ok with it.

    Paul

  9. #84
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, I'm still wondering what the problem is... I've never even seen an hourglass on a mouse over... Oh well, I say live with it. Do you get the hourglass with a JS rollover?

    Douglas
    Hello World

  10. #85
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    JS rollovers are fine. The hourglass only appears when the bg image is moved, hidden,loaded etc.

    This example works fine with no flicker or hourglass because it's the foreground image that's hidden.

    http://www.pmob.co.uk/temp/cssrollover4.htm

    I don't think the hourglass is a real problem as sometimes its so quick you might not notice but on larger images its more apparent. (Maybe faster machines than mine don't see it.)

    Paul

  11. #86
    SitePoint Member
    Join Date
    Jul 2002
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal

    I have read through the entire thread and I can see that this works:
    http://www.pmob.co.uk/temp/cssrollover4.htm

    I am trying to use a horizontal menu:
    http://theconcreteanswer.com/tabbedmenus/

    I must be an idiot, because I can't figure out how to apply the solution to my problem Can somone take a look at my example and help me with getting rid of the flicker in IE6?

  12. #87
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Here's an example using my method above. It does mean you have to have different images to the ones you had.

    Anyway you should be able to work it out as I have put it into a list similar to your layout.

    http://www.pmob.co.uk/temp/cssrollovertabs.htm

    Hope that helps, but ask if you need any more assistance

    Paul

  13. #88
    SitePoint Member
    Join Date
    Jul 2002
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks! 2 ?'s

    Thanks!
    1 - Is there any way to put the <img src=.......> tags that are between the Li tags into the style sheet instead? I tried several methods, but could not get it right.
    2 - My text for each tab is different. Is there any way to have the graphics autosize to the text?
    The tab text is:
    http://theconcreteanswer.com/tabbedmenus/index.htm

  14. #89
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Is there any way to put the <img src=.......> tags that are between the Li tags into the style sheet instead? I tried several methods, but could not get it right.
    You can put the img src in the background of the list element but this would leave you with exactly the same problem that you had before. i.e. You will get the hourglass and flicker in IE again.

    Any manipulation of the background image causes the hourglass to appear (and also a very slight delay). This even happens if you use the one background image which holds all states of your buttons and you swap between then just using the background position.

    The only way to avoid flicker is by using the method I have described (and it also seems to be the fastest).

    You can put the image in the background of the list and then cover it up with a background image in the anchor. But when you hide the anchor the bg image is hidden and then has to reload causing the hourglass to appear , hence the flicker. Foreground images do not suffer from this and seem to be available quicker from cache than corresponding bg images.

    This is only in IE anyway so if you don't want image tags in your html then stick with what you've got as it works quite well (and is the way most people do it).

    There really is no other way of avoiding the flicker (or it hasn't been found yet).

    Also as you want variable length text in your anchors then you are probably stuck to using background images as foreground images can't be manipulated in the same way.

    You may get slighly better speed if you use the background-position method as shown here:

    http://www.pmob.co.uk/temp/cssrolloverpercent4.htm

    Hope that helps.

    Paul

  15. #90
    SitePoint Member
    Join Date
    Sep 2004
    Location
    illinois
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does anyone know how to get the "a:active" tag to work for the example given at redmelon ? I have added
    Code:
    .rollover a:active img { visibility: hidden; }
    to my style sheet which works in IE, but it does not work in Netscape. Any ideas on how to get it to work in Netscape?

  16. #91
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Try using focus for netscape (it works in firefox).

    Code:
    .rollover a:active img { visibility: hidden; } 
    .rollover a:focus img { visibility: hidden; }
    Hope that helps.

    Paul

  17. #92
    SitePoint Member
    Join Date
    Sep 2004
    Location
    illinois
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for replying

    Code:
    .rollover a:focus img { visibility: hidden; }

    Didn't work for Netscape....any other ideas?

  18. #93
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Didn't work for Netscape....any other ideas?
    It seems to work in Netscape 7. Are we thinking about different things Or older browers.

    The active state is when the image is clicked and setting the image to hidden enables the rollover image to remain visible for a short while until the page changes. This seems to be happening in N7 ok.

    Paul

  19. #94
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Russia
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ive tried alot of solutions but nothing worked for my menu
    It still dont preloads in IE
    Does anyone have any ideas?

    link: www.kvn-alania.ru/index.php

  20. #95
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    Ive tried alot of solutions but nothing worked for my menu
    It still dont preloads in IE
    Well you haven't tried the right ones then lol

    2 things you can do. The first is not to make repeating images so small. They should be at least 5px when repeating a large area or a large number of items. The redraw time is much slower than the load time when you use 1px on any dimension.

    The second thing you can do which will cure the problem (even if you stil use those small pixel gifs) is to change the way you do the rollover. The delay in the rollover comes from loading (and drawing) the image on rollover. So therefore you put the over state of the image into the parent already so that it gets drawn on page load. The parent would be your list item.

    Then you put the normal state of the image in the anchor which covers the over state that has already been drawn. You now have 2 images stacked on top of each other and both drawn and pre-loaded.

    All you do is make the background of the anchor transparent on hover and the image underneath shows through. No more loading or redrawing is necessary as they are already there.

    Heres the code to do that.

    Code:
    #topnav ul#nav { /* padding-top: 0; */
    	font: 13px verdana, arial, sans-serif;
    	list-style-type: none;
    	padding-left: 0px;
    	padding-bottom: 27px;
    	margin: 0;
    	line-height: 19px;
    background: url(http://www.kvn-alania.ru/images/menuover.gif) repeat-x;
    /* over state of rollover */
    }
    #topnav #nav a {
    	float: left;
    	display: block;
    	color: #F4F4F4; /*#5D5D5D;*/
    	text-decoration: none;
    	padding: 4px 10px;
    	background: url(http://www.kvn-alania.ru/images/menu.gif) repeat-x;
    /* normal state of rollover */
    }
    #topnav #nav a:hover {
    	/*background: #7FA3EC;*/
    	color: #FFFFFF; /*585858;*/
    background:transparent;
    /* hide top image*/
    }
    You will need to make the necessary changes to your active state etc but you should get the picture.

    Paul

  21. #96
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Russia
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Damn!
    Thats a nice idea!
    Thanks for that. I`ll test it .


Bookmarks

Posting Permissions

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