Results 1 to 7 of 7
  1. #1
    Join Date
    Jul 2005
    Posts
    79

    Weird problem with CSS+XHTML+Opera(8.5) and others...

    The site is here:

    http://ip22.ima.pl/zoldar/hydro

    The problems are:

    1. In Opera (8.5) sometimes, after refresh the part of the page
    beginning from "Multimedia" header moves down, leaving a
    blank space. What may be the reason?

    2. There are three div blocks in center of the page, containing text.
    They have a button-like images set as background. When mouse
    cursor is over them, the background is swapped (done in js + css).
    In IE6 there is rapid image swap when cursor goes over block of text
    itself as well as when it goes out of it. How to get rid of this fast swap?

    3. Somebody told me, that in his FF (don't know the exact version), the
    buttons in the menu on left don't change. I have tested it in FF (1.0.7),
    IE6 and Opera (8.5) and they are working ok.

    They are swapped using document.getElementbyId(name).src
    wrapped in function. Is that correct method?

    Thanks in advance for all Your help.

  2. #2
    Join Date
    Mar 2002
    Posts
    272
    I havent taken the time to look over your css but off the top of my head these changes may help...

    1. make sure to set your body and html as follows...

    html,body{
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding:0;
    height:100%;
    border:none;
    overflow-y: auto;
    overflow-x:hidden
    }

    Div {
    position:absolute;
    }
    2. To create a smooth transition for a css mouseover without the blink:
    .cssnav {
    width:??px;
    height:??px;
    background-image:url(images/yourbackgroundimage.gif)
    }
    .cssnav img {
    width: 100%;
    height: 100%;
    border: 0; }
    .cssnav a:hover img{visibility:hidden}
    .cssnav span{
    left:??px;
    top:??px;
    margin:0;
    cursor:pointer
    }
    Html portion...
    <DIV class="cssnav" style="top:??px; left:??px"><a href="yourlink.php"><img src="images/yourforegroundimage.gif" alt="" border="0"><span>your text</span></a></DIV>
    3. The above can be used for your third problem as well...
    Instead of a image swap you are making a layer with a background image...

    In this block you are displaying a image with some text over it when hovered the image becomes hidden revealing the background image.

    The reason we do it this way is because some browsers do not cache the background image which creates a delay or ficker when you do a background swap...

    I hope this helps and I think I can find some refrence material if you need more information....

    Oh you can check out these links...
    http://www.sitepoint.com/forums/show...hreadid=130905

    Example
    Why, Iím afraid I canít explain myself, sir, because Iím not myself, you know... - Lewis Carroll

  3. #3
    Join Date
    Jul 2005
    Posts
    79
    At first, thank You very much for Your help.

    ad 1. I couldn't apply absolute positioning to div, because it
    messes up the whole design. overflow-x and overflow-y
    attributes in html and body don't go through validation.

    The problem with Opera still remains.

    ad 2. and 3. This one, after a bit of adjusting, works just great.
    Really, really thank You. I am just on my way to apply it to
    all swapped images on the page.

  4. #4
    Join Date
    Mar 2002
    Posts
    272
    I'm glad you could use the above for 2 and 3

    I should have removed the Div position absolute, furthermore the overflows were redundant as you have a fixed width design
    ( the overflows are IE fixes and will cause validation errors as they are ignored by mozzilla browsers).

    Anyhow, good luck!
    Why, Iím afraid I canít explain myself, sir, because Iím not myself, you know... - Lewis Carroll

  5. #5
    Join Date
    Jul 2005
    Posts
    79
    Well I have finished the migration to css image swapping - code
    looks much cleaner

    Now about problem no. 1. - After the changes I've made, this
    issue surprisingly disappeared. But there's another one -
    also in Opera (8.5). Sometimes, after refresh, all images
    (in img tags) randomly show up or disappear... that looks really
    strange. Don't know what's going on...
    Last edited by zoldar; 10-16-2005 at 07:43 PM.

  6. #6
    Join Date
    Jun 2004
    Location
    Northwest Colorado
    Posts
    4,630
    Make sure you're getting your CSS rules in the proper order of precedence. When working with CSS rollovers make sure your pseudoclass rules are defined in the order link, visited, hover, active. Opera is notoriously picky about this sort of thing, leading to the random bizarre behavior you're describing.
    Eric J. Bowman, principal
    Bison Systems Corporation coming soon: a new sig!
    I'm just a poor, unfrozen caveman Webmaster. Your new 'standards' frighten, and confuse me...

  7. #7
    Join Date
    Jul 2005
    Posts
    79
    Well, I wasn't precise on this one - I meant static images in blocks
    beginning from txt_multimedia (multimedia header) to the bottom.

    Anyway, I haven't noticed this issue in further tests. It happend when I did numerous refreshes one after another - maybe
    Opera has some rendering problems under such pressure...

    Nevermind, thank you all again for help.

Posting Permissions

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