WordPress.org

Forums

Using "margin-left" - different results in Opera and FF. (8 posts)

  1. kalkulator
    Member
    Posted 9 years ago #

    Hello.

    I've made a mouseover-effect on two of my links, to show up a picture over my header.
    The picture that pops up, has to be perfectly over another picture that already is in the header.
    To do this, I used the "margin-left"-command.

    After lots of trying and failing, I found the right value.

    At least for Firefox and IE.

    When trying it out in Opera 8/9, it has moved off a few pixels to the right.

    How come, and how do I fix this?

    The mouseOver-technique I used, was the one I found at:
    http://www.meyerweb.com/eric/css/edge/popups/demo2.html

  2. Samuel B
    moderator
    Posted 9 years ago #

    It picks up the CSS file perfectly, but because of different float behaviors, Opera will display it differently. There are seeming differences between how browsers will display different CSS rules.

    It seems Opera has an issue for a lot of folks with their templates. I've yet to see it resolved...maybe someone will correct me?

  3. kalkulator
    Member
    Posted 9 years ago #

    Thanks a lot for the answer!

    I really hope there's a way to fix this. It's just a matter of a few pixels.
    Is there a better way to do this, rather than using the "margin-left" to adjust the mouseOver-picture?

    I am aiming to not use Javascript, that's the reason for why I used the above-mentioned method.

  4. Samuel B
    moderator
    Posted 9 years ago #

    I guess just experiment - something like:
    margin: 0 -3px;
    margin: left -3px;

  5. kalkulator
    Member
    Posted 9 years ago #

    Ok I've fumbled around with your suggestion, not giving any good results, unfortunately.

    I'll post the code, so you can perhaps guide me through this.

    This code is in my header.php, with my link:
    <li class="page_item"><div class="guy"><a href="?page_id=15">About Us<img src="images/hover_guy.jpg"></a></div>

    And this code is in my CSS-file:
    #navcontainer ul li.page_item div.guy a:hover img<br />
    {<br />
    position: absolute;<br />
    top: 10px;<br />
    margin-left: 212px !important ;<br />
    height: 197px;<br />
    width: 159px;<br />
    }

    Any suggestions?

  6. kalkulator
    Member
    Posted 9 years ago #

    I'm sorry that I'm bumping this, but I have yet to find a solution to this problem.

    If you need more info (f.x. more code) to look at, please tell me.

    I really hope to find out of this, but need some help.

  7. Samuel B
    moderator
    Posted 9 years ago #

    I've been experimenting, also and can't get Opera to behave, Sorry.
    Anyone else?

  8. kalkulator
    Member
    Posted 9 years ago #

    I can't seem to fix this problem. IE and FF handles it just the way it should, while Opera moves the two images a few pixels to the right.

    Check it yourself at the page godownunder.net - and hover over About Us and Guestbook.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.